tiangolo/node-frontend

🚨 弃用警告 🚨

该Docker镜像已不再维护和推荐使用。建议您根据以下指南从零构建前端Docker镜像。

构建前端Docker镜像

前置步骤

1. 创建基于Node.js的前端代码（如React、Vue等）。
2. 创建.dockerignore文件，包含node_modules以避免复制本地依赖，加速构建：

node_modules

3. 若需集成测试（如使用Playwright），安装开发依赖：

bash
npm init playwright@latest

Dockerfile编写

创建多阶段Dockerfile，分为构建阶段和生产阶段：

Dockerfile
# 阶段0：构建阶段，基于Node.js编译前端
FROM node:latest as build-stage

WORKDIR /app

# 先复制依赖文件以利用缓存
COPY package*.json /app/
RUN npm install

# 复制源码并构建
COPY ./ /app/
ARG VITE_API_URL=${VITE_API_URL}
RUN npm run test  # 测试失败则终止构建
RUN npm run build

# 阶段1：生产阶段，基于Nginx提供静态文件服务
FROM nginx:latest

# 复制构建产物到Nginx目录
COPY --from=build-stage /app/dist/ /usr/share/nginx/html/
# 复制自定义Nginx配置
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

构建镜像

运行命令构建生产镜像：

bash
docker build -t my-frontend:prod .

传递构建参数（如 staging 环境）：

bash
docker build -t my-frontend:stag --build-arg VITE_API_URL="https://staging.example.com" .

测试镜像

启动镜像并验证：

bash
docker run -p 80:80 my-frontend:prod

本地访问http://localhost即可查看前端应用。

提示

• 本地开发优先使用热重载工具（如npm run start），提高效率。
• 测试需先在本地验证，再集成到Docker构建流程。

高级Nginx配置

通过添加额外配置扩展功能。例如，创建nginx-backend-not-found.conf：

Nginx
location /api { return 404; }
location /docs { return 404; }

并在Dockerfile中添加：

Dockerfile
COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/

已弃用镜像说明

该镜像曾简化前端多阶段构建，包含Puppeteer依赖及默认Nginx配置。但因配置步骤简单且Playwright替代Puppeteer，故停止维护，建议自行构建。

许可证

本项目采用MIT许可证。 ===FULL_DESC===