0

I am trying for weeks to deploy and access a sample Angular app in Google App Engine and so far it always has been a failure.

I really doubt that it has to do with the handler configuration of my app.yaml file. I have a bitbucket configuration using which I pack all my files (webpack) in a dist folder, move into that folder and only then I execute the command gcloud app deploy

Here is my pipeline script

image: python:3.5.1


pipelines:

  custom:

   default:

   - step:

       script:
        - curl -sL https://deb.nodesource.com/setup_10.x | bash

        - apt-get install -y nodejs
        - apt-get install -y build-essential
        - npm install -g @angular/cli@latest
        - npm install

          #setting the base href to see if it works when deployed
        - ng build --prod --aot 
        # by default AOT compiler is taken

        - cp app.yaml dist



        - curl -o /tmp/google-cloud-sdk.tar.gz https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-200.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 auth activate-service-account --key-file gcloud-api-key.json

        - echo $GCLOUD_API_KEYFILE > /tmp/client-secret.json
        #setting it before updating the config
        - gcloud config set project $GCLOUD_PROJECT
        - gcloud config set gcloudignore/enabled false
        - gcloud app deploy app.yaml --verbosity=info

Here is my app.yaml file

runtime: python27
api_version: 1
env: standard
threadsafe: true

service: sampleapp

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: /\1
   upload:/.*

 # 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:/\1
   upload:/.*

  # 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:/index.html
   upload:/index.html
   http_headers:
   Strict-Transport-Security: max-age=31536000; 
    includeSubDomains
   X-Frame-Options: DENY

I believe there might be a mistake in setting the handlers section. So can you please let me know if my handlers section is correct?

EDIT

When I deploy the application , it gets deployed successfully and I am able to see the js files, the /static folder and the index.html files when I debug the version in GAE.

However, I always get either a 404 NOT FOUND error when I try to access the URL or none of the js files (bundle.#hashnumber.bundle.js, main.#hashnumber.bundle.js, vendor.#hasnnumber.bundle.js) are getting downloaded.

I also tried running the devserver in local:

dev_appserver.py app.yaml --port 8081 
INFO    2018-06-15 05:28:52,963 devappserver2.py:120] Skipping SDK update check. 
INFO    2018-06-15 05:28:53,214 admin_server.py:152] Starting admin server at: localhost:8000 
INFO    2018-06-15 05:28:53,458 devappserver2.py:215] No default module found. Ignoring. New instance for module "testapp" serving on: localhost:8081 
INFO    2018-06-15 05:28:54,711 module.py:846] testapp: "GET /_ah/start HTTP/1.1" 404 -

I went through their documentation but never fully understood how to implement a handler for /_ah/start to return nothing

Rodrigo C.
  • 1,114
  • 7
  • 13
vijayakumarpsg587
  • 1,079
  • 3
  • 22
  • 39
  • 1
    Your indentation is messed up in app.yaml. Each `- url` should start on the first character of the line. – new name Jun 13 '18 at 13:11
  • You should probably include the log produced by `gcloud app deploy` as well – Dan Cornilescu Jun 13 '18 at 14:57
  • @DanCornilescu - the thing is that Dan when I deploy it , it gets deployed successfully and I am able to see all the js/static folder/and index.html in that server when I debug the version in GAE, but I always get either a 404 NOT FOUND error when I try to access the URL or none of the js files (bundle.#hashnumber.bundle.js, main.#hashnumber.bundle.js, vendor.#hasnnumber.bundle.js) are getting downloaded – vijayakumarpsg587 Jun 14 '18 at 07:32
  • @JeffO'Neill - I have messed up the indentation here but not in the actual file . I have edited the indentation now :) – vijayakumarpsg587 Jun 14 '18 at 07:36
  • @Joey587 - please edit your post and place the details in it - they're really hard to read as comments. Yes, exact requested paths and their results are good details - maybe even the corresponding app logs. – Dan Cornilescu Jun 14 '18 at 11:33
  • I'd also try to run the local devserver on the built app dir, just to clearly identify if you're looking at an app building problem or at a deployment issue. – Dan Cornilescu Jun 14 '18 at 11:48
  • @DanCornilescu I tried running the devserver in local and this is what dev_appserver.py app.yaml --port 8081 INFO 2018-06-15 05:28:52,963 devappserver2.py:120] Skipping SDK update check. admin_server.py:152] Starting admin server at: http://localhost:8000 devappserver2.py:215] No default module found. Ignoring. New instance for module "testapp" serving on: http://localhost:8081 INFO 2018-06-15 05:28:54,711 module.py:846] testapp: "GET /_ah/start HTTP/1.1" 404 - – vijayakumarpsg587 Jun 15 '18 at 05:30
  • @DanCornilescu- went through their documentation but never fully understood how to implement a handler for /_ah/start to return nothing – vijayakumarpsg587 Jun 15 '18 at 05:42
  • Please edit your question and put your updates in there, properly formatting, it's rather hard reading them as comments. – Dan Cornilescu Jun 15 '18 at 12:58
  • Donno if related to the problem, but you should drop the `service: sampleapp` from your `app.yaml` to at least narrow the suspect list - see https://stackoverflow.com/questions/44178971/what-purpose-does-the-default-service-serve-in-googles-app-engine?noredirect=1&lq=1 – Dan Cornilescu Jun 15 '18 at 13:02
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173216/discussion-between-dan-cornilescu-and-joey587). – Dan Cornilescu Jun 15 '18 at 13:02

1 Answers1

1

Finally, I was able to fix this issue. I really thank @DanCornilescu for all the help he offered. The issue was with the static_dir in my handlers section and he pointed that out. And additionally I have added application_readable property as true just to make sure that the app is able to read the js & css files without a 500 issue . Please refer this link for full details

https://groups.google.com/forum/#!topic/angular5-app-engine-deployment/Ze22IJ6eJeg

I have also fixed the issue with glypicons. In the handlers section please add this

- url: /(.+\.(gif|png|jpg|js|css|json|woff2|svg|ttf|eot|woff))$ static_files: \1 upload: .+\.(gif|png|jpg|js|css|json|woff2|svg|ttf|eot|woff)$ application_readable: true

Rubén C.
  • 1,098
  • 6
  • 16
vijayakumarpsg587
  • 1,079
  • 3
  • 22
  • 39