部署到GAE Flex环境的Angular应用访问出现404错误求助

看起来你遇到的是SPA路由和GAE Flex环境配置不匹配导致的404错误，我帮你梳理几个关键排查点和修复方案：

1. 首先确认环境配置：你可能部署到了标准环境而非Flex #

你的app.yaml里没有指定env: flex，这会让GAE默认部署到标准环境（Python 2.7 runtime），但你明确说要部署到Flex环境。这是核心矛盾点之一，先修正这个：

修改你的app.yaml，开头添加Flex环境声明，并且选择适合静态SPA的Runtime（推荐Node.js，因为Flex环境需要一个运行中的服务进程，不能像标准环境那样直接托管静态文件）：

runtime: nodejs
env: flex
service: adtecy-ui

# 可选：调整资源配置（适合小型SPA的轻量配置）
manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10

handlers:
  # 托管静态资源（bundle、样式、图片等）
  - url: /(.*\.(js|css|png|jpg|jpeg|gif|ico|svg))$
    static_files: dist/\1
    upload: dist/(.*\.(js|css|png|jpg|jpeg|gif|ico|svg))$
    secure: always
    redirect_http_response_code: 301
  # 所有其他请求路由到index.html，支持Angular SPA路由
  - url: /.*
    static_files: dist/index.html
    upload: dist/index.html
    secure: always
    redirect_http_response_code: 301

2. 为Flex环境添加静态文件托管服务 #

Flex环境不像标准环境能直接通过handler托管静态文件，需要一个Node.js服务器来处理请求。你需要在项目中添加一个简单的Express服务器：

1. 在项目根目录创建server.js：

const express = require('express');
const path = require('path');
const app = express();

// 托管dist目录下的静态资源
app.use(express.static(path.join(__dirname, 'dist')));

// 所有路由请求返回index.html，支持Angular的HTML5路由
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

// 监听GAE分配的端口
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

2. 在项目根目录创建package.json（如果没有的话），添加依赖和启动脚本：

{
  "name": "adtecy-ui",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

3. 调整Bitbucket Pipeline步骤 #

现在需要把服务器文件复制到dist目录，并安装依赖，同时去掉不必要的Java组件安装：

image: node:9.11.1
pipelines:
  custom:
    default:
      - step:
          script:
            - npm install -g @angular/cli@latest
            - ng build --prod
            # 复制服务器文件和配置到dist
            - cp app.yaml dist/
            - cp server.js dist/
            - cp package.json dist/
            # 查看dist目录内容，确认文件存在
            - ls dist
            - cd dist
            # 安装Express依赖
            - npm install --production
            # 安装Google Cloud SDK
            - curl -o /tmp/google-cloud-sdk.tar.gz https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-190.0.0-linux-x86_64.tar.gz
            - tar -xvf /tmp/google-cloud-sdk.tar.gz -C /tmp/
            - /tmp/google-cloud-sdk/install.sh -q
            - source /tmp/google-cloud-sdk/path.bash.inc
            # 配置GAE认证和项目
            - echo $GCLOUD_API_KEYFILE | base64 --decode --ignore-garbage > ./gcloud-api-key.json
            - gcloud config set project $GCLOUD_PROJECT
            - gcloud auth activate-service-account --key-file gcloud-api-key.json
            - gcloud app update --split-health-checks --project adtecy-ui
            - gcloud app deploy app.yaml

4. 关键验证点 #

• 确认ng build --prod的输出路径：默认是dist/，如果你的Angular配置里outputPath是dist/adtecy-ui这类子目录，需要调整所有路径（包括server.js和app.yaml里的路径）。
• 部署后用gcloud app logs tail查看实时日志，确认服务器是否正常启动，是否有文件找不到的错误提示。
• 用gcloud app browse直接打开应用，测试根路径和其他路由是否正常。

额外注意事项 #

• 去掉了gcloud components install app-engine-java：你部署的是Node.js环境，不需要Java组件，这一步完全多余。
• 确保$GCLOUD_PROJECT和$GCLOUD_API_KEYFILE环境变量在Bitbucket Pipeline中正确配置。

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