访问 GAE 部署的 Angular 应用程序

Question

我最近成功地尝试使用 bitbucket 管道将我的 Angular 应用程序代码部署到 GAE flex 环境。虽然当我尝试从 GAE 访问它时推送成功，但它会抛出这样的 404 错误

错误：未找到 在此服务器上找不到请求的 URL /。

这是我的 app.yaml 文件

runtime: python27
api_version: 1
threadsafe: true



handlers:
# Routing for bundles to serve directly
- url: /((?:inline|main|polyfills|styles|vendor)\.[a-z0-9]+\.bundle\.js)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

  # Routing for a prod styles.bundle.css to serve directly
  - url: /(styles\.[a-z0-9]+\.bundle\.css)
    secure: always
    redirect_http_response_code: 301
    static_files: dist/\1
    upload: dist/.*

    # Routing for typedoc, assets and favicon.ico to serve directly
    - url: /((?:assets|docs)/.*|favicon\.ico)
     secure: always
     redirect_http_response_code: 301
     static_files: dist/\1
     upload: dist/.*


     # Any other requests are routed to index.html for angular to 
     handle so we don't need hash URLs
     - url: /.*
       secure: always
       redirect_http_response_code: 301
       static_files: dist/index.html
       upload: dist/index\.html

这是我的 bitbucket 管道

 image: node:9.11.1
  pipelines:

  custom:

   default:

     - step:

       script: 

         -  npm install -g @angular/cli@latest

         - ng build --prod
         - cp app.yaml dist
         - ls dist
         - cd dist

         - 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
         - echo $GCLOUD_API_KEYFILE | base64 --decode --ignore-garbage > ./gcloud-api-key.json
         - gcloud config set project $GCLOUD_PROJECT

         - gcloud components install app-engine-java

         - gcloud auth activate-service-account --key-file gcloud-api-key.json

         - echo $GCLOUD_API_KEYFILE > /tmp/client-secret.json  

         - gcloud config set project $GCLOUD_PROJECT
         - gcloud app update --split-health-checks --project adtecy-ui 

         - gcloud app deploy app.yaml

这是 GAE 日志显示的内容，我无法从中找到任何有意义的内容

168.94.245.21 - - [15/May/2018:13:15:13 +0530] "GET / HTTP/1.1" 404 - - 
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36" "adtecy- 
ui.appspot.com" ms=NaN cpu_ms=0 cpm_usd=0 loading_request=0 instance=- 
app_engine_release=1.9.54 trace_id=85d126d7cbeea49449c4c095011e00eb
Expand all | Collapse all {
httpRequest: {…}  
insertId:  "5afa900a00001b8c0b7302c3"  
labels: {…}  
logName:  "projects/adtecy- 
 ui/logs/appengine.googleapis.com%2Frequest_log"  
operation: {…}  
protoPayload: {…}  
receiveTimestamp:  "2018-05-15T07:45:14.007655496Z"  
resource: {…}  
severity:  "WARNING"  
timestamp:  "2018-05-15T07:45:13.999645Z"  
trace:  "85d126d7cbeea49449c4c095011e00eb"  
}

你们能帮帮我吗？

Answer 1

最新版本的 Angular CLI 几乎没有改变。如果您使用 CLI 版本 > 6，请使用以下 yaml，此 yaml 可确保 js 和 css 文件的处理程序正确（删除 .bundle 并添加运行时）

runtime: python27
api_version: 1
threadsafe: true

skip_files:
- ^(?!dist)  # Skip any files not in the dist folder

handlers:
# Routing for bundles to serve directly
- url: /((?:inline|main|polyfills|styles|runtime|vendor)\.[a-z0-9]+\.js)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Routing for a prod styles.bundle.css to serve directly
- url: /(styles\.[a-z0-9]+\.css)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Routing for typedoc, assets and favicon.ico to serve directly
- url: /((?:assets|docs)/.*|favicon\.ico)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Any other requests are routed to index.html for angular to handle so we don't need hash URLs
- url: /.*
  secure: always
  redirect_http_response_code: 301
  static_files: dist/index.html
  upload: dist/index\.html
  http_headers:
    Strict-Transport-Security: max-age=31536000; includeSubDomains
    X-Frame-Options: DENY

除此之外，您还应该编辑您的 angular.json（以前是 angular-cli.json）并将“输出路径”设置为“dist”而不是 gcloud 应用程序的“dist/your-app-name”部署以正确拾取。