How to Deploy Angular 4/6/7 Application on Google App Engine – Google Cloud Platform

Google App Engine is a web framework and cloud computing platform. App Engine enables developers to stay more productive and agile. So in the tutorial, we show you how to deploy Angular 4/6/7 Application on Google App Engine – Google Cloud Platform.

Related posts:
– Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Technologies

– Google Cloud Platform
– Angular

Goal

– We deploy Angular Application on Google App Engine:

Practice

Create Google App Engine & Storage

– Use your Google account -> Go to the Google Cloud Console then Login with your Google account. Create a Google App Engine gcp-angular-app:

– On Search box, search Storage, and create a bucket-angular-app bucket.

Now the cloud is almost setup

Build Angular Application

* Get the sourcecode here!

Build Angular application with production mode:

ng build --prod --output-path angularapp

-> Results:

Create Config file

We create a config file app.yaml that will be used by Google Cloud App Engine to deploy the project:

runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /
  static_files: angularapp/index.html
  upload: angularapp/index.html
- url: /
  static_dir: angularapp

Upload Angular build & Config files

– Go to the bucket bucket-angular-app, then select the Upload Files & Upload Folder to upload
app.yaml & build angularapp folder to the cloud bucket.

Deployment

– Open the in-browser terminal window Google Cloud Interactive Shell.

– Create a folder: ozenero-angular-app by mkdir cmd.
– Sync the data from the bucket bucket-angular-app into this directory ozenero-angular-app by cmd:

$gsutil rsync -r gs://bucket-angular-app ./ozenero-angular-app

-> Details:

javasampleapproach@cloudshell:~ (gcp-angular-app)$ gsutil rsync -r gs://bucket-angular-app ./ozenero-angular-app
Building synchronization state...
Starting synchronization...
Copying gs://bucket-angular-app/angularapp/3rdpartylicenses.txt...
Copying gs://bucket-angular-app/angularapp/favicon.ico...
Copying gs://bucket-angular-app/angularapp/index.html...
Copying gs://bucket-angular-app/angularapp/main.5ff5b18e98ffe2324713.js...
- [4 files][273.5 KiB/273.5 KiB]
==> NOTE: You are performing a sequence of gsutil operations that may
run significantly faster if you instead use gsutil -m -o ... Please
see the -m section under "gsutil help options" for further information
about when gsutil -m can be advantageous.
Copying gs://bucket-angular-app/angularapp/polyfills.2f4a59095805af02bd79.js...
Copying gs://bucket-angular-app/angularapp/runtime.a66f828dca56eeb90e02.js...
Copying gs://bucket-angular-app/angularapp/styles.34c57ab7888ec1573f9c.css...
Copying gs://bucket-angular-app/app.yaml...
/ [8 files][332.9 KiB/332.9 KiB]
Operation completed over 8 objects/332.9 KiB.

– Deploy the angular application using the following command:

$gcloud app deploy

-> Details:

javasampleapproach@cloudshell:~/ozenero-angular-app (gcp-angular-app)$ gcloud app deploy

...

s-east1      (supports standard and flexible)
 [12] us-east4      (supports standard and flexible)
 [13] us-west2      (supports standard and flexible)
 [14] cancel
Please enter your numeric choice:  11
Creating App Engine application in project [gcp-angular-app] and region [us-east1]....done.
Services to deploy:
descriptor:      [/home/javasampleapproach/ozenero-angular-app/app.yaml]
source:          [/home/javasampleapproach/ozenero-angular-app]
target project:  [gcp-angular-app]
target service:  [default]
target version:  [20181220t231434]
target url:      [https://gcp-angular-app.appspot.com]
Do you want to continue (Y/n)?  y
Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 8 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://gcp-angular-app.appspot.com]
You can stream logs from the command line by running:
  $ gcloud app logs tail -s default
To view your application in the web browser run:
  $ gcloud app browse

-> Now go to link: https://gcp-angular-app.appspot.com. Result:

Sourcecode

AngularDynamicRoutes