使用Docker 打包 Nuxt.js

使用 nuxt 無非就是為了 ssr，但是在部署 nuxt 的時候，他是需要 server 跑起來才有辦法做到 ssr，不像一般 spa 只需要部署靜態網站，所以最簡單的方法就是使用 docker 打包。

一、下載docker mac版

官網下載docker

二、在專案根目錄新增Dockerfile

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

三、Build docker image

$ docker build -t <專案名> .

要注意最後面有一個.，因為他是要指定在現在路徑的資料夾裡的Dockerfile，-t代表給這個image取一個名字，可以加上冒號代表版本，例如：nuxt-demo:latest

四、Docker run

$ docker run -d --name <containerName(自己取)> -p 1313:3000 <專案名>

1. 執行docker run就代表要把剛剛建立好的image環境創建一個container並且跑起來，--name後面接的就是幫這個container取一個名字，例如：nuxt-demo-container。
2. -p後面接的分別是自己專案啟動的時候的port，冒號後面的代表你想要把他指定成對外可以看到的port，也就是說原本沒有使用docker的時候，起專案yarn dev時，網頁會在localhost:1313，但是你使用docker後，網頁就要到localhost:3000去看才看得到，因為docker對外的port是3000，連接到docker對內的專案1313。
3. 最後面的<專案名>就是你剛剛上一個步驟建立好的image名稱（nuxt-demo:latest）

五、瀏覽器打開localhost:3000看看結果吧！