想起之前，我偶爾也協助佈署前端網站，
佈署前端的其中一個基本作法，是在 Server 上安裝 NGINX，並指向前端建置的 dist/ 資料夾，

既然我們目前也學會了怎麼使用 Docker、昨天更介紹了 NGINX，今天就來嘗試把 Vue 的歡迎頁面架起來吧，
當然，是要用符合 Production 、而非 local/dev 的方式。

Vue 3

Vue 是其中一個廣受歡迎的前端框架，尤其是接案團隊，因為很快就能產出成果或甚至交付，
不過這裡沒有要討論前端框架的選用，畢竟...我並不會寫前端，我們今天的目標是把前端寫好的東西做佈署，

進到 Vue 官網的 Quick Start 介紹，直接使用指令，它會用 create-vue 當作 Template 來快速產生 Vue 專案：

$ npm init vue@3

$ cd your-project-path
$ npm install
$ npm run dev

馬上就能看到 Vue 的歡迎頁面了，
到此，我們就假設這是一個前端夥伴做完的網頁內容，而我們要做的，是協助把這些內容佈署到 Server 上，那要怎麼做呢？

搭配 NGINX Image

我們昨天才介紹了 NGINX 用法，就讓我們來用用看吧，

稍微不一樣的是，我們會加入兩個新概念:

1. NGINX 指向 Vue 的 dist/
2. Multi-stage builds

Vue: build dist/

首先，避免有讀者不熟悉 Vue 或前端，快速簡介一下，

Vue 建置時會產生一個 dist/ 的資料夾，這是當使用者訪問網站時，我們要回傳給使用者的東西，裡面包含了 HTML、CSS、JavaScript、及其他靜態檔案，會由瀏覽器打開並顯示成畫面 (aka. 渲染)，

因此定義 NGINX 指向這個 dist/ 資料夾，意思就是回傳我們的前端網頁內容，

習慣上，會在 package.json 中定義一個指令來執行建置:

$ npm run build

至於 NGINX 的設定檔，我們後面直接看範例。

Multi-Stage Builds

為了盡可能降低 Docker Image 的大小，有個技巧就叫 multi-stage build，
概念上是指最後產出的 Image 是經歷過不只一個 Base image，

例如我們這一次，會在 Stage-A 建置 dist/ 資料夾，在 Stage-B 放進 NGINX Image 來使用，
就可以讓最後要使用的 Vue Production Image 減少不必要的內容，
接下來讓我們看定義。

Multi-Stage Dockerfile

# Dockerfile

# Stage-A
# 用一個有 node 環境的 Image，來
FROM node:lts-alpine

# 建置 dist/
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build


# Stage-B: 
# 使用 NGINX image
FROM nginx

# 從 Stage-A COPY 過的內容，只取需要的 dist/ 資料夾，放入 NGINX Image 中
WORKDIR /app
COPY --from=0 /app/dist ./dist/
# 當然別忘了我們的 NGINX 設定檔
COPY conf.d/* /etc/nginx/conf.d/

為了佈署方便，也加入 compose yaml

# docker-compose.yml

version: "3"
services:
  vue:
    build: .
    image: vue
    ports:
      - "80:80"

NGINX Config

把 NGINX 指向 dist/ :

# conf.d/vue.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  vue.test;

    location / {
        root   /app/dist;
		index  index.html;
		try_files $uri $uri/ /index.html;
    }
}

Deploy

進入到 Server 使用指令啟動，記得要注意我們要使用的 80 Port 有沒有被佔用:

$ sudo docker compose up -d

同樣設定本地端的 /etc/hosts 來做測試，
接著，以瀏覽器進入 vue.test，就能看到 Server 上架起來的內容了：

用這個小小的玩具範例，就能展示如何用 Docker 搭配 NGINX 來佈署前端網站，
當然在現實中的專案，總會遇到很多大大小小的問題，但如果弄懂了基底，就能一步一步解決後建造上去，

今天的程式碼可以在 這裡 找到，明天見。