---
tags: Docker 筆記 - 2022 春季
---
###### tags: `docker`、`vue`

# ♨ Day 2 使用 Docker 開發 Vue

要開發 Vue 最少要安裝 NVM、Node、Yarn、Vue CLI 四種工具，對於初學者可能是種負擔，可將這些工具打包成 Docker，只要啟動 Container 後，就可立即開發 Vue。
使用 Docker 打造 Vue 開發環境，不僅解決團隊開發環境不同的問題，亦可保持本地電腦環境乾淨，解決開發者電腦雜亂問題

目標:
* 在DOCKER中建立開發VUE的環境，並進行開發
* 在DOCKER中建立開發VUE的環境中，開發後，想要儲存此次之修改

## 在DOCKER中建立開發VUE的環境，並進行開發
### Dockerfile
進入某個資料夾下，新增dockerfile檔案(新增一檔案名叫dockerfile，並用記事本修改內容)，此資料夾就會對應docekr中的vue資料夾:
內容

FROM node:latest
RUN yarn global add @vue/cli

說明:
* 使用最新版 Node，且自動安裝最新版 Vue CLI。

### docker-compose.yml
於此資料夾下，新增docker-compose.yml檔案
內容

version: "3"

services:
  vue:
    build: .
    container_name: MyVue
    volumes:
      - .:/vue
    ports:
      - 8080:8080
    tty: true

* build：動態使用目前目錄下的 dockerfile，使用./下的dockerfile，並將其轉成image檔
* container_name：設定 container 名稱
* volumes：將 host 目前目錄對應到 container 內的 /vue 目錄，: 左側為 host 目錄，: 右側為 host 目錄
* ports：將 host 的 8080 port 對應到 container 的 8080 port，: 左側為 host port，右側為 container 的 port
* tty: true：host 可以使用 shell 連進 container 內
* local端dockerfile檔案所在的資料夾，就會對應docekr中的vue資料夾

### 建立一個container

docker-compose up -d

說明:

* 將dockerfile建置成image，並啟動container
* 使用 up 啟動 container。
* -d：為 d etach，表示執行完立刻將使用權回到 CLI

### 開啟(執行)container

docker exec -it MyVue sh

說明:
* 在container MyVue中開啟LINUX 的CLI(Shell)
* MyVue為docker-compose.yml中的container_name
* docker exec ：在运行的容器中执行命令


說明:
* #為 Container 內的 Linux 環境。

### 開始開發

說明:
* container下的所有資料夾、檔案

進入我們在container中新增的資料夾vue(此 ==新增資料夾(2)== 就會對應docekr中的vue資料夾)

cd vue

並且vue create新的專案

vue create hello-world

完成vue-cli設定後，就可以看到本地的資料夾中出現hello-world的專案了


在container中，我們也可以在vue資料夾中看到hello-world的專案


在container中，進入hello-world資料夾，並執行npm run serve

如此，我們就可以在本地端進行專案的開發、編輯，在container中執行npm run build，npm run serve等需要特定環境(node)的指令了

<br>

## 在DOCKER中建立開發VUE的環境中，開發後，想要儲存此次之修改
### 那如果修改過後，如何讓夥伴們也一起同步呢???

方法一: 連同Dockerfile檔案，上傳至github，而夥伴可以從github上git clone或 git pull下來

方法二: 上傳至DockerHub上

那今天就以 ==方法二:上傳DockerHub== 為主，進行介紹:

### 修改過後，進行commit

我們在docker中的vue資料夾外新增01、02兩個檔案，
// linux cmd

# touch 01
# touch 02


修改過後，先看想要commit的container的container ID:
// windows cmd

docker ps -a


並在windows cmd中進行commit
// windows cmd

docker commit 859ab450d702 vue-upload-test

說明:

docker commit [container ID] [產生的image 名稱]

可以看到新增一個vue-upload-test的image

### 登入docker
// windows cmd

docker login


### 在 DockerHub 上新增一個 Repository




### 上傳至DockerHub

產生一個臨時的image，之後可刪掉:

docker tag vue-upload-testdocker aidezl/vue-upload-test

說明:

docker tag [欲上傳的image] [使用者名稱/自訂] 

* 注意: 後者名稱須設定為 ==使用者名稱/自訂==

可看到新增一個image了

將 ==臨時的image== 上傳至DockerHub:

docker push aidezl/vue-upload-test

可看到已上傳至DockerHub上了

## 測試是否成功
檔案pull下來看看，有沒有新增02、01兩檔案(上傳後，要先把臨時的image刪掉):

docker pull aidezl/vue-upload-test

run image，將image轉成container

docker run aidezl/vue-upload-test

可以看到新增一個container了

成功了!!!

參考:
* [使用 Docker 打造 Vue 開發環境](https://functional.style/docker/vue/development/)
* [[Day 1] 前言 & 介紹Kubernetes 中的 如果對於Docker, Container還不太熟悉的讀者，不妨先看過IThome的專欄 Container技術三部曲 ，也許會對什麼是container更加了解 ](https://ithelp.ithome.com.tw/articles/10192401)
* [Docker社群達人教你快速踏出Docker的第一步](https://www.ithome.com.tw/news/91848)
* [上一個的實際操作](https://asciinema.org/a/13156)