Continuous Deployment of Angular App on Google App Engine with Git

In today’s world of automation, wouldn’t it be fun to have an integration where our changes in git repo is automatically being deployed to Google App Engine ( GAE ).

In this article, I’ll focus on integrating Angular app (in a github project) with a GCP project. At the end of this article, you should be able to see pushed code being deployed on GAE automatically.

To start with, I will be using my already created git project . You can fork your own version or can get a clone to look at using below command:

git clone https://github.com/shashankvivek/user-dashboard-app.git

Next you need to create your own project in Google cloud. Enabling GAE for a project can be found on internet, hence I’ll consider this as “out of scope” for this article.

Here are the steps:

1. Login to your GCP project using a browser.

2. Open a new tab and go to GitHub App for Google Cloud Build and click on Install. After providing your Git Credential, you’ll have to select the repository for which you want to configure auto-build triggers. After installing , you’ll also have to select the GCP project.

3. Once done, you’ll be redirected to Google Cloud Build to select the Project, Repository and Trigger. Keep the trigger setting as it is.

4. Enable the App Engine Admin API in your project.

5. Get the Project number from IAM & Admin > Setting page.

6. Go to IAM & Admin > IAM page, and add a new member as mentioned below:

• Member: <project-number>@cloudbuild.gserviceaccount.com
• App Engine Deployer - To deploy an app in the project.
• App Engine Service Admin - To promote and scale a new version being deployed.
• Storage Object Admin - To allow the project to write app files to Google Storage as a part of deployment process.
• Cloud Build Service Account - To trigger builds of new versions as soon as it has been deployed.

7. Once the GCP Project is all setup, we need to add 2 files in our angular project to make it work.

• app.yaml : Needed by GAE for deploying the user-dashboard-app.
• cloudbuild.yaml : Needed by Google Cloud Build for build steps.

As soon as you push these changes on git repo, you’ll see that a build is triggered in Cloud Build that the build will fail after few seconds. If you click on it, you can see from the logs that we first need to create an app in GAE

Build error because of missing app

To fix that go to Cloud shell and use below command and selecting a region.

gcloud app create

Cloud Shell

Once the app is created, go ahead and click “Retry” in Cloud build

8. Go to App Engine > Dashboard and launch your application.

You can see that the changes are automatically being deployed on the App Engine as soon as it is pushed to git and build in Cloud Build.

Feel Free to 👏 clap 👏 and encourage me 😄 to write more articles like these !