Deploying Angular App to GCP

This article provide steps that to deploy an Angular App to Google GCP AppEngine.
I will be deploying a frontend Angular App (Angular Word Combiner) with does not need any backend.
Bellow is the screenshot of the Application that we would be deploying.

Google offers 2 options to deploy your application on GCP
  1. Google App Engine
  2. Google Compute Engine
Here I will be using Google App Engine to deploy the Word-Combiner App. App Engine is the Googles managed platform to deploy application. App Engine comes in two flavors Standard and Custom. I will  be using App Engine Standard.

First get the Word Combiner APP from git repo to local disk.

git clone https://github.com/siddharthagit/angular-word-merger.git
Now we need to create a config file that will be used by Google Cloud App Engine to deploy the project. Now go to the directory and add the app.yaml file. The name of the file needs to be app.yaml 
touch app.yaml
and paste the following content.

# [START runtime]
runtime: nodejs8
handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html
- url: /
  static_dir: dist
# [END runtime]
Now we need to build the Angular app so that it generates the production artifacts that would be deployed to App Engine
ng build --prod
Go to the Google Cloud Console and login with your Google account. Create a new project for your angular app deployment e.g. angular-word-merger
Second step, is to install the Google Cloud SDK. Follow the steps at https://cloud.google.com/sdk/ so that we can deploy our application via command line. For Mac following the instructions in https://cloud.google.com/sdk/docs/quickstart-macos to download the SDK locally.
gcloud app deploy










Now if you goto https://angular-word-merger.appspot.com it should load the Angular App from GCP.


No comments :

Post a Comment

Please leave your message queries or suggetions.