Docker多阶段构建可实现Vue/React项目一键CI/CD：第一阶段用node:18-alpine安装依赖（npm ci）并构建出dist目录，第二阶段用nginx:alpine仅复制dist和自定义配置，最终镜像仅含静态文件与精简Nginx，体积15–25MB，安全高效。
直接用多阶段构建，一个 Dockerfile 就能完成构建 + 部署，不需要本地打包、也不依赖服务器环境。核心是把 Node 构建过程和 Nginx 运行环境彻底分离，最终镜像里只有 HTML、JS、CSS 和精简的 Nginx。
明确两个阶段：构建用 Node，运行用 Nginx
第一阶段基于 node:18-alpine，只做三件事：安装依赖、复制源码、执行构建；第二阶段基于 nginx:alpine，只接收 dist 目录和定制配置。中间不传递 node_modules、锁文件、源码或构建工具——这些在生产镜像里全是冗余。
- 构建阶段不要用
npm install，改用npm ci --frozen-lockfile，确保依赖版本严格一致 - 运行阶段删掉默认的
/etc/nginx/conf.d/default.conf，只加载你自己的配置文件 - 用
COPY --from=builder精确复制/app/dist/，避免路径错位导致 404
优化缓存与体积的关键细节
Docker 构建速度和镜像大小，很大程度上取决于 COPY 和 RUN 的顺序。易变内容（比如源码）要尽量往后放，让前面的层能复用。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 先
COPY package-lock.json .，再RUN npm ci—— 锁文件不变时，整个依赖层可跳过重装 - 再
COPY . .，而不是把package.json和源码一起 COPY —— 否则改一行 JS 就会触发重新安装依赖 - 基础镜像统一用
-alpine版本，比slim更小，启动更快，且已含常用工具如sh和curl
支持运行时配置，不固化环境变量
API 地址、功能开关这类变量，不能在构建时写死。否则换环境就得重打镜像，违背“一次构建、多次部署”原则。
立即学习“前端免费学习笔记（深入）”；
- 构建时不传
--build-arg注入变量，而是保留占位符，比如在 JS 中写%%API_BASE_URL%% - 运行阶段用 Nginx 的
sub_filter指令，在响应 HTML 时动态替换，或者用启动脚本配合envsubst - 确保 Nginx 配置启用
sub_filter_once off和sub_filter_types text/html application/javascript，覆盖 JS 文件中的占位符
附加但实用的工程习惯
模板好不好用，往往藏在细节里。以下几条不是必须，但上线后能少踩很多坑。
- 加
.dockerignore，排除node_modules、.git、dist、logs等无关目录，避免误传大文件拖慢构建 - 第二阶段加
USER nginx或自定义非 root 用户，提升安全性 - 显式声明
EXPOSE 80，不暴露 webpack-dev-server 的 3000 端口等开发端口 - Vue/React 项目必须配好 Nginx 的
try_files $uri $uri/ /index.html;，否则 History 模式刷新页面会 404
