乐趣区

关于前端:前后端分离应用单应用多应用docker部署

jiezi

本文次要介绍了如何应用 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

退出移动版