Angular 尝试使用云构建（gcp）部署时，将显示“未找到URL”

应用-角度

我正在尝试在GCP中为我的angular应用程序自动化部署过程。当我从cloud shell手动部署时，一切正常，但当我尝试使用cloudbuild.yaml构建部署时，cloud build会触发它，表示部署成功。当我点击网址时，它说404找不到

手动部署命令

gsutil rsync -r gs://v2-appname.appspot.com ./deploytest
cd deploytest
gcloud app deploy

我不太熟悉云构建

问题可能出现在下面给出的cloudbuild.yaml文件中

steps:

      # Install node packages
      - name: "gcr.io/cloud-builders/npm:latest"
        args: ["install"]
    
      # Build production package
      - name: "gcr.io/cloud-builders/npm"
        args: ["build", "--configuration=staging"]
    
      # Deploy to google cloud app engine
      - name: "gcr.io/cloud-builders/gcloud"
        args: ["app", "deploy", "app.yaml"]

我的理解是，当我们手动部署时，我们构建文件并将其上载到存储中的“dist”文件夹。然后我们同步目录进行部署，然后使用gcloud app deploy进行部署

但在使用云构建时- 我有一个GitHub repo，它连接到触发器，任何推送都发生在某个分支上，它会获取cloudbuild.yaml文件并处理。但是cloudbuild.yaml没有任何要部署或同步的目录，这是我缺少的吗？如何添加它？如果不是，请纠正我

谢谢

编辑

EA_Website ->
         src/
         cloudbuild.yaml
         app.yaml
         angular.json
         package.json 

app.yaml

runtime: python27
threadsafe: yes
api_version: 1

# Google App Engine's cache default expiration time is 10 minutes. It's suitable for most Production
# scenarios, but a shorter TTL may be desired for Development and QA, as it allows us to see a fresh
# code in action just a minute after the deployment.
default_expiration: 60s

handlers:

# To enhance security, all http requests are redirected to their equivalent https addresses (secure: always).

# Assets are retrieved directly from their parent folder.
- url: /assets
  static_dir: dist/projectname/assets
  secure: always

# Static files located in the root folder are retrieved directly from there, but their suffixes need to be
# mapped individually in order to avoid them from being hit by the most general (catch-all) rule.
- url: /(.*\.css)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.css)
  secure: always

- url: /(.*\.html)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.html)
  secure: always

- url: /(.*\.ico)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.ico)
  secure: always

- url: /(.*\.js)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.js)
  secure: always

- url: /(.*\.txt)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.txt)
  secure: always

# Site root.
- url: /
  static_files: dist/projectname/index.html
  upload: dist/projectname/index.html
  secure: always

# Catch-all rule, responsible from handling Angular application routes (deeplinks).
- url: /.*
  static_files: dist/projectname/index.html
  upload: dist/projectname/index.html
  secure: always

skip_files:
- ^(?!dist)

runtime: python27
threadsafe: yes
api_version: 1

# Google App Engine's cache default expiration time is 10 minutes. It's suitable for most Production
# scenarios, but a shorter TTL may be desired for Development and QA, as it allows us to see a fresh
# code in action just a minute after the deployment.
default_expiration: 60s

handlers:
    # Static files located in the root folder are retrieved directly from there, but their suffixes need to be
    # mapped individually in order to avoid them from being hit by the most general (catch-all) rule.
    - url: /(.*\.css)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.css)
      secure: always
    
    - url: /(.*\.html)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.html)
      secure: always
    
    - url: /(.*\.ico)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.ico)
      secure: always
    
    - url: /(.*\.js)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.js)
      secure: always
    
    - url: /(.*\.txt)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.txt)
      secure: always
    
    # Site root.
    - url: /
      static_files: dist/projectname/index.html
      upload: dist/projectname/index.html
      secure: always
    
    # Catch-all rule, responsible from handling Angular application routes (deeplinks).
    - url: /.*
      static_files: dist/projectname/index.html
      upload: dist/projectname/index.html
      secure: always
    
    skip_files:
    - ^(?!dist)

当我将cloudbuild.yaml更新到下面时，我得到下面的错误

steps:

- name: "gcr.io/cloud-builders/npm:node-12.18.3"
  entrypoint: npm
  args: ['install']

- name: gcr.io/cloud-builders/npm
  args: [run, build, --prod]

