前期提要：
- 本文案例中使用到的设备
- 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 阿里云容器服务构建
首先你要有一个 阿里云 账号，没有可以去注册。
- 阿里云容器服务链接：https://cr.console.aliyun.com/
- 创建命名空间 xxx
- 分别创建镜像仓库 rms-fe、rms-be
- 分别绑定 github
- 分别添加规则
- 分别选择海外机器构建
3.1.1 Docker Hub 构建
没有 科学sw 的访问较慢。
首先你要有一个 Docker Hub 账号，没有可以去注册。
- Docker Hub 链接：https://hub.docker.com/
- 创建命名空间 xxx
- 分别创建镜像仓库 rms-fe、rms-be （私有的只能免费创建一个，所以其中一个创建公有的）
- 分别绑定 github
- 分别添加规则
- 分别构建
3.2 方法二：本地构建 Image（Good（非 Windows））
如果是 Windows 系统，请装一个 VM 来装 Docker，然后再 Build。
如果感觉这样麻烦（反正我是这样认为），请放弃此方法。
- 安装 Docker、Git
- Clone Code
- 分别进入项目根目录 Build
cd RMS-FE
docker build -t rms-fe:v1 .
cd ..
cd RMS-BE
docker build -t rms-be:v1 .- 前后端 image 都上传到 阿里云容器仓库 或者 docker hub
3.3 方法三：服务器远程构建 Image（Greate（科学sw））
本方法 服务器网速 差者（比如我）请弃用
- 安装 Docker、Git
- Clone Code
- 分别进入项目根目录 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 阿里云
其实进入你的 阿里云镜像仓库中就有教程
- putty(或者其他什么都行) 连入服务器
- 登录
docker login --username=xxxxxxx registry.cn-xxxx.aliyuncs.com (上图中的 1) - pull
docker pull registry.cn-xxxx.aliyuncs.com/xxx/xxx:[镜像版本号] (上图中的 2)
4.1.2 Docker Hub
- putty(或者其他什么都行) 连入服务器
- 登录
docker login - 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 版本 问题。）
觉得有帮助的小伙伴右上角点个赞~
