在 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
STEP 2：撰寫 .dockerignore
➤ 把 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/xxximageSTEP 2：列出目前存在的 Images
docker images
STEP 3：把這個 Image 丟到 dockerhub 的 repositories
這個 push 的過程會根據你產生 Image 的大小決定，通常要等一段時間
docker push username/xxximageSTEP 4：在自己的 Docker 帳戶上看到剛剛上傳的 Docker Image
之後要部署這個 Docker Image 到其他 Server 就只需要輸入下面指令就能獲得嚕～
docker pull username/xxximage希望這篇文章有幫助到使用 Mac 開發 Nuxt.js 專案的朋友們～
▶︎ 如果這篇文章有幫助到你1. 可以點擊下方「Follow」來追蹤我～
2. 可以對文章拍手讓我知道 👏🏻你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼▶︎ 如果你對工程師的職涯感到迷茫1. 也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
2. 也歡迎您到書局選購支持，透過豐富的案例來重新檢視自己的職涯
