前后端分离应用（单应用/多应用）docker部署

本文主要介绍了如何使用docker部署前后端分离项目，通过docker-compose工具（为什么不用docker run方式？这里不赘述）编排镜像，并基于镜像创建容器、部署应用到容器。
源码地址：
单应用app
多应用app
下面的操作部署基于单应用app（多应用app docker部署类似）；

1. 环境准备
   docker，docker环境的准备及搭建不在此介绍，请参考相关资料。
2. 项目介绍

为了简单易懂的介绍docker容器部署，这里前后端应用都足够简单。前端部分不涉及webpack构建打包，后端项目只是一个express服务，前端代码部署在nginx docker容器中，后端代码部署在后端服务docker容器中，前端页面调用了后端的接口，通过nginx的反向代理及接口转发实现。
前端项目：html + jquery
后端项目：node + express
后端项目通过docker构建时会生产对应的镜像，这一步需要对应的Dockerfile文件：

FROM node:10
RUN mkdir -p /home/www/backend
WORKDIR /home/www/backend
COPY ./backend /home/www/backend
RUN npm install
EXPOSE 3001

这里需要说明下，为何前端项目不需要Dockerfile文件，因为前端代码部署在nginx中，nginx在docker生态中有对应的nginx镜像，只需要在docker-compose.yml中指明前端服务的image为nginx即可。
nginx配置：

 ******* 此处省略了很多代码  *******

 http {
   upstream backend {
     server backend:3001;
   }

   ******* 此处省略了很多代码  *******

   server {
     listen 80;
     server_name localhost;
     location / {
        index index.html index.htm;  #添加属性。
        root /usr/share/nginx/html;  #站点目录
     }
     location /api/ {
        proxy_pass http://backend;
     }
     error_page  500 502 503 504 /50x.html;
     location = /50x.html {
       root  /usr/share/nginx/html;
     }
   }
 }

docker-compose.yml：

version: '3.1'
services:
  backend:                                  # 后端express容器
    container_name: backend
    restart: always
    build: ./     # 指定设定上下文根目录，然后以该目录为准指定Dockerfile
#    networks:
#      - myweb
    ports:                              # 映射端口
      - 3001:3001
    command:  "npm start" # 容器创建后执行命令

  frontend:             # 前端容器(运行nginx中的 frontend 项目)
    container_name: frontend
    image: nginx
    restart: always
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf #挂载nginx配置
      - ./frontend/dist:/usr/share/nginx/html/  #挂载项目
#    networks:
#      - myweb

    ports:
      - 80:80                     # 映射端口

    depends_on:     # 依赖于api容器，被依赖容器启动后此web容器才可启动
      - backend

# networks:
#  myweb:
#    driver: bridge

1. 镜像构建

docker-compose build

构建完成后：可以看到控制台日志：

**deMacBook-Pro:docker_app_001 **$ docker-compose build
frontend uses an image, skipping
Building backend
Step 1/6 : FROM node:10
 ---> 1cc99e24ab2d
Step 2/6 : RUN mkdir -p /home/www/backend
 ---> Running in 3b29d2410617
Removing intermediate container 3b29d2410617
 ---> 8e6c1d9bbcce
Step 3/6 : WORKDIR /home/www/backend
 ---> Running in f28d37b6e1ad
Removing intermediate container f28d37b6e1ad
 ---> 60ddff92496d
Step 4/6 : COPY ./backend /home/www/backend
 ---> 2659b32b501a
Step 5/6 : RUN npm install
 ---> Running in fdd53d145a98
npm WARN backend@1.0.0 No description
npm WARN backend@1.0.0 No repository field.

audited 50 packages in 0.66s
found 0 vulnerabilities

Removing intermediate container fdd53d145a98
 ---> ef993955fc5a
Step 6/6 : EXPOSE 3001
 ---> Running in fb5e73ddbbd4
Removing intermediate container fb5e73ddbbd4
 ---> 8247b1d879cc
Successfully built 8247b1d879cc
Successfully tagged docker_app_001_bak_backend:latest
**deMacBook-Pro:docker_app_001_bak hy$ 

**deMacBook-Pro:docker_app_001 **$ docker images
REPOSITORY                                      TAG                 IMAGE ID            CREATED             SIZE
docker_app_001_backend                      latest              8247b1d879cc        17 seconds ago      914MB
node                                            10                  1cc99e24ab2d        6 days ago          912MB
nginx                                           latest              4bb46517cac3        3 weeks ago         133MB
**deMacBook-Pro:docker_app_001 **$ 

1. 启动容器

docker-compose up

**deMacBook-Pro:docker_app_001 **$ docker-compose up
Creating backend ... done
Creating frontend ... done
Attaching to backend, frontend
frontend    | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
frontend    | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
backend     | 
backend     | > backend@1.0.0 start /home/www/backend
backend     | > node index.js
backend     | 
frontend    | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
frontend    | 10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conf
frontend    | 10-listen-on-ipv6-by-default.sh: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
frontend    | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
frontend    | /docker-entrypoint.sh: Configuration complete; ready for start up
backend     | listening on *:3001

查看容器实例:

**deMacBook-Pro:docker_app_001 hy$ docker-compose ps

 Name Command State Ports 

--------------------------------------------------------------------------

backend docker-entrypoint.sh npm start Up 0.0.0.0:3001->3001/tcp

frontend /docker-entrypoint.sh ngin ... Up 0.0.0.0:80->80/tcp 

**deMacBook-Pro:docker_app_001 hy$

1. 验证服务

http://localhost