使用GCP Cloud Build部署Angular应用时遇URL 404及Node Sass兼容问题

看起来你碰到了Cloud Build部署时的两个典型问题，我来帮你逐一排查解决：

一、部署后404：补上缺失的存储同步步骤 #

你手动部署时的gsutil rsync步骤是核心操作——它把GCS存储桶里的文件同步到本地目录，再部署到App Engine。但Cloud Build的默认流程不会自动执行这个操作，导致部署的目录里没有必要的文件，自然访问会出现404错误。

你需要把这个同步步骤添加到cloudbuild.yaml里，以下是完整的配置示例：

steps:
  # 第一步：从GCS存储桶同步文件到Cloud Build的工作目录
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    args: ['gsutil', 'rsync', '-r', 'gs://v2-appname.appspot.com', './deploytest']
    id: 'sync-files-from-gcs'

  # 第二步：进入deploytest目录并执行部署
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    args: ['bash', '-c', 'cd ./deploytest && gcloud app deploy --quiet']
    id: 'deploy-to-app-engine'

小细节说明： #

• 我们使用官方的Cloud SDK镜像，里面已经预装了gsutil和gcloud工具，无需额外安装。
• 添加--quiet参数可以避免部署时需要手动确认，更适合自动化流程。

如果你的Angular应用还需要先执行构建操作（比如ng build --prod），记得在同步步骤后加上依赖安装和构建的步骤，比如用Node镜像来完成这些操作。

二、Node Sass环境不兼容错误：版本匹配问题 #

那个Node Sass does not yet support your current environment错误，本质是Cloud Build使用的Node.js版本和你项目里的Node Sass版本不兼容（runtime 83对应Node.js 14.x版本，你的Node Sass版本可能不支持这个ABI版本）。

有三个可行的解决方法：

1. 升级Node Sass到兼容版本 #

直接把Node Sass升级到支持Node.js 14+的版本，比如：

npm install node-sass@^6.0.0 --save-dev

Node Sass 6.x版本支持Node.js 12-16的ABI，刚好匹配Cloud Build常用的Node版本。

2. 在Cloud Build中指定Node.js版本 #

Cloud Build默认的Node版本可能和你本地不一致，你可以在cloudbuild.yaml里指定明确的Node镜像版本，比如用Node.js 14：

steps:
  # 同步存储桶文件
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    args: ['gsutil', 'rsync', '-r', 'gs://v2-appname.appspot.com', './deploytest']
    id: 'sync-files-from-gcs'

  # 安装依赖+构建Angular应用（如果需要）
  - name: 'node:14'
    args: ['bash', '-c', 'cd ./deploytest && npm install && npm run build --prod']
    id: 'install-deps-and-build'

  # 部署到App Engine
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    args: ['bash', '-c', 'cd ./deploytest && gcloud app deploy --quiet']
    id: 'deploy-to-app-engine'

3. 改用Dart Sass替代Node Sass #

Node Sass已经被官方弃用了，推荐迁移到Dart Sass，它更稳定，支持所有最新的Node.js版本：

npm uninstall node-sass
npm install sass --save-dev

Angular CLI现在默认支持Dart Sass，所以替换后不需要额外修改配置，直接就能正常使用。

最后再检查几个关键点 #

• 确认你的app.yaml配置正确，尤其是单页应用的路由重定向——Angular是单页应用，需要把所有请求都指向index.html，示例配置如下：

  runtime: nodejs14
  handlers:
    # 处理静态资源（JS、CSS、图片等）
    - url: /(.*\..+)$
      static_files: dist/$1
      upload: dist/(.*\..+)$
    # 所有其他请求重定向到index.html
    - url: /.*
      static_files: dist/index.html
      upload: dist/index.html
  

  注意根据你的实际构建产物目录调整dist路径。
• 查看Cloud Build的详细日志，确认每一步都成功执行——比如同步步骤是否真的拉取到了文件，构建步骤有没有报错，这些日志能帮你快速定位潜在问题。

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