在Cloud Run部署时执行npx webpack构建前端的问题

我有一个前端采用JS/NPM/Webpack、后端采用Python/Django的混合Web应用。代码仓库中仅存储后端代码和前端源码，未存储编译后的前端代码，预期在部署阶段通过Webpack完成构建。

当前package.json配置如下：

{
  "name": "Name",
  "description": "...",
  "scripts": {
    "start": "npx webpack --config webpack.config.js"
  },
  "engines": {
    "npm": ">=8.11.0",
    "node": ">=16.15.1"
  },
  "devDependencies": {
    [...]
  },
  "dependencies": {
    [...]
  }
}

我通过以下命令将应用部署到Google Cloud Run：

/gcloud/google-cloud-sdk/bin/gcloud run deploy [SERVICE-NAME] --source . --region us-west1 --allow-unauthenticated

但npx webpack --config webpack.config.js命令从未执行，未生成构建文件，导致Django报错：

Error reading /app/webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

请问在生产环境中执行该构建命令最优雅高效的方式是什么？是否应该在Dockerfile中加入RUN npx webpack --config webpack.config.js？我不确定这种方式是否可行。

附当前Dockerfile：

# Base image is one of Python's official distributions.
FROM python:3.8.13-slim-buster

# Declare generic app variables.
ENV APP_ENVIRONMENT=Dev

# Update and install libraries.
RUN apt update
RUN apt -y install \
    sudo \
    curl \
    install-info \
    git-all \
    gnupg \
    lsb-release

# Install nodejs.
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
RUN sudo apt install -y nodejs

RUN npx webpack --config webpack.config.js

# Copy local code to the container image. This is ncessary
# for the installation on Cloud Run to work.
ENV APP_HOME /app
WORKDIR $APP_HOME
COPY . ./

# Handle requirements.txt first so that we don't need to re-install our
# python dependencies every time we rebuild the Dockerfile.
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

# Run the web service on container startup. Here we use the gunicorn
# webserver, with one worker process and 8 threads.
# For environments with multiple CPU cores, increase the number of workers
# to be equal to the cores available.
# Timeout is set to 0 to disable the timeouts of the workers to allow Cloud Run to handle instance scaling.
# Note that the $PORT variable is available by default on Cloud Run.
CMD exec gunicorn --bind :$PORT --workers 1 --threads 8 --timeout 0 --chdir project/ backbone.wsgi:application

核心问题分析 #

你当前的Dockerfile里RUN npx webpack --config webpack.config.js命令执行时机错误——它在COPY . ./之前运行，此时容器里还没有你的前端源码、package.json以及任何依赖，自然无法完成构建。

正确的做法：在镜像构建阶段完成前端构建 #

在Dockerfile中加入前端构建步骤是生产环境最优雅高效的方式，因为构建过程会被封装到镜像中，部署到Cloud Run后直接启动服务即可，不需要额外的 runtime 构建步骤，同时能利用Docker的构建缓存提升重复构建效率。

修改后的Dockerfile示例 #

# Base image
FROM python:3.8.13-slim-buster

# 设置生产环境变量
ENV APP_ENVIRONMENT=Production

# 安装系统依赖（包含Node.js）
RUN apt update && apt -y install \
    sudo \
    curl \
    git-all \
    gnupg \
    lsb-release \
    && rm -rf /var/lib/apt/lists/*  # 清理缓存减小镜像体积

# 安装Node.js
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - \
    && sudo apt install -y nodejs \
    && rm -rf /var/lib/apt/lists/*

# 设置工作目录
ENV APP_HOME /app
WORKDIR $APP_HOME

# 先复制前端依赖配置文件，利用Docker缓存
COPY package*.json ./
# 安装Node依赖
RUN npm ci --only=production  # 生产环境仅安装生产依赖，若需要devDependencies则去掉--only=production

# 复制全部代码
COPY . ./

# 执行Webpack构建
RUN npm run start  # 直接用package.json里的scripts命令，更规范

# 安装Python依赖
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

# 启动服务
CMD exec gunicorn --bind :$PORT --workers 1 --threads 8 --timeout 0 --chdir project/ backbone.wsgi:application

关键优化点说明 #

• 调整步骤顺序：先复制package*.json安装Node依赖，再复制全部代码，最后执行构建——这样只有当依赖配置变更时才会重新安装Node包，否则会复用缓存层。
• 使用npm ci替代npm install：ci会严格按照package-lock.json安装依赖，保证构建一致性，适合生产环境。
• 清理APT缓存：减少镜像体积，提升拉取速度。
• 设置生产环境变量：确保Webpack以生产模式构建（需在webpack.config.js中根据APP_ENVIRONMENT调整mode）。
• 复用package.json的scripts：直接运行npm run start而非硬编码npx webpack，更符合项目配置规范。

额外检查项 #

• 确认webpack.config.js中webpack-stats.json的输出路径与Django期望的路径一致（比如输出到/app/project/static/或Django可访问的目录）。
• 若Webpack需要devDependencies（比如babel-loader等构建工具），则去掉npm ci后的--only=production参数。

内容的提问来源于stack exchange，提问作者Edgar Derby