部署React+Python应用到Azure Container Apps时的路径错误排查

已成功将代码和镜像部署至Google Cloud Run，但相同配置在Azure Container Apps部署时出错。执行命令：

az containerapp up

收到如下错误：

The command failed with an unexpected error. Here is the traceback:
[WinError 3] The system cannot find the path specified: './node_modules\@babel\plugin-proposal-nullish-coalescing-operator\node_modules\@babel\helper-function-name\node_modules\@babel\types\lib\builders\flow\createTypeAnnotationBasedOnTypeof.js'

Dockerfile内容 #

FROM node:16-alpine as build-step
WORKDIR app/
# ENV PATH /app/node_modules/.bin:$PATH
# COPY package.json yarn.lock ./
# COPY package.json yarn.lock tsconfig.json ./
# COPY src/ ./src
# COPY public/ ./public
COPY . ./
RUN yarn
RUN yarn build

# Build step #2: build the API with the client as static files
FROM python:3.11.2-bullseye

# Allow statements and log messages to immediately appear in the Knative logs
ENV PYTHONUNBUFFERED True

WORKDIR app/
COPY --from=build-step app/build ./build

RUN mkdir ./api
COPY api/ ./api
RUN pip3 install -U pip && pip3 install --no-cache-dir -r ./api/requirements.txt

ENV QUART_ENV $QUART_ENV

# EXPOSE $PORT
WORKDIR /app/api
# CMD exec gunicorn --bind :$PORT --workers 1 --threads 8 --timeout 0 main:flask_app
CMD exec hypercorn --bind :$PORT main:quart_app

package.json依赖 #

"dependencies": {
    "@date-io/moment": "^2.15.0",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@formkit/auto-animate": "^1.0.0-beta.6",
    "@lottiefiles/react-lottie-player": "^3.4.9",
    "@mui/core": "^5.0.0-alpha.54",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.4.0",
    "@mui/x-date-pickers": "^5.0.0-beta.5",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.19",
    "@types/superagent": "^4.1.15",
    "@types/underscore": "^1.11.4",
    "firebase": "^9.9.0",
    "js-cookie": "^3.0.1",
    "moment": "^2.29.4",
    "query-string": "^7.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^5.0.3",
    "react-ga4": "^1.4.1",
    "react-hook-form": "^7.25.3",
    "react-iframe": "^1.8.5",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "typescript": "^4.7.4",
    "underscore": "^1.13.2",
    "universalify": "^2.0.0",
    "web-vitals": "^2.1.3"
  },

"devDependencies": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2"
  }

错误原因分析 #

1. 路径分隔符冲突：Windows环境下执行az containerapp up时，命令解析node_modules嵌套依赖路径时混合了反斜杠（Windows格式）和斜杠（Unix格式），导致系统无法识别正确路径。
2. 本地依赖污染容器构建：Dockerfile中使用COPY . ./复制了本地所有文件，包括Windows环境生成的node_modules，其中的路径格式与容器内的Unix环境不兼容。
3. 依赖锁文件问题：Windows环境生成的yarn.lock可能包含Windows格式路径，在容器构建时引发路径解析错误。

修复方案 #

• 添加.dockerignore文件，排除本地不必要的文件，避免污染容器构建环境：

node_modules/
.git/
.env
.DS_Store

• 优化Dockerfile构建步骤，利用Docker缓存并避免复制本地node_modules：
  修改build-stage部分：

FROM node:16-alpine as build-step
WORKDIR /app
# 先复制依赖文件，缓存依赖安装层
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# 再复制源码文件
COPY src/ ./src
COPY public/ ./public
COPY tsconfig.json ./
RUN yarn build

• 使用兼容的终端执行部署命令：在Windows上优先使用WSL2或Git Bash运行az containerapp up，避免原生CMD/PowerShell的路径解析问题。若必须使用原生终端，可设置环境变量禁用路径转换：

set MSYS_NO_PATHCONV=1 && az containerapp up

• 重新生成依赖锁文件：在WSL2或Linux环境下删除原有yarn.lock，重新安装依赖生成兼容Unix路径的锁文件：

rm yarn.lock
yarn install

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