Docker部署angular-contacts-app-example多阶段构建Nginxdocker-compose生产上线教程【免费下载链接】angular-contacts-app-exampleFull Stack Angular PWA example app with NgRx NestJS项目地址: https://gitcode.com/gh_mirrors/an/angular-contacts-app-example本教程带你用Docker 部署angular-contacts-app-example——一个基于 Angular PWA NgRx NestJS 的全栈联系人管理示例应用。通过多阶段构建Multi-stage Build与Nginx托管静态资源再配合docker-compose一键拉起数据库、Redis、API 与前端四套服务轻松完成生产环境上线。 项目与部署架构一览该项目前端是一个可离线使用的Angular PWA含 Service Worker状态管理使用 NgRx Store Effects并支持 WebSocket 实时同步后端为 NestJS API PostgreSQL Redis。docker-compose.yml中定义了 4 个服务组成完整的生产架构服务镜像作用端口dbpostgres:11-alpine联系人数据存储5432内部redisredis:5-alpine缓存/Socket.IO 适配器6379内部apiangular-contacts-apiNestJS 后端接口3000client由Dockerfile现场构建Nginx托管的 Angular 前端4000 → 80其中client服务就是本教程的重点它通过build.context: .指向项目根目录并在构建时传入NG_ENV: local构建参数。 一键启动docker-compose 部署步骤1. 克隆代码仓库git clone https://gitcode.com/gh_mirrors/an/angular-contacts-app-example.git cd angular-contacts-app-example2. 一条命令启动全部服务docker-compose up --build--build会先根据根目录的Dockerfile构建前端镜像再按依赖顺序启动 db → redis → api → client。所有容器都配置了restart: always异常退出或机器重启后会自动拉起这是生产上线的基本保障。3. 验证部署结果浏览器访问http://localhost:4000看到联系人列表页面即部署成功。数据库与 Redis 数据分别持久化到./volumes/contacts_db与./volumes/redis重新部署不会丢数据。 多阶段构建详解Dockerfile 如何把镜像做小打开 Dockerfile整个文件分为两个阶段stage阶段 1builder构建期基于node:10-alpine先只拷贝package.json和package-lock.json执行npm ci利用Docker 层缓存避免每次构建都重装依赖随后拷贝源码执行npm run ng build -- --configuration$NG_ENV生产模式构建NG_ENV由ARG NG_ENVproduction声明可被外部--build-arg覆盖。阶段 2运行期换用极小的nginx:1.13.3-alpine作为运行镜像把上一阶段dist/angular-contacts的构建产物拷贝到/usr/share/nginx/html最终镜像里不包含 Node.js、npm 依赖和任何源码体积从 1GB 降到几十 MB。这就是多阶段构建的核心价值构建环境与运行环境分离产物更小、暴露面更小、启动更快。⚙️ Nginx 配置SPA 路由回退与 gzip 压缩前端镜像内置的nginx/default.conf只有 30 行却覆盖了 PWA 静态托管的两个关键问题SPA 路由回退try_files $uri $uri/ /index.html 404;让 Angular 前端路由如/contacts/1详情页刷新时不会 404请求都会回退到index.html由前端路由接管gzip 压缩开启gzip on并针对 JS、CSS、JSON 等静态资源类型以gzip_comp_level 9级别压缩显著降低 PWA 首次加载体积——这与应用启用了 Service Workerngsw-config.json的离线缓存策略形成互补。另外还配置了proxy_set_header Upgrade与Connection upgrade为将来把 API 反代到同一域名同源 WebSocket预留了条件。 构建参数与环境的对应关系docker-compose.yml里client服务传入的NG_ENV: local决定了构建时打包哪份环境配置。对照 angular.json 中的fileReplacementsNG_ENV替换的环境文件说明productionsrc/environments/environment.prod.ts指向正式 API 域名devsrc/environments/environment.dev.ts指向开发环境 APIlocalsrc/environments/environment.local.ts指向http://localhost:3000适合本机全套部署环境文件中定义了两个关键地址appApi.baseUrlHTTP 接口与socketConfig.urlSocket.IO 实时通道。上线到其他服务器时记得把NG_ENV改为 production或修改对应环境文件中的 API 地址后重新docker-compose up --build。✅ 生产上线清单与常见问题上线前检查前端访问地址为宿主机 4000 端口compose 中4000:80映射如有防火墙需放行API 服务占用 3000 端口浏览器中localhost:3000的环境配置仅在本机部署时有效数据卷./volumes/建议纳入备份策略镜像内nginx以daemon off;前台运行见Dockerfile末尾 CMD保证docker logs可查日志。常见问题页面刷新 404检查nginx/default.conf是否被覆盖确认存在try_files回退规则前端能打开但接口报错多为环境文件 API 地址不匹配确认NG_ENV与实际部署形态一致WebSocket 连不上确认 api 与 client 在同一 docker-compose 网络中且 nginx 保留了Upgrade头改了代码没生效记得加--build参数重新构建镜像。总结本项目用一份Dockerfile 一份docker-compose.yml就实现了Angular PWA 的容器化生产部署多阶段构建让前端镜像只含 Nginx 与静态产物Nginx 配置解决了 SPA 路由与压缩问题docker-compose 则把 Postgres、Redis、NestJS API 和前端编排成可一键启动的完整系统。按照本文步骤操作从克隆仓库到访问http://localhost:4000全程只需两条命令即可把这个全栈示例应用安全地跑在生产环境。【免费下载链接】angular-contacts-app-exampleFull Stack Angular PWA example app with NgRx NestJS项目地址: https://gitcode.com/gh_mirrors/an/angular-contacts-app-example创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考