Angular 7 with Google Cloud (Build, App Engine)
Ever wanted a clean CI/CD with a lot of google on it? You like Angular and Google Cloud? Read this!
Angular is unquestionable one of the big players in Enterprise Development nowadays. As well as Angular is from Google, the same company also offers one of the big players in Cloud terminology “Google Cloud” next to Amazon AWS or Microsoft Azure. In this little story we will take a look at a minimal setup that uses Angular 7 as a frontend application, GitHub as Source Code Management, Google Cloud Build for CI and Google Cloud App Engine as Runtime Platform.
The costs
It has to be said that under some circumstances this setup may not be free of charge. At https://cloud.google.com/free/docs/frequently-asked-questions you can find instructions and conditions about how you can run as good as for free in nearly all scenarios (speaking of little test environments).
The beginning
We will first create a new angular project. As this process varies I will not take a closer look here (“ng new”…). In the second step we will publish the project on GitHub (It doesn’t matter if you choose a private or a public repository). On GitHub Apps you have to install Google Cloud Build now, because it needs access to your repositories.
You also have to create a Google Cloud Project for your new application and enable Cloud Build and Cloud App Engine.
Build Configuration
You may configure your Build as the following cloudbuild.yaml:
The first step is installing all dependencies using npm install . Then we have to build the angular application using npm run build --prod (equals: ng build --prod ). The last step is to deploy the app the Google Cloud App Engine using gcloud app deploy --version=prod .
You can also do this manually local for testing reasons. Remember to install the google cloud SDK before.
App Configuration
For proper deployment you have to configure your build as the following app.yaml:
Remember to add your API Key (APIs and Services > Credentials). You should also enter your API key and adjust your handlers urls to your local deployment path (I changed these from the default “dist/<app-name>” to “dist” in the angular.json).
Google Cloud Configuration
You have to ensure that the google cloud build service can access the app engine. At the IAM Management in your Google Cloud Console you can add the cloud build service (***@cloudbuild.gserviceaccount.com) to the corresponding app engine roles.
If you don’t do this your cloud build may fail with some permission denied exception.
The Middle
Congrats! You’re now ready. As soon as you push a new commit, Google Cloud build will build your application and deploy it to the app engine. If you don’t want to replace the current app you may append a --no-promote in the deployment command.
You may also consider replicating your GitHub project into Google Cloud Source Repositories.
After Deployment the different Versions of your application can be served at https://<project-name>.appspot.com. Further links for staging / version dependent environments are listen in your Google App Engine Console.
The End
While some steps are left out for simplicity reasons this article should give you a quick overview of the software stack “Angular + Google Cloud”. There are still many more services and functions you can use and maybe I will present some later.
Until then. Have fun!