- name: gcr.io/cloud-builders/gcloud
  args: [ app, deploy, --version=$SHORT_SHA ]


ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (83)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.12.0

那会有帮助吗

//摘录app-routing.module.ts
@NGD模块({
进口：[
RouterModule.forRoot（路由、{
乌塞哈什：没错，
}),
],
导出：[路由模块]，
})

使用以下命令不会引发错误，甚至不会引发生成错误

  args: ["build", "--prod"]

更换以下任何一项工作

  args: ["run", "build", "--prod"]

或

我的最终cloudbuild.yaml

steps:

- name: gcr.io/cloud-builders/npm
  args: [ install ]

- name: gcr.io/cloud-builders/npm
  args: [ run, build, --prod]

- name: gcr.io/cloud-builders/gcloud
  args: [ app, deploy, --version=$SHORT_SHA ]
  

app.yaml

runtime: python27
threadsafe: yes
api_version: 1

# Google App Engine's cache default expiration time is 10 minutes. It's suitable for most Production
# scenarios, but a shorter TTL may be desired for Development and QA, as it allows us to see a fresh
# code in action just a minute after the deployment.
default_expiration: 60s

handlers:

# To enhance security, all http requests are redirected to their equivalent https addresses (secure: always).

# Assets are retrieved directly from their parent folder.
- url: /assets
  static_dir: dist/projectname/assets
  secure: always

# Static files located in the root folder are retrieved directly from there, but their suffixes need to be
# mapped individually in order to avoid them from being hit by the most general (catch-all) rule.
- url: /(.*\.css)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.css)
  secure: always

- url: /(.*\.html)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.html)
  secure: always

- url: /(.*\.ico)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.ico)
  secure: always

- url: /(.*\.js)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.js)
  secure: always

- url: /(.*\.txt)
  static_files: dist/projectname/\1
  upload: dist/projectname/(.*\.txt)
  secure: always

# Site root.
- url: /
  static_files: dist/projectname/index.html
  upload: dist/projectname/index.html
  secure: always

# Catch-all rule, responsible from handling Angular application routes (deeplinks).
- url: /.*
  static_files: dist/projectname/index.html
  upload: dist/projectname/index.html
  secure: always

skip_files:
- ^(?!dist)

runtime: python27
threadsafe: yes
api_version: 1

# Google App Engine's cache default expiration time is 10 minutes. It's suitable for most Production
# scenarios, but a shorter TTL may be desired for Development and QA, as it allows us to see a fresh
# code in action just a minute after the deployment.
default_expiration: 60s

handlers:
    # Static files located in the root folder are retrieved directly from there, but their suffixes need to be
    # mapped individually in order to avoid them from being hit by the most general (catch-all) rule.
    - url: /(.*\.css)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.css)
      secure: always
    
    - url: /(.*\.html)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.html)
      secure: always
    
    - url: /(.*\.ico)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.ico)
      secure: always
    
    - url: /(.*\.js)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.js)
      secure: always
    
    - url: /(.*\.txt)
      static_files: dist/projectname/\1
      upload: dist/projectname/(.*\.txt)
      secure: always
    
    # Site root.
    - url: /
      static_files: dist/projectname/index.html
      upload: dist/projectname/index.html
      secure: always
    
    # Catch-all rule, responsible from handling Angular application routes (deeplinks).
    - url: /.*
      static_files: dist/projectname/index.html
      upload: dist/projectname/index.html
      secure: always
    
    skip_files:
    - ^(?!dist)

我遇到了一些与软件包相关的错误- 我通过更新一个合适的版本修复了这个问题

我面对着这个错误 云生成发生未处理的异常：找不到模块“@angular/compiler cli/src/tooling”

这是由于缓存造成的，因此您应该重新安装/更新模块。

---

如果没有任何效果，尝试创建一个新分支并从那里触发它（点击并试用）。

在运行NPM build命令后，您能否共享Bucket的目录树？我可以回答你，但我需要知道目录树，以提供一个正确的！你是指angular.json文件还是dist文件夹？请看一下编辑区域，如果这是你想要的。好的，但是你的编辑是你的GCS存储或git repo的目录树？这是git repo的目录树。这没有帮助！请您提供一个最小的可复制代码示例作为起点，例如，中的角度项目。这样可以更容易地帮助您。这会将项目部署到工作区/但我无法直接从CAN shell或编辑器访问它，因为它不可见。不确定我们是否可以访问它，或者我们必须更改设置才能访问它。