全栈运维之 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 版本 问题。）

---

觉得有帮助的小伙伴右上角点个赞~

扫描上方二维码关注我的订阅号~