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

deploy-angular-on-google-app-engine---feature-image

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:

deploy-angular-on-google-app-engine---deploy-gcloud

deploy-angular-on-google-app-engine---done-v1

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:

deploy-angular-on-google-app-engine---create-google-app-engine

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

deploy-angular-on-google-app-engine---storage-search

deploy-angular-on-google-app-engine---create-a-bucket

deploy-angular-on-google-app-engine---create-a-bucket-overview

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

deploy-angular-on-google-app-engine---build-angular-app

-> Results:

deploy-angular-on-google-app-engine---build-result

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.

deploy-angular-on-google-app-engine---upload-file-to-gcp

Deployment

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

deploy-angular-on-google-app-engine---active-cloud-shell

deploy-angular-on-google-app-engine---google-cloud-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:

deploy-angular-on-google-app-engine---done-v1

Sourcecode

AngularDynamicRoutes

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

  1. Hello, admin.

    Interesting website, really!
    But “Search” function on it doesnt work. Sad.

    P.S. Where I can get XEvil4.0 for free?
    It’s best captcha solver, included Google ReCaptcha.
    Need it for white SEO. Thanks.

    1. Hi WilliamTef,

      Please capture your screen when you use the search function, we’ll check its problem 🙂

      It works well on my PC.

      Regards,
      ozenero.

  2. When someone writes an paragraph he/she retains the idea of a user in his/her
    brain that how a user can understand it. So that’s why this paragraph is outstdanding.
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *