Categories
Angular GCP

How to Deploy Angular 8 App to Google App Engine

Hi there 👋. My name is Thomas Van Deun and I’m a certified Google Cloud Architect.

What we’ll do

  1. Set up a Google Cloud Repository on GCP 
  2. Scaffold an Angular 8 application 
  3. Integrate Cloud Build CI/CD for this project
  4. Automatically deploy to App Engine 
Architecture for deploying angular 8 to Google App Engine on GCP with CI/CD

What you’ll need

  • Google Cloud Platform account — free tier will do
    • Set up a new project if you’d like
  • Have the Cloud SDK installed (to connect with the repository)
  • Angular CLI tools installed
  • IDEA of your choice

Google Cloud Repository

Log in on the Google Cloud Console

Open the hamburger menu and navigate to Source Repository under Tools. On the next screen, you’ll find the button Add Repository.

Here we will create a new repository. Give it a name and choose the project you want to work within. 

Creating an Angular 8 Application in Cloud Source Repositories

When you are happy with your name, click Create.

Now we need to connect locally with the repository. I’d recommend you to set up using the gcloud SDK, you will need it in a later step. If all goes well, you will have the repo cloned on your local machine.  Step 1 complete 🎉

Scaffold Angular 8 project

Now, open the command line at the root of your cloned repository. Let’s scaffold an Angular project with the following commands. 

ng new angular-on-gcp

This will prompt you through the setup, change or accept default settings.

Navigate to your newly created app and serve it up to see it locally.

cd angular-on-gcp
ng serve --open

Feel free to make more changes in this angular project, but for tutorial purposes, we will leave it like this.

Website running on localhost: 

Running Angular on gcp app with a localhost

More in depth Angular documentation over here.

Cloud Build Trigger

Go back to your GCP console, and look for the tool Cloud Build. Start with enabling this API for your project. You should see this screen next: 

GCP console cloud build tool

Click CREATE TRIGGER

On the next screen, fill in the name and select a repository. The name should represent what this pipeline does. So in this case, I will name it BuildAndDeployAngularApplication. Select the branch you created in step 1. 

You can leave the trigger on the master branch, but you can change this later to whatever fits your need.

Leave the defaults for Build Configuration.

From now, every push we make to master will trigger this pipeline. At the moment, there is no logic defined so nothing will actually happen. Let’s change that in the next step.

Creating a build trigger on gcp

CI / CD Pipeline

Google Cloud Build(ers)

Google Cloud Build makes uses of Cloud Builders. Google provide a few of them out of the box over here.

Unfortunatly, this list does not contain an Angular builder. We will create our own and store it in our project Image Repository, making use of the community managed cloud builders.

Clone this repo to your local machine, build the Angular docker image and verify that it’s now part of your available containers:

git clone https://github.com/GoogleCloudPlatform/cloud-builders-community
cd cloud-builders-community/ng
gcloud builds submit --config cloudbuild.yaml .  
gcloud container images list --filter ng

Now that we have the NG image in our project registry, and we can make use of it in our pipeline.

Cloud Build Options

On the root of your Angular repo, create a new file named cloudbuild.yaml. Use these steps and save the file. Replace projectId with your own projectId. It will now reference the image you created in the step before.

steps:

  # Install node packages
  - name: "gcr.io/cloud-builders/npm:latest"
    args: ["install"]
    dir: "angular-on-gcp"

  # Build production package
  - name: "gcr.io/{projectId}/ng"
    args: ["build", "--prod"]
    dir: "angular-on-gcp"

  # Deploy to google cloud app engine
  - name: "gcr.io/cloud-builders/gcloud"
    args: ["app", "deploy", "--version=prod"]
    dir: "angular-on-gcp"

This file means the following:

  1. In the build environment, install all the NPM dependencies defined in the package.json
  2. Using the Angular Cloud Builder to create a production distribution using the Angular Docker
  3. Use the Gcloud Builder to deploy  this app in the App engine service

Google App Engine 

Now that we have set up our automatic build pipeline, we need to give the builder instructions on how to deploy the Angular application. 

At the source root of your Angular project, create a new file named app.yaml and paste the following contents (rename the file directory if you have a different name for your application) :

runtime: python27
api_version: 1
threadsafe: yes

handlers:
  - url: /(.*\.(gif|png|jpg|css|js)(|\.map))$
    static_files: dist/angular-on-gcp/\1
    upload: dist/angular-on-gcp/(.*)(|\.map)

  - url: /(.*)
    static_files: dist/angular-on-gcp/index.html
    upload: dist/angular-on-gcp/index.html

skip_files:
  - e2e/
  - node_modules/
  - src/
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.json$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$
  - ^LICENSE

Create an App Engine

Enable the App Engine API (App Engine Admin API) on the console and spin up an App Engine by navigating to the App Engine tool in the console.

Enabling the App Engine API on gcp console

Permissions for App Engine Deploy

You will need to give your Cloud Builder service account access to the App Engine. Go to the settings menu of Cloud Build, and enable App Engine Admin

Providing service permissions in App Engine on gcp

The Build History is a good starting point to debug any failures:

GCP Build history

The result 🥂

Now that you have everything set up, Angular 8 should be deployed and running on Google App Engine correctly. When you run your pipeline, it will deploy it to Google App Engine. In the dashboard of App Engine, you will see your deployed instances and the address of your application:

App Engine Dashboard on GCP

Angular on gcp is running

Categories
Platforms

Greater Bank partners with Digizoo to build modern banking platform

Digizoo has been selected to bring its specialist expertise in digital banking platforms by assisting Greater Bank in Newcastle to design and deliver an innovative new banking platform.

The solution is cloud-native on the Google Cloud Platform to take advantage of the most modern and innovative technologies, and improve time to market.

Digizoo are providing technical specialists in all key areas including, Core Banking Integration, Cloud Platform design and build, Open Banking standards, Backbase Customer Experience Platform, Security, Automation with CI/CD, new ways of working in Agile and remote working.

The new platform will allow Greater Bank to quickly adapt and respond to the fast-changing financial environments in the future.

Categories
Platforms

Digizoo forms partnership with Google Cloud

The Google Cloud Platform (GCP) has in recent times made progress that puts it ahead of the other two players AWS and Azure.

GCP provides a more considered and usable feature set that makes many of the mundane scenarios easy without having to revert to extensive scripting to put together many smaller components.

Google Cloud Partner Badge.

For the banking and financial services world, Digizoo has already delivered complete banking platforms in the cloud with regulatory approval from APRA.

We’re excited about building another banking platform to run on GCP where the time to build and operating costs will be reduced even further thanks to the benefits that the GCP offers.