使用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看看結果吧!

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

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

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

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