In this documentation, we’ll be deploying our application frontend code which is in our GitHub repository using two services of GCP (Google Cloud Platform), first is Google Cloud Run and then further we will be configuring a trigger using Google Cloud Build service so that whenever a code is pushed in the repository in the branch defined with trigger it will automatically update the application running on the internet.

Google Cloud Run 

Google Cloud Run is a serverless computing platform powered by Google Cloud Platform (GCP) that allows developers to easily deploy and manage containerized applications without the need to manage servers or infrastructure. With Cloud Run, developers can package applications in Docker containers, deploy quickly, and automatically measure as they’re delivered. Key features of Google Cloud Run include auto-scaling, pay-as-you-go pricing, and support for popular programming languages and frameworks. Designed for microservices-based architectures, this software allows developers to easily build and run applications by focusing on writing code rather than managing processes. Google Cloud Run simplifies the deployment and scaling of containerized applications, making it simple and efficient for a variety of applications.

Google Cloud Build

Google Cloud Build is a continuous integration/continuous deployment (CI/CD) service provided by Google Cloud Platform (GCP). It automates and simplifies the software development process by allowing developers to create, test, and distribute their code consistently. Cloud Build; It is designed to work seamlessly with popular version control systems such as Git, GitHub, and Bitbucket, and supports multiple programming languages ​​and development tools. Key features include build pipelines, autoscaling for faster execution, and integration with other GCP services such as Kubernetes Engine and App Engine. Cloud Build’s development team improves performance, improves code quality, and accelerates the delivery of software applications, making a valuable contribution to everyday software development.

Steps to implement:

1. Create a GitHub repository:

Create a Git repository and push your code for the frontend of your application there.

2. Now go to GCP console by visiting https://cloud.google.com and log in into your account and select the project where you need to deploy the application.

3. Now type Cloud Run in the search box of your GCP console and click on it. It will open the cloud run service window.

4. The Cloud Run console will look like this:

5. Now click on CREATE SERVICE. This will open the service configuration window for Cloud Run.

1. Now click on TEST WITH A SAMPLE CONTAINER option for the first time so that it will automatically select the hello image which is default provided by the cloud run to test the service. After that Give a suitable Service Name for your deployment and select the region in which you want to deploy your Cloud Run deployment.

2. Select the CPU is only allocated during request processing in the CPU allocation and pricing section.

3. Under the free tier of GCP First 180,000 vCPU-seconds/month, First 360,000 GiB-seconds/month and 2 million requests/month won’t be chargeable to the user.

4. In the AUTOSCALING section keep the keep the minimum number of instances to 0 and maximum number of instances to 100.

5. In the Ingress control section select the ALL option so that your service is accessible over internet.

6. Now in the Authentication section select the Allow unauthenticated invocations and select this option only if you wish to make your API public or a public website

7. Now click on the Container, Networking, Security section and here you can select the Container Port, Capacity of the container, max timeout and concurrent request per second. By default they are set as max timeout 300 seconds and 80 concurrent request per second.

8. Now in the Execution Environment section select the default option.

9. Once the service is created using the default hello container image you will see a dashboard for this cloud run service.

10. Now here we can see a auto-generated url from this clous run service if we click on this URL it will redirect to the hello container and display its successful deployment message on our browser.

11. Now for using the Cloud Build  service click on the SETUP THE CONTINOUS DEPLOYMENT option.

12. The SETUP with CLOUD BUILD dialog box will open where you can authenticate your GitHub account and then select your repository and the branch from which you want your deployment to be picked whenever a push is made to the code from this branch. And once created a trigger will be attached to this Cloud Run service.

6. Now type Cloud Build in the search option of your GCP console and click on it.

7. Once the CLOUD BUILD is open go to TRIGGERS and click on them.

8. Select the trigger associated to your CLOUD RUN services and click on EDIT option.

It will open the Edit Trigger dialog box you will be able to se the short description of your trigger and from which repository it is linked.

9. Now create a cloudbuild.yaml which will instruct the cloudbuild while reading your repository that what instructions should be followed in order to build this code ands deploy it to cloud run.

steps:

  # Build the Docker image

  – name: ‘gcr.io/cloud-builders/docker’

    args: [

      ‘build’, 

      ‘-t’, ‘gcr.io/$PROJECT_ID/<yourcloudrunservicename>$SHORT_SHA’, 

      ‘–build-arg’, ‘GENERATE_SOURCE_MAP=${_GENERATE_SOURCE_MAP}’,

      ‘–build-arg’, ‘REACT_APP_MODULE_NAME=${_REACT_APP_MODULE_NAME}’,

      ‘–build-arg’, ‘REACT_APP_API_URL=${_REACT_APP_API_URL}’,

      ‘–build-arg’, ‘SKIP_PREFLIGHT_CHECK=${_SKIP_PREFLIGHT_CHECK}’,

      ‘.’

    ]

  # Push the Docker image to Google Container Registry

  – name: ‘gcr.io/cloud-builders/docker’

    args: [‘push’, ‘gcr.io/$PROJECT_ID/<yourcloudrunservicename>:$SHORT_SHA’]

  # Deploy to Cloud Run

  – name: ‘gcr.io/cloud-builders/gcloud’

    args: [‘run’, ‘deploy’, ‘<yourcloudrunservicename>’, ‘–image’, ‘gcr.io/$PROJECT_ID/<yourcloudrunservicename>:$SHORT_SHA’, ‘–platform’, ‘managed’, ‘–region’, ‘<your-region>’, ‘–allow-unauthenticated’, ‘–port’, ‘8080’, ‘–timeout’ , ‘900’]

