全棧運維之 Docker 部署前後端

前期提要：

• 本文案例中使用到的設備
  • Windows 8 筆電一臺
  • 阿里雲 ECS 服務器一臺
• 本文案例中使用到的工具
  • VS Code
  • MongoDB Compass
• 本文案例中項目技術棧
  • FrontEnd： Vue + Nuxt
  • BackEnd： Node + Express
  • DataBase： Mongo

---

1. 項目配置

首先要有一個項目，本例中項目技術棧見 “前情提要”。

1.1 前端配置 production 環境 Url

• nuxt.config.js

const isProd = process.env.NODE_ENV === 'production'
console.log('Is current mode production?', isProd)

const apiUrl = isProd ? 'http://rms-backend:8899' : 'http://localhost:8899'

注：這裏 Production 環境中的 ‘rms-backend’，是採用 Docker 中 容器互聯 技術(後面會說)。

1.2 後端配置 DB Host & Port

• config / index.js

module.exports = {
  secret : 'xxx',
  host : process.env.DB_HOST || 'localhost',
  port : process.env.DB_PORT || '27017',
  database: 'rms',
  JWT_SECRET: 'xxx',
  JWT_EXPIRY: 86400000,
  JWT_ISSUER: 'RMS_XH',
  JWT_AUDIENCE: 'RMS_XH',
  JWT_ALG: 'HS256'
}

• package.json

...
"scripts": {
	"dev": "nodemon server.js",
  	"start": "cross-env DB_HOST=139.133.122.111 node server.js",
  	"build": "webpack -p --progress --colors"
},
...

2. 添加 Docker File

添加 Dockerfile 文件到前後端根目錄下

• 前端

FROM node:10.15-slim

ENV NODE_SOURCE /usr/src/

WORKDIR $NODE_SOURCE

COPY . $NODE_SOURCE

RUN buildDeps=' \
        gcc \
        make \
        python \
        ' \
        && apt-get update \
        && apt-get install -y libhiredis-dev node-gyp\
        && apt-get install -y $buildDeps --no-install-recommends \
        && rm -rf /var/lib/apt/lists/* \
        && yarn install \
        && yarn build

EXPOSE 8000
CMD ["yarn", "start"]

• 後端

FROM node:10.15-slim

ENV NODE_SOURCE /usr/src/

WORKDIR $NODE_SOURCE

COPY . $NODE_SOURCE

RUN buildDeps=' \
        gcc \
        make \
        python \
        ' \
        && apt-get update \
        && apt-get install -y libhiredis-dev node-gyp\
        && apt-get install -y $buildDeps --no-install-recommends \
        && rm -rf /var/lib/apt/lists/* \
        && yarn install

EXPOSE 8899
CMD ["yarn", "start"]

注：前端比後端多了一個 yarn build，前端需要打包運行。
最後記得將 前後端代碼 上傳 GitHub

3. 構建應用鏡像 （Image）

3.1 方法一：用 阿里雲 或 Docker Hub 構建（Perfect）

優質高效，建議主選此方案

3.1.1 阿里雲容器服務構建

首先你要有一個 阿里雲 賬號，沒有可以去註冊。

1. 阿里雲容器服務鏈接：https://cr.console.aliyun.com/
2. 創建命名空間 xxx
3. 分別創建鏡像倉庫 rms-fe、rms-be
4. 分別綁定 github
5. 分別添加規則
6. 分別選擇海外機器構建
   

3.1.1 Docker Hub 構建

沒有 科學sw 的訪問較慢。
首先你要有一個 Docker Hub 賬號，沒有可以去註冊。

1. Docker Hub 鏈接：https://hub.docker.com/
2. 創建命名空間 xxx
3. 分別創建鏡像倉庫 rms-fe、rms-be （私有的只能免費創建一個，所以其中一個創建公有的）
4. 分別綁定 github
5. 分別添加規則
6. 分別構建
   

3.2 方法二：本地構建 Image（Good（非 Windows））

如果是 Windows 系統，請裝一個 VM 來裝 Docker，然後再 Build。
如果感覺這樣麻煩（反正我是這樣認爲），請放棄此方法。

1. 安裝 Docker、Git
2. Clone Code
3. 分別進入項目根目錄 Build

cd RMS-FE
docker build -t rms-fe:v1 .
cd ..
cd RMS-BE
docker build -t rms-be:v1 .

4. 前後端 image 都上傳到 阿里雲容器倉庫 或者 docker hub

3.3 方法三：服務器遠程構建 Image（Greate（科學sw））

本方法 服務器網速 差者（比如我）請棄用

1. 安裝 Docker、Git
2. Clone Code
3. 分別進入項目根目錄 Build

cd RMS-FE
docker build -t rms-fe:v1 .
cd ..
cd RMS-BE
docker build -t rms-be:v1 .

4. 生成 Container

4.1 Pull Image

如果你採用了 3.1 的方法一，或者你的 Image 已經放到了 阿里雲 或 Docker Hub 上，那麼請執行這一塊。

4.1.1 阿里雲

其實進入你的 阿里雲鏡像倉庫中就有教程

1. putty(或者其他什麼都行) 連入服務器
2. 登錄 docker login --username=xxxxxxx registry.cn-xxxx.aliyuncs.com (上圖中的 1)
3. pull docker pull registry.cn-xxxx.aliyuncs.com/xxx/xxx:[鏡像版本號] (上圖中的 2)

4.1.2 Docker Hub

1. putty(或者其他什麼都行) 連入服務器
2. 登錄 docker login
3. pull docker pull xxx/xxx:[鏡像版本號] (上圖框中)

我習慣在 pull 之後給 Image 打 Tag
例如 docker tag [imageID] rms-fe:1.0

4.2 Run 前後端

儘量先 run 後端，因爲前端要 容器互聯到 後端

# backend 
docker run -itd -p 8899:8899 --name rms-backend rms-backend:1.0

# frontend
docker run -itd -p 8888:8000 --link rms-backend:rms-backend --name rms-fe rms-fe:1.0

收集 log docker logs :containerId

4.3 Mongo

從 docker Hub 上 pull Mongo 鏡像就好

docker pull mongo
docker run -itd -p 27017:27017--name mongo mongo

最後記得向 Mongo 中插入數據。然後使用 MongoDB Compass 鏈接 mongo （Robo 3T也可以，但是我遇到不能連接的問題，因爲 Mongo 版本和 3T 版本 問題。）

---

覺得有幫助的小夥伴右上角點個贊~

掃描上方二維碼關注我的訂閱號~