---
# System prepended metadata

title: Docker (四) 用 node image 掛載 vue 的頁面
tags: [Docker]

---

###### 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

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

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

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

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

```yaml=
version: "3.7"

services:
  app:
    image: node
    container_name: vueapp
    ports:
      - 3000:8080
    restart: always
    working_dir: /app
    volumes:
      - ./:/app
    command: npm run serve
```
![](https://i.imgur.com/O0qfXp6.png)

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

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

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


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

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

1. Dockerfile
```dockerfile=
FROM node
WORKDIR /app
COPY . /app
CMD npm run serve
```

2. docker-compose.yml
```yaml=
version: "3.7"

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

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

成功的話，會顯示這樣

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

## 重點提醒

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

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

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

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

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

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

[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

![](https://i.imgur.com/51Tbixg.jpg)

如上圖，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 內，那麼我們當然看不到我們想看到的頁面阿 ~ (這才恍然大悟 😱😱😅)
:::