Accessing GAE deployed Angular app

Question

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

Error: Not Found The requested URL / was not found on this server.

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

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

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

Could you guys help me out?

Mcknight

First thing: why are you using Python runtime (at the top of your app.yaml file) for an Angular app? The second thing is that you have wrong indentation in your app.yaml which was corrected in Venkata's answer. – Chaker

@AniaRudzińska I corrected the indentation problem that I had. But I was unsure of what runtime to use and hence went with python. Can you suggest me what runtime to use? I have also changed the image docker in pipeline from nodejs to python (installed the npm from debian ) but that failed as well :( – Mcknight

@AniaRudzińska Do you think that my handlers section of app.yaml also has issues. I navigate to the dist folder and then try to push the code using gcloud app deploy so I find that using dist in the handlers section is of no use. Also I removed the / in the handlers - static_files and upload attributes and still no success. Can you provide suggestions? – Mcknight

Answer 1

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

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.

Feeler

by "outputPath" you mean the "outDir" in angular.json/angular-cli.json , correct? – Mcknight

I tried deploying but it is giving me the same error :( – Mcknight

Do you see issues with handlers. It seems with whatever method I try I cannot get it working :( – Mcknight