[Express+Vue 搭建電商網站] 22 專案容器化 - 前端

專案 Docker 容器化

接著我們會把整個專案使用 Docker 來將服務容器化，也會在 MongoDB 設定身份驗證機制
如果對 Docker 不熟的話必須先去了解，才有辦法進行。或是直接跳過這個章節 交給熱心的攤主處理
在這邊我們會用到三個容器

• nginx 伺服器：處理 Vue 框架實現的前端靜態頁面
• api：運行我們使用 Express 建立的 API 服務
• db：就是一個運行 MongoDB 資料庫的容器
  流程會變成

資料進來由 nginx 分派，如果是前端或是靜態資源就直接從 nginx 回傳。若是 API 類型的請求則轉交給 API 容器處理後再回傳資料。
這種架構有以下優勢

• 透過 nginx 過濾非法請求
• 解決前後端跨域問題，因為兩者間都透過相同端點訪問
• 可以輕鬆擴增伺服器大小，並且使用 Nginx 做負載平衡

前端容器化

首先容器化的是先前用 Vue 寫的前端專案，將專案打包成靜態頁面

npm run build

接著增加 nginx 設定檔 client/config/nginx.conf

server {
 listen 80;
 root /www;
 index index.html;
 sendfile on;
 sendfile_max_chunk 1M;
 tcp_nopush on;
 gzip_static on;
 location /api/v1 {
 proxy_pass http://api:3000;
 }
 location / {
 try_files $uri $uri/ /index.html;
 }
}

其中要特別注意的是 location 規則

• 請求目標如果是 /api/v1，那就把請求傳到 api 容器裡
• 請求目標 /，則直接回傳靜態頁面 index.html
  然後要回頭稍微修改一下前端訪問後端的網址，打開 client/src/store/actions.js 修改 API_BASE 成

const API_BASE = '/api/v1';

這樣改了之後前端在對 API 發起請求時就是取決於當前頁面的網址，而不是固定的 http://localhost:3000/api/v1
接著就是要撰寫 Docker 相關設定
首先建立 client/src/Dockerfile

FROM nginx:1.13
# 刪除預設的 Nginc 設定
RUN rm /etc/nginx/conf.d/default.conf
# 加入自己定義的 Nginx 設定檔
COPY config/nginx.conf /etc/nginx/conf.d/
# 將前端靜態檔案映射到容器的 /www 目錄下
COPY dist /www

接著建立 client/.dockerignore，裡面只有短短一行

node_modules

代表不 mount 進 docker 的資料夾