Deploying an Angular App Using Google Cloud Run

In this guide, we learn Learn how to create, Dockerize, and deploy your containerized Angular application using Google Cloud Run.

There are some prerequisites like Angular, Node js, Docker, and the basics of GCP.

1. Create an Angular Application

To get started, use the Angular CLI to generate a new Angular app:

ng new yourprojectname

Replace yourprojectname with Project_Name

Once the CLI has generated all the necessary files for your Angular app, you can test it out by executing these commands.

ng s

Go to your LocalHost of system mine is http://localhost:4200

This is my Ecommerce Platform

2. Create a Google Cloud Project

Now We have to make a project in Google Cloud Platform, And then Navigate to Cloud Run

Cloud Run is a managed compute platform that enables you to run stateless containers that are invocable via HTTP requests. Cloud Run is serverless; it removes the need for infrastructure management, so you can focus on what matters most — building great apps.

Now we have to Configure Cloud Run means we have to give the project name Zone for deployment.

3.Dockerize Application

You can do so by creating a Dockerfile in your project directory with the config below.

FROM node:12-slim
WORKDIR /usr/src/appCOPY 
package*.json ./
RUN npm install -g @angular/cliRUN
npm installCOPY . ./RUN 
npm run build
EXPOSE 4200
CMD [ "node", "server.js" ]

This Dockerfile permits us to install the Angular CLI, along with all our project’s dependencies in a node-based docker container.

Now we have to make two static files ExpressJS and Server.js contained in our dist folder using a service.

Write the following code in Server.js

var express = require(‘express’);
var app = express();
app.use(express.static(‘dist/PROJECT-NAME’));
app.get(‘/’, function (req, res,next) {
res.redirect(‘/’);
});
app.listen(4200)

Test your container by building an image

docker build -t yourprojectname
docker run -p 4200:4200 yourprojectname

Navigate to http://localhost:4200 to see your Angular app

4.Deploy App on GCP

Now we have to run Commands on Cloud Shell

gcloud builds submit --tag gcr.io/PROJECT-ID/service name

Replace PROJECT-ID with your Project Name which you have given, and Service name by Google Cloud Run service name.

gcloud run deploy --image gcr.io/PROJECT-ID/PROJECT-NAME --platform managed

Once your image is deployed, you will get a link to your live Angular app in Cloud Shell.

Stay tuned till the next blog

If you Want to Connect with Me:

Linkedin: https://www.linkedin.com/in/mayank-chourasia-38421a134/

Twitter: https://twitter.com/ChourasiaMayank.

Google Cloud GoogleCloud Platform Google Developers Angular Central Node.js