+-
docker，docker环境的准备及搭建不在此介绍，请参考相关资料。 项目介绍
本文主要介绍了如何使用docker部署前后端分离项目，通过docker-compose工具（为什么不用docker run方式？这里不赘述）编排镜像，并基于镜像创建容器、部署应用到容器。
源码地址：
单应用app
多应用app
下面的操作部署基于单应用app（多应用app docker部署类似）；
docker，docker环境的准备及搭建不在此介绍，请参考相关资料。 项目介绍
为了简单易懂的介绍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
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 [email protected] No description
npm WARN [email protected] 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 **$
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 | > [email protected] 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$http://localhost
