---
# System prepended metadata

title: ♨ Day 2 使用 Docker 開發 Vue
tags: [Docker 筆記 - 2022 春季]

---

---
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資料夾:
![](https://i.imgur.com/85QFFAt.png)
內容
```
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 ：在运行的容器中执行命令

![](https://i.imgur.com/HGyBJcO.png)

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


### 開始開發
![](https://i.imgur.com/qQ40tyN.png)

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

進入我們在container中新增的資料夾vue(此 ==新增資料夾(2)== 就會對應docekr中的vue資料夾)
```
cd vue
```
並且vue create新的專案
```
vue create hello-world
```
完成vue-cli設定後，就可以看到本地的資料夾中出現hello-world的專案了

![](https://i.imgur.com/NGqHHdX.png)

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

![](https://i.imgur.com/pxXumXH.png)

在container中，進入hello-world資料夾，並執行npm run serve
![](https://i.imgur.com/1mM3puE.png)




如此，我們就可以在本地端進行專案的開發、編輯，在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
```
![](https://i.imgur.com/LA9jTK7.png)


修改過後，先看想要commit的container的container ID:
// windows cmd
```
docker ps -a
```
![](https://i.imgur.com/vYrXO7G.png)


並在windows cmd中進行commit
// windows cmd
```
docker commit 859ab450d702 vue-upload-test
```
說明:
```
docker commit [container ID] [產生的image 名稱]
```
可以看到新增一個vue-upload-test的image
![](https://i.imgur.com/W3QmRSD.png)


### 登入docker
// windows cmd
```
docker login
```
![](https://i.imgur.com/crrTzqS.png)

### 在 DockerHub 上新增一個 Repository

![](https://i.imgur.com/HySyBGy.png)

![](https://i.imgur.com/GL8omoy.png)

![](https://i.imgur.com/iZgM3wS.png)



### 上傳至DockerHub

產生一個臨時的image，之後可刪掉:
```
docker tag vue-upload-testdocker aidezl/vue-upload-test
```
說明:
```
docker tag [欲上傳的image] [使用者名稱/自訂] 
```
* 注意: 後者名稱須設定為 ==使用者名稱/自訂==
![](https://i.imgur.com/K0hCrBJ.png)


可看到新增一個image了
![](https://i.imgur.com/KA6nOJe.png)


將 ==臨時的image== 上傳至DockerHub:
```
docker push aidezl/vue-upload-test
```
可看到已上傳至DockerHub上了
![](https://i.imgur.com/3Zh0wfN.png)




## 測試是否成功
檔案pull下來看看，有沒有新增02、01兩檔案(上傳後，要先把臨時的image刪掉):
```
docker pull aidezl/vue-upload-test
```
run image，將image轉成container
```
docker run aidezl/vue-upload-test
```
可以看到新增一個container了
![](https://i.imgur.com/funAccS.png)

成功了!!!
![](https://i.imgur.com/L8JFm9I.png)


參考:
* [使用 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)