使用 Doceker 打包前端 next.js 專案

使用 next.js 製作網站不外乎就是為了 ssr 這個重點,因為一般的 SPA 網站像是純 react 或 vue,是沒有 seo 的,也就是當我們做好網站,google 搜尋引擎是搜尋不到你的內容的。

首先我們要先有一個next.js專案

執行這個指令不用先進入建立好的空資料夾,也不用在指令後面打專案名稱,直接在要放專案的地方輸入這行指令,過程中他會問你專案名,屆時再輸入即可。

$ yarn create next-app 

這時候你會看到他幫你創建了一個新專案。

可以看到package.json裡面的指令有三種:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
   //...
},

開發環境,我們使用

$ yarn dev

正式環境/打包環境,我們使用

$ yarn build
$ yarn start

兩個都會幫你起好ssr環境。

進入專案的根目錄,新增Dockerfile

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

可以用本地的docker起看看是否可以運行。

docker image 推到 gcp 的 container registry,並且到cloud run運行就可以囉!

具體步驟可以參考這篇:

0

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

加入Line立即聊聊:@539mjyid

0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。