CODEWITHSUNDEEP
angulardockergoogle-app-engine
ahanf
ahanf

Reputation: 59

Angular 8 to GAE

I am struggling with deploying my web application to the App Engine. I don't have a lot of knowledge about node.js / Javascript / web stuff in general, I just built something simple using Angular. Any advice or pointers towards good tutorials / articles are greatly appreciated, it's probably something totally obvious that I'm missing here.

The project runs fine locally when I run ng serve --open, but I'm struggling to deploy this to the App Engine. Things I've tried:

1) App Engine Flexible Runtime using Docker

Steps: Authenticate and then gcloud app deploy frontend.yaml. My frontend.yaml file:

runtime: custom
env: flex

service: frontend

manual_scaling:
  instances: 1

resources:
  cpu: 1
  memory_gb: 4
  disk_size_gb: 10

My Dockerfile:

FROM node:10-alpine
WORKDIR /usr/src/app
COPY ./ .
RUN npm config set unsafe-perm true
RUN npm install -g @angular/cli .
ENV PATH="${PATH}:/usr/src/app"
ENV STAGE="int"
EXPOSE 8080
ENTRYPOINT ["ng serve"]

What happens: basically nothing, the Docker container is successfully built but is not deployed

Updating service [frontend] (this may take several minutes)...failed.
ERROR: (gcloud.app.deploy) Error Response: [4] Your deployment has failed to become healthy in the allotted time and therefore was rolled back. If you believe this was an error, try adjusting the 'app_start_timeout_sec' setting in the 'readiness_check' section.

I'm note sure why this does not work, can you only set up a web server using ng serve locally?

2) Using ng build and resulting dist Folder

From this example here: Deploy Angular 2/4/6 App on Google App Engine

When I start the gcloud interactive shell using gcloud beta interactive I get the following: gsutil rsync -r gs://angular-app-bucket ./angular-app-gcp /usr/bin/bash: line 248: gsutil: command not found

3) Installing additional tooling

See for example this discussion: How to Deploy Angular 7 Project to Google Cloud Unfortunately not possible for me.

Thanks a lot for all comments and suggestions!

Upvotes: 1

Views: 1056

Answers (3)

Islam ElKassas
Islam ElKassas

Reputation: 126

Referring to @Codo Reply

This code is working for me, especially to redirect all pages to index.html to avoid 404 not found

Angular 11 - App Engine

app.yaml

runtime: python27
api_version: 1
threadsafe: yes

handlers:
  - url: /(.*\.[A-Za-z0-9]{1,4})$
    static_files: dist/app/\1
    upload: dist/app/(.*\.[A-Za-z0-9]{1,4})$
  - url: /(.*)$
    static_files: dist/app/index.html
    upload: dist/app/index.html

skip_files:
- ^(?!dist)

Upvotes: 0

Codo
Codo

Reputation: 78815

I'm somewhat surprised about your setup. What's the purpose of your Docker image? I don't see any link to GAE.

And ng serve is not suitable for production environment. In fact, a productive Angular app consists of static files and can be served from almost any web server. (ng serve is more sophisticated in order to support efficient software development.)

Go with a simple setup:

  • Run ng build --prod to build the productive version of your app (in the directory dist).
  • Deploy to GAE: gcloud app deploy app.yaml

The below app.yml is all that's required. It assumes your app is called app. It mainly takes care of rewriting all URLS to index.html. It uses the Python runtime as it is small, configurable and sufficient for serving the Angular app.

runtime: python27
api_version: 1
threadsafe: yes
instance_class: f1

handlers:
  - url: /(.*\.[A-Za-z0-9]{1,4})$
    static_files: dist/app/\1
    upload: dist/app/(.*\.[A-Za-z0-9]{1,4})$
  - url: /(.*)$
    static_files: dist/app/index.html
    upload: dist/app/index.html

Upvotes: 3

Christopher Rodriguez Conde
Christopher Rodriguez Conde

Reputation: 899

Updating service [frontend] (this may take several minutes)...failed.ERROR: (gcloud.app.deploy) Error Response: [4] Your deployment has failed to become healthy in the allotted time and therefore was rolled back. If you believe this was an error, try adjusting the 'app_start_timeout_sec' setting in the 'readiness_check' section.

What happens: basically nothing, the Docker container is successfully built but is not deployed

This is usually caused either when the current application you are trying to deploy is still reading/using the legacy health check or in this case, it might be related to deploying the app using gcloud app deploy without enabling the updated health check first.

By default, HTTP request from updated health checks are not forwarded to your application container. That might explained why your Docker container is successfully building the app but not deploying it as seen in the error above.

You could enable updated health checks using:

gcloud beta app update --split-health-checks --project [your-project-id].

Here you will find more information regarding updated health checks.

If this does not work, you could try to add readiness checks and/or liveness checks as seen here.

  • On the one hand, liveness checks confirm that the VM and the Docker container are running. Instances that are deemed unhealthy are restarted.
  • On the other hand, readiness checks confirm your instance is ready to accept incoming requests. Instances that fail the readiness check are not added to the pool of available instances.

Finally, as far as the options, I highly recommend to try with the first one and try to deploy the application using Google App Engine flexible, applying all the mentioned above.

I hope this helps.

Upvotes: 1

Related Questions