部署在Google App Engine的React+Node项目TS文件暴露问题求助

首先明确：浏览器能看到.ts/.tsx文件绝对不正常，这些是项目源码文件，完全不应被用户访问到。以下是具体排查和解决步骤：

• 先确认是否执行了生产构建
  React项目部署前必须先执行npm run build（或yarn build），生成的build文件夹才是要部署的生产产物。如果直接部署了项目根目录（包含src、.ts文件等），自然会暴露源码。部署时要确保只上传build文件夹和Node.js API的必要生产文件，而非整个项目源码。

• 检查.gcloudignore规则是否正确
  确保你的.gcloudignore包含以下关键规则，避免上传源码文件：

  src/
  *.ts
  *.tsx
  tsconfig.json
  node_modules/
  

  注意不要有!开头的反向规则（比如允许某个TS文件上传），同时确认文件路径没有写错，规则语法和.gitignore一致。

• 修正Google Cloud部署配置

  • 如果用App Engine：检查app.yaml的handlers配置，确保仅指向build文件夹的静态资源，示例配置：

    handlers:
      - url: /static
        static_dir: build/static
      - url: /(.*\.(json|ico))$
        static_files: build/\1
        upload: build/.*\.(json|ico)$
      - url: .*
        static_files: build/index.html
        upload: build/index.html
    

  • 如果用Cloud Run：检查Dockerfile，确保只复制build文件夹和API的生产依赖/编译产物，不要复制整个项目根目录。比如：

    # 构建React产物
    FROM node:18-alpine as build-stage
    WORKDIR /app
    COPY package*.json ./
    RUN npm install
    COPY . .
    RUN npm run build
    
    # 部署阶段
    FROM node:18-alpine
    WORKDIR /app
    COPY --from=build-stage /app/build ./build
    # 复制API的必要文件（比如dist/、package.json等）
    COPY package*.json ./
    RUN npm install --only=production
    CMD ["node", "dist/server.js"]
    

• 清理部署缓存
  重新部署时加上--no-cache参数，避免Google Cloud使用旧的缓存文件，比如：

  gcloud app deploy --no-cache
  

• 验证本地构建产物
  本地执行npm run build后，打开build文件夹检查，正常情况下不应存在任何.ts/.tsx文件。如果有，说明构建工具（webpack/Vite）配置有问题，需要调整构建规则，确保源码文件不被复制到生产产物中。

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