在 Mac 將 Nuxt.js 專案 Build 成 Docker Image 發佈到 dockerhub

每次聚會朋友都在聊用 Docker 來 deploy 有多潮，感覺再不研究就要落伍了；這篇文章會分享我將過去的 Nuxt 專案成功 Build 成 Docker Image 並 push 到 dockerhub 的步驟；整體操作流程個人感覺非常簡單，大家不要被新的技術嚇到了，通常新技術的門檻比想像的更低一點。

一、事先準備
 ➤ 創建 Nuxt.js 專案
 ➤ 下載 & 安裝 Docker
二、在 local 把 Nuxt.js 專案 Build 成 Docker Image
 ➤ 撰寫 dockerfile & .dockerignore
 ➤ 把 Nuxt.js 專案 build 成 Docker Image
三、將 Docker Image 發佈到 dockerhub 上面

一、事先準備

創建 Nuxt.js 專案

如果你已經有 Nuxt.js 的專案可以跳過下面的操作流程

STEP 1：創建一個 Nuxt.js 專案

$ yarn create nuxt-app nuxtjs-tutorial

在創建過程中會問你一些問題，你可以參考筆者的選擇：

STEP 2：讓 Nuxt.js 專案跑起來

$ cd nuxtjs-tutorial 
$ yarn dev

下載 & 安裝 Docker

STEP 1：下載 Docker

前往官網下載 Docker 安裝檔

安裝過程就是狂按下一步，就不在多做介紹，下載後要把 App 打開依照步驟執行才算是完成安裝喔！

STEP 2：註冊 Docker

在官網註冊 docker 帳號

STEP 3：在 local 端登入 docker

$ docker login

輸入剛剛註冊的帳號密碼

二、在 local 把 Nuxt.js 專案 Build 成 docker image

撰寫 dockerfile & .dockerignore

STEP 1：先用指令建立這兩個檔案

$ touch dockerfile
$ touch .dockerignore

STEP 2：撰寫 dockerfile

# node 運行環境
FROM node:12.19.0

# 存放image的目錄
RUN mkdir -p /app
COPY . /app
WORKDIR /app

# 如果需要相關的環境變數請自行調整路徑
#COPY ./env/.prod-env /app/env/.prod-env

# 對外的port
ENV HOST 0.0.0.0 
EXPOSE 3000

# 安裝套件並build專案
RUN yarn
RUN yarn build

# 執行專案
CMD [ "yarn", "start" ]

原始碼：dockerfile（GitHub Gist）

STEP 2：撰寫 .dockerignore

npm-debug.log
node_modules

原始碼：.dockerignore（GitHub Gist）

把 Nuxt.js 專案 build 成 Docker Image

STEP 1：Build Docker Image

在專案目錄下輸入指令後耐心等待打包，docker_example 是這個 image 的名字

docker build -t docker_example .

STEP 2：Run Docker Image

輸入指令確認 image 是否成功

docker run -it — rm -p 80:3000 docker_example

特別注意『80 是對外 port，3000 是 container 的 port』，docker_example 就是剛剛建立的 image 名稱

上圖 172.xx.xx.x:3000 的網址點開來是沒有畫面的，因為我們已經透過指令改變對外 port 到 80 了，在網址列上輸入 http://localhost/ 就能成功看到供果嚕～

三、將 Docker Image 發佈到 dockerhub 上面

STEP 1：給剛剛建立的 Image 一個 tag，username 是你 Doacker 的帳戶，xxximage是你希望這個 Image 在 dockerhub 上呈現的名字

docker tag docker_example username/xxximage

STEP 2：列出目前存在的 Images

docker images

STEP 3：把這個 Image 丟到 dockerhub 的 repositories

這個 push 的過程會根據你產生 Image 的大小決定，通常要等一段時間

docker push username/xxximage

STEP 4：在自己的 Docker 帳戶上看到剛剛上傳的 Docker Image

之後要部署這個 Docker Image 到其他 Server 就只需要輸入下面指令就能獲得嚕～

docker pull username/xxximage

希望這篇文章有幫助到使用 Mac 開發 Nuxt.js 專案的朋友們～