###### tags: `Docker`

# Docker (四) 用 node image 掛載 vue 的頁面

接下來挑戰的是，建立一個 vue-cli 的專案，並使用 node image 以 docker-compose + Dockerfile 的方式掛載網頁。

## 首先，建立一個 vue-cli 的專案吧

:::info
:bulb: **Hint :** 複習一下第一篇，如何建立 vue-cli 的專案吧
<br>

vue create 專案名稱

:::

執行後，就有熟悉的畫面出現啦~ (因為我是前端 😁😁)

然後在跟 node_mudules 同一層下建立 docker-compose.yml 跟 Dockerfile


## 先用 docker-compose 把專案 run 起來吧

因為這次的練習我一直失敗很多次，甚至卡關很久很久很久 ... 😭😭😢

所以後來決定先把正確可以執行的 docker-compose 建立出來 ~

version: "3.7"

services:
  app:
    image: node
    container_name: vueapp
    ports:
      - 3000:8080
    restart: always
    working_dir: /app
    volumes:
      - ./:/app
    command: npm run serve


可以看到常見的 vue-cli 制式歡迎頁被我們掛載成功了 ~

:::warning
如果不清楚 vue 專案會跑哪個 port 可以先在 VS code 上執行 npm run serve
:::


## 再來，開始拆一些東西出來給 Dockerfile 定義

同樣的，我們把可以拆的拆出來 ~

1. Dockerfile

FROM node
WORKDIR /app
COPY . /app
CMD npm run serve

2. docker-compose.yml

version: "3.7"

services:
  app:
    build: .
    container_name: vueapp
    ports:
      - 3000:8080
    restart: always

所以最後會長成這樣子，網頁也不會出錯。

成功的話，會顯示這樣


## 重點提醒

因為這份練習實在是卡關非常久

所以這邊整理一下之前都出錯在哪邊

首先，我之前都是 docker-compose 跟 Dockerfile 同步編輯

所以一出錯，根本很難找也不知道問題出在哪邊

後來看到這一篇，才想到 ~ 我應該要先能單獨執行 docker-compose


[https://docs.microsoft.com/zh-tw/visualstudio/docker/tutorials/use-docker-compose](https://docs.microsoft.com/zh-tw/visualstudio/docker/tutorials/use-docker-compose)

後來成功後，再來一步一步的拆成 Dockerfile

docker-compose 裡的 command 對應到 Dockerfile 裡則是 CMD 指令

因此才得出上面成功的 Dockerfile 跟 docker-compose。

---

另一點，則是之前沒有先單獨執行 docker-compose

所以 Dockerfile 則是一直被我寫成 RUN npm run serve


如上圖，container 雖然有成功跑起來，但是可以看到 docker-compose 裡的設定很多都沒吃到，PORTS 沒匯出來，NAMES 也不是我們設定的 container_name。

:::danger
所以須注意 RUN 跟 CMD 的使用時機跟方式
:::

* RUN : 根據理解，使用的時機比較是執行建置 container 時，需要安裝某些支援的 Linux 指令之類的。

* CMD : 在 docker run 後執行的，意指在 container 內運行的指令，所以這將會是我們需要用到的，而在當有多個 CMD 指令時，只有最後一個會被執行。

:::warning
因為如果我們使用的是 RUN npm run serve，container 確實是會被啟動，但試著想了一下，但我們跑的服務所要呈現的網頁不都是在 container 嗎? 所以 npm run serve 雖然程式有幫我們執行，但由於不是跑在 container 內，那麼我們當然看不到我們想看到的頁面阿 ~ (這才恍然大悟 😱😱😅)
:::