访问GAE部署的Angular应用 [英] Accessing GAE deployed Angular app

问题描述

最近，我成功地尝试使用bitbucket管道将我的角度应用程序代码部署到GAE flex环境.尽管当我尝试从GAE访问该推送成功时，它却引发了这样的404错误

I recently was successful in my attempts in deploying my angular app code using bitbucket pipeline to GAE flex environment. Though the push was successful when I tried to access it from GAE, it throws me a 404 error like this

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

这是我的app.yaml文件

This is my app.yaml file

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管道

This is my bitbucket pipeline

 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日志显示的内容，我从中找不到任何有意义的内容

This is what GAE logs show and I cannot find anything meaningful from it

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"  
}

你们能帮我吗?

推荐答案

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

Few things changed with the latest version of Angular CLI. If you are using CLI version > 6 use the following yaml, this yaml makes sure the handlers for js and css files are correct (removing the .bundle and adds runtime)

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)，并将gcloud应用的"outputpath"设置为"dist"而不是"dist/your-app-name"部署以正确捡起东西.

On top this, you should also edit your angular.json (which used to be angular-cli.json) and set "outputpath" to just "dist" rather than "dist/your-app-name" for gcloud app deploy to pick things up correctly.

这篇关于访问GAE部署的Angular应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！