---
tags: 專案
---

# Next Drive 交接文件 - 前端

## 說明

前端框架使用 Nuxt，搭配 Server Side Render，也因為有 SSR，所以需要有 Node.js 的 Runtime Server。並使用 Nginx 做 Proxy Server。
Runtime Server 管理推薦使用 PM2。

> PM2 官方說明：<https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/>
> Nginx 官方說明：<https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/>

## 前置作業

- 建立 `.env` 檔

API_BASE_URL=https://example.com/api

- 安裝依頼套件

> 請務必使用 `npm`，以避免未預期錯誤發生

npm install

## 開始開發

- 官方說明：<https://nuxtjs.org/docs/2.x/get-started/commands#development-environment>

## 部屬

- 官方說明：<https://nuxtjs.org/docs/2.x/get-started/commands#server-deployment>

## 啟動服務

pm2 start npm --name 'next-drive' -- start

## 資料夾節構

- 官方說明：<https://nuxtjs.org/docs/2.x/directory-structure/nuxt>
- 自訂義目錄
- libs: 函式庫
- mixins: 組件共用程式碼

## 修改 Google Map Key

`nuxt.config.js`

export default {
  ...
  modules: [
    ...
    [
      'nuxt-gmaps',
      {
        key: '{YOUR_KEY_HERE}'
      }
    ]
  ]
  ...
}