And save this file as cloudbuild.yaml and push this file to your remote repository and comeback to your edit trigger option and scroll down to the Configuration option and select type as cloudbuild configuration file and Location as Repository

10. Now scroll down to the Environment variables section and add the variables that are required for your application and click on save.
11. Now you have successfully configured the continuous deployment setup and whenever a code will be pushed it will automatically fetch the changes the from your source repository build it and deploy it to your cloud run.

12.  Once the build is completed you can visit your cloud run autogenerated url and now when you click on it you will be able to see your application’s frontend is deployed and accessible through your Cloud Run service URL.

So, in this documentation we deployed our application’s frontend using the Cloud Run and Cloud Build services of GCP (Google Cloud Platform).

This blog will go into the art of AWS-smooth Angular application deployment. We’ll demonstrate the potential of automation by using AWS CodeBuild to build the app and AWS S3 to host it. Not only that but we’ll up your deployment game by distributing your software over AWS CloudFront. With this configuration, developers may concentrate entirely on code while the infrastructure handles deployment seamlessly. Let’s get started on this quest to make Angular app deployment on AWS easier.

Configuration steps: –

1. Setup a GitHub repository for your angular application with all the necessary files

2. Now create a S3 bucket on which the artifacts of the code will be stored after being built by the AWS Codebuild and then further get distributed via the Cloudfront URL.
3. Open Your AWS Management Console after logging into your Amazon Web Services account with your IAM user.

2. Go to the search bar and type S3. If you click on it you’ll be redirected to the S3 dashboard.

3. Click on Create bucket button. And in the general configuration, give an a unique name to your bucket and select the AWS region for your bucket which in our case will be ap-south-1 (Mumbai).

4. In the next steps keep the rest options for ACL, Block Public access as default and only enable the Bucket versioning for your bucket.

5. Keep the encryption of the object same as the bucket encryption. By default the bucket is encrypted with Amazon SSE-S3 encryption. 

6. Click on the Create bucket icon.

7. Once the bucket is created we need to enable the static web hosting. For that go to the properties of your bucket , enable the static website hosting and, add the index.html at the start and error pages.

3. Now create a Codebuild project to setup connection between our GitHub repository and Amazon S3 bucket for storing the artifacts.
4. Go to the search box of your Amazon console, type Codebuild and click on it.

2. Once clicked it will redirect you to the Codebuild dashboard. And click on Create build project. 

3. In the Project Configuration block add a name and description to your project.

4. In the Source block, select provider and authenticate, and then choose your repository in which your angular application and necessary files are present.

5. In the Primary source webhook events block, check the Rebuild everytime a code is pushed in to the repository option. Select Build type as Single Build  and Webhook event type as PUSH

6. In the Environment block, we will be defining the variables and values that our code will require and the image or OS it will use to build the application. A Codebuild service role will be created at this block in order to configure the IAM access for these operations.

7. Next is the buildspec block. In this block you have to mention a buildspec.yml file that should be created in your root repository.

8. Here is an example of the buildspec.yml file for an angular application 

version: 0.2

phases:

  install:

    runtime-versions:

      nodejs: 16

    commands:

      – echo Installing source NPM dependencies…

      – npm install -g @angular/cli@15.2.5

      – npm install

  build:

    commands:

      – echo Build started for $BUILD_ENV on `date`

      – npm run build

      – echo Build completed…

  post build:

    commands:

      – echo Pre-Build started on `date`

      – aws s3 sync ./dist s3://$BUCKET_NAME

      – echo Pre-Build completed on `date`

artifacts:

  files:

    – dist/**/*

  discard-paths: yes

9. Now in the Artifacts block, select the location and bucket where you want to store the artifacts once they are built using the Codebuild.

10. Click on Create build project.

11. Once the build project is created click on start build and observe the workings of the build process through logs and phase details.

The above image shows that the build was successful, and now the artifacts are copied to your S3 bucket.

4. Creating a Cloudfront distribution for my S3 bucket.

1. Go to the Search box on your AWS management console, type Cloudfront, and click on it it will redirect you to Cloudfront console.

2. Now click on Create a Cloudfront distribution.

3. Now in the Origin block, enter the AWS origin, which in our case will be our S3 bucket

4. Now in the Default cache behavior, select path pattern as default, compress objects as Yes, viewer protocol policy as Redirect Http to Https, allowed head for HTTP as GET HEAD, restrict viewer access as No and Cache policy as CacheOptimized

5. In the Web application firewall click on do not enable security options for now.

6. In the Settings block, select the use all edge locations option for price class for best performances, and add CNAME if an alternate domain and SSL certificate are available. HTTP/2 and HTTP/3 can both be used and now click on Create distribution.

7. It will generate an IAM policy for the bucket which can be copied to the policies.

8. Now hit the Cloudfront URL and you’ll be able to see your angular application.