Deploy an Angular Application
Google Cloud Run is an excellence platform to run your application server-less. It comes with auto scaling feature at very low cost. The free-tier is pretty generous too. The best thing about Cloud Run is that it is a containerized platform. I have many container images and all of them could be deployed directly without the need of changing the code or any configuration.
Angular is another platform developed by a team at Google. It is an open-source and super powerful tool to create any modern website. No matter what website we are building or which tool we use, at the end of the day we still need a place to host/run it. Angular and Cloud Run is a great combination to create and run any website. In this topic, we will see how we could deploy our Angular application on Cloud Run in less than 5 minutes.
First, assuming we already have our Angular application built. The build should be stored in the folder ‘/dist/application-name’ by default. During the development, we may be using the ‘ng serve’ command to simulate the server. We cannot do that for our Cloud Run. Fortunately, with so many tools out there, creating a simple webserver is just the matter of cut & paste. In this topic we will pick NodeJS and express to create the webserver. **Note: if you do not have them yet setup in your GCP Cloud Shell, you can follow the quick steps here to install.
We create an index.js file as below. Notice the folder ‘dist/APPLICATION-NAME’, it should be the name of our application as above. For the port, it could be anything we will do the port mapping later anyway. For now, we just pick 4200.
We can test our server by executing the command below:
#node index.js
Now we are ready to build our container. To do that, we will need a Dockerfile. It is a very simple one too.
What it does is to tell the Docker to:
- Use image from NodeJS – version 17- minimal version
- Install the Angular CLI
- Expose the port 4200 as in our index.js file
- Run “node index.js” command
Our folder structure should look like this now. Most of the files are auto generated.
Let’s build our container with the command below (don’t forget to replace the PROJECT-NAME and YOUR-APPLICATION accordingly)
#gcloud builds submit --tag gcr.io/PROJECT-NAME/YOUR-APPLICATION
This command will build the container image and put on the Google Container Registry. **Note: if you already have the image, you can skip all the above steps and upload the image directly in the registry.
Now we can deploy our Cloud Run. Normally I would prefer to use the Console because it is only a few clicks. But we could use the command below in CLI to deploy as well. There will be a few questions ask about region and whether we allow access without authentication. Just pick accordingly to the requirement. The key thing here is the port 4200 must be the same as the one exposed in our container.
#gcloud run deploy --image gcr.io/PROJECT-NAME/YOUR-APPLICATION --port 4200
That’s it. Our 5 minutes is up and we have our Angular application deployed. The URL to the application should be ready in the Cloud Run detail view just click on it to open.
Also Read: Powering server-side rendering by offloading static assets to CDN for Angular apps
Conclusion
I hope the topic not only show you how easy to deploy the Angular application but also give you some idea of how the Cloud Run deployment work. Similar work with other frameworks like React, Vue etc.
