本文主要介绍如何使用docker部署前后端分离项目，通过docker-compose工具整理镜像（为什么不使用dockerrun呢？这里就不细说了），基于镜像创建容器，将应用部署到容器中。源码地址：单应用app多应用app以下操作部署都是基于单应用app（多应用appdocker部署类似）；环境准备docker，这里不介绍docker环境的准备和搭建，请参考相关资料。项目介绍为了通俗易懂地介绍docker容器部署，这里的前后端应用都足够简单。前端部分不涉及webpack的构建和打包。后端项目只是一个快递服务。前端代码部署在nginxdocker容器中，后端代码部署在后端服务docker容器中。代理和接口转发实现。前端工程：html+jquery后端工程：node+express后端工程通过docker构建时会生成对应的图片。这一步需要对应的Dockerfile：FROMnode:10RUNmkdir-p/home/www/backendWORKDIR/home/www/backendCOPY./backend/home/www/backendRUNnpminstallEXPOSE3001这里需要说明一下为什么前端项目不需要Dockerfile文件，因为前端代码部署在nginx中，而nginx在docker生态中有对应的nginx镜像。在docker-compose.yml中指定前端服务的镜像为nginx。nginx配置：*****这里省略了很多代码*****http{upstreambackend{serverbackend:3001;}*****这里省略了很多代码*******server{listen80;服务器名称本地主机；location/{indexindex.htmlindex.htm;#添加属性。根/usr/share/nginx/html；#sitedirectory}location/api/{proxy_passhttp://backend;}error_page500502503504/50x.html;location=/50x.html{root/usr/share/nginx/html;}}}docker-compose.yml:version:'3.1'services:backend:#Backendexpresscontainercontainer_name:backendrestart:alwaysbuild:./#指定上下文根目录，然后将此目录作为Quasi-specifiedDockerfile#networks:#-mywebports:#映射端口-3001:3001command:"npmstart"#创建容器后执行命令frontend:#前端容器（在nginx中运行前端项目）container_name:frontendimage:nginx重新启动：始终卷：-./nginx.conf:/etc/nginx/nginx.conf#Mountnginx配置-./frontend/dist:/usr/share/nginx/html/#Mountproject#networks:#-mywebports:-80:80#映射端口depends_on:#依赖api容器，web容器只有被依赖容器启动后才能启动-backend#networks:#myweb:#driver:bridge镜像构建docker-composebuild构建完成后：可以看到控制平台日志：**deMacBook-Pro:docker_app_001**$docker-composebuildfrontendusesanimage,skippingBuildingbackendStep1/6:FROMnode:10--->1cc99e24ab2dStep2/6:RUNmkdir-p/home/www/backend--->Runningin3b29d2410617Removingintermediatecontainer3b29d2410617--->8e6c1d9bbcceStep3/6:WORKDIR/home/www/backend--->Runninginf28d37b6e1adRemovingintermediatecontainerf28d37b6e1ad--->60ddff92496dStep4/6:COPY./backend/home/www/backend--->2659b32b501aStep5/6:RUNnpminstall--->Runninginfdd53d145a98npmWARNbackend@1.0.0没有描述npmWARNbackend@1.0.0Norepositoryfield.audited50packagesin0.66sfound0vulnerabilitiesRemovingintermediatecontainerfdd53d145a98--->ef993955fc5aStep6/6:EXPOSE3001--->Runninginfb5e73ddbbd4Removingintermediatecontainerfb5e73ddbbd4--->8247b1d879cc27successfullybuilt的中间容器p_001_bak_backend:latest**deMacBook-Pro:docker_app_001_bakhy$*??deMacBook-Pro:docker_app_001**$dockerimagesREPOSITORYTAGIMAGEIDCREATEDSIZEdocker_app_001_backendlatest8247b1d879cc17secondsago914MBnode101cc99e24ab2d6daysago912MBnginxlatest4bb46517cac33weeksago133MB**deMacBook-Pro:docker_app_001**$启动容器docker-composeup**deMacBook-Pro:docker_app_001**$docker-composeupCreatingbackend...doneCreatingfrontend...doneAttachingtobackend,frontendfrontend|/docker-entrypoint.sh:/docker-entrypoint.d/不为空，将尝试执行配置前端|/docker-entrypoint.sh：在/docker-entrypoint.d/backend中寻找shell脚本|吧肯德|>后端@1.0.0启动/home/www/backendbackend|>节点index.js后端|前端|/docker-entrypoint.sh：启动/docker-entrypoint.d/10-listen-on-ipv6-by-default.shfrontend|10-listen-on-ipv6-by-default.sh：获取/etc/nginx/conf.d/default.conffrontend的校验和|10-listen-on-ipv6-by-default.sh：在/etc/nginx/conf.d/default.conffrontend中启用IPv6侦听|/docker-entrypoint.sh：启动/docker-entrypoint.d/20-envsubst-on-templates.shfrontend|/docker-entrypoint.sh：配置完成；准备开始后端|listeningon*:3001查看容器实例:**deMacBook-Pro:docker_app_001hy$docker-composepsNameCommandStatePorts--------------------------------------------------------------------backenddocker-entrypoint.shnpmstartUp0.0.0.0:3001->3001/tcpfrontend/docker-entrypoint.shngin...Up0.0.0.0:80->80/tcp**deMacBook-Pro:docker_app_001hy$实验证明服务http://localhost
