请详细说明通过 Docker 实现前端应用部署的完整流程，包括镜像构建、容器运行和常见的部署注意事项。需要涵盖 Dockerfile 的编写要点、静态资源处理以及 Nginx 等 Web 服务器的配置方式。
考察说明
考查候选人对前端工程化部署的理解，以及使用 Docker 容器化部署前端项目的实际操作能力和最佳实践。
回答思路
- 【回答框架 1】前端项目 Docker 部署通常采用多阶段构建，以减小最终镜像体积并提升构建效率。编写 Dockerfile 时，第一阶段使用 node 镜像进行依赖安装和项目构建，第二阶段使用 nginx 镜像复制构建产物并配置静态文件服务。
- 【回答框架 2】在 nginx 配置中需注意将前端路由配置为 fallback 到 index.html，以支持 Vue Router 或 React Router 的 history 模式。同时设置静态资源的缓存策略，例如对带 hash 的 js/css 文件设置较长缓存时间。
- 【回答框架 3】运行容器时可使用 docker run -d -p 8080:80 --name my-frontend my-frontend:latest 命令，将宿主机的 8080 端口映射到容器的 80 端口。若要实现持续部署，可结合 CI/CD 流程，在流水线中完成镜像构建、推送和容器重启。
- 【回答框架 4】对于前后端分离项目，在 Nginx 配置中还需要添加反向代理，将 /api 路径的请求代理到后端服务，注意配置代理超时和 WebSocket 支持。
- 【关键点 1】使用多阶段构建，第一阶段构建前端产物，第二阶段用 Nginx 托管，减小镜像体积。
- 【关键点 2】Nginx 配置支持前端路由 history 模式，将请求 fallback 到 index.html。
- 【关键点 3】合理设置静态资源缓存策略，提升加载速度。
- 【关键点 4】通过端口映射将容器端口暴露，并用 CI/CD 实现自动化部署。
- 【易错点 1】若未正确配置 history 模式 fallback，刷新页面或直达路由会返回 404。
- 【易错点 2】构建产物未正确复制到 Nginx 的 html 目录，会导致访问不到静态资源。
- 【易错点 3】忽略了容器的时间同步和日志挂载，可能给问题排查带来困难。