如何使用 docker 部署 vite + react 靜態網站？

使用 create react app 或是 vite 部署 react 靜態網站的方式其實很類似，主要的差別就是在 vite.config.js 裡面的寫法。

由於只要部署靜態網站，所以我會選擇用 Cloud Run 的方式，因為他部署上去之後，還會自動幫我產生一個https的預覽網址，就可以直接丟給客戶了。

1. 編寫 script 指令

在使用 vite 建立專案之後，package.json內會自動產生幾個啟動的script，如下：

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
}

我們在最下面加上一行最後打包完成要給Dockerfile啟動的script

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
// 加上下面這行
    "start": "PORT=3000 serve -s dist"
},

注意這個 PORT 你可以自己指定，只要你等等的Dockerfile和vite.config.js都有設定一樣的 PORT 號就好。

2. 修改vite.config.js

打開 vite.config.js 將server的port設定為3000

當然這3000就只要跟你剛剛第一步 package.json 裡面的 start 指令的 port 號一樣就好

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
// 加入下面這段
  server: {
    port: 3000,
  },
});

3. 新增 Dockerfile

在根目錄新增一個檔案Dockerfile（沒有副檔名）

FROM node:20.4
WORKDIR /usr/src/app
RUN yarn global add serve
COPY package.json yarn.lock ./
RUN yarn install && yarn cache clean
COPY . .
RUN yarn build
EXPOSE 3000
CMD [ "yarn", "start" ]

到這邊程式碼的修改就完成，接下來我們要進行部署流程了～

4. 打包上傳到 Artifact Registry

進行這一步的幾個前提是：

1. 你先要有一個 Google Cloud Platform(GCP) 的帳號
2. 建立一個 GCP 專案
3. 啟用 Artifact Registry API
4. 建立至少一個存放區

當以上步驟完成後，請點進去你要上傳的存放區，複製路徑

複製好之後在你的專案根目錄下，執行終端機指令

$ docker build -t {你剛剛複製的路徑}/{你的專案名稱}:latest .

注意：

1. 最後面有一個 . 喔！表示執行的Dockerfile在當下的資料夾，所以我們終端機執行的時候要確保我們是在專案的根目錄，也就是跟Dockerfile同一層。
2. 執行這段指令的時候，請確本電腦上的Docker應用程式是開啟的狀態。

以下是當我把所有該替換的都填上去，會長得像這樣：我的專案名稱是vite-react-demo

$ docker build -t asia-east1-docker.pkg.dev/penueling/playground/vite-react-demo:latest .

那這邊要注意的是，如果你的電腦是M1或是M2晶片，請在上面的指令最後面加上

--no-cache=true --platform=linux/amd64

所以最後指令會變成：

$ docker build -t asia-east1-docker.pkg.dev/penueling/playground/vite-react-demo:latest . --no-cache=true --platform=linux/amd64

5. 部署到 Cloud Run

上一步打包好之後，就可以使用 push 把映像檔上傳到GCP

$ docker push {你剛剛複製的路徑}/{你的專案名稱}:latest .

跑完之後到你的GCP Artifact Registry後台，就可以看到你剛剛上傳的專案裡面多了一個映像檔

點擊最新的映像檔（最新的會放在最上面第一個，或是你可以看他的建立時間）

點進去之後，選右上角的「部署至 Cloud Run」

建立服務前會要修改一些預設的設定

1. 服務名稱（你也可以直接填專案名稱）
2. 地區：選台灣 （會關係到價格跟速度）
3. 驗證：允許未經驗證的叫用者 （因為網站是要給大家用，所以選這個）
4. 容器通訊埠：3000（你不點開來改的話，他預設是8080，但我們Dockerfile是3000，所以要改）

好了之後就按「建立」

等他跑完就會秀出預覽網址，直接點開就可以看囉！

— END