本文次要介绍了如何应用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:10RUN mkdir -p /home/www/backendWORKDIR /home/www/backendCOPY ./backend /home/www/backendRUN npm installEXPOSE 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 buildfrontend uses an image, skippingBuilding backendStep 1/6 : FROM node:10 ---> 1cc99e24ab2dStep 2/6 : RUN mkdir -p /home/www/backend ---> Running in 3b29d2410617Removing intermediate container 3b29d2410617 ---> 8e6c1d9bbcceStep 3/6 : WORKDIR /home/www/backend ---> Running in f28d37b6e1adRemoving intermediate container f28d37b6e1ad ---> 60ddff92496dStep 4/6 : COPY ./backend /home/www/backend ---> 2659b32b501aStep 5/6 : RUN npm install ---> Running in fdd53d145a98npm WARN backend@1.0.0 No descriptionnpm WARN backend@1.0.0 No repository field.audited 50 packages in 0.66sfound 0 vulnerabilitiesRemoving intermediate container fdd53d145a98 ---> ef993955fc5aStep 6/6 : EXPOSE 3001 ---> Running in fb5e73ddbbd4Removing intermediate container fb5e73ddbbd4 ---> 8247b1d879ccSuccessfully built 8247b1d879ccSuccessfully tagged docker_app_001_bak_backend:latest**deMacBook-Pro:docker_app_001_bak hy$ 
**deMacBook-Pro:docker_app_001 **$ docker imagesREPOSITORY                                      TAG                 IMAGE ID            CREATED             SIZEdocker_app_001_backend                      latest              8247b1d879cc        17 seconds ago      914MBnode                                            10                  1cc99e24ab2d        6 days ago          912MBnginx                                           latest              4bb46517cac3        3 weeks ago         133MB**deMacBook-Pro:docker_app_001 **$
  1. 启动容器
docker-compose up
**deMacBook-Pro:docker_app_001 **$ docker-compose upCreating backend ... doneCreating frontend ... doneAttaching to backend, frontendfrontend    | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configurationfrontend    | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/backend     | backend     | > backend@1.0.0 start /home/www/backendbackend     | > node index.jsbackend     | frontend    | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.shfrontend    | 10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conffrontend    | 10-listen-on-ipv6-by-default.sh: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conffrontend    | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.shfrontend    | /docker-entrypoint.sh: Configuration complete; ready for start upbackend     | 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/tcpfrontend /docker-entrypoint.sh ngin ... Up 0.0.0.0:80->80/tcp **deMacBook-Pro:docker_app_001 hy$
  1. 验证服务
http://localhost