Priit Jõe

UX/UI Tailor

Creating a CI/CD pipeline to deploy Angular Universal on AWS Elastic Beanstalk

Posted on January 25th, 2023

February 21st, 2023

In this blog post, we will guide you through the process of creating a continuous integration and continuous deployment (CI/CD) pipeline for an Angular application using AWS Elastic Beanstalk. By automating the deployment process, you can ensure that your application is always running the latest version, reducing the risk of human error and making it easier to deploy updates and bug fixes. This is especially useful for teams working on large, complex applications that need to be updated frequently.

AWS Elastic Beanstalk is a fully managed service that makes it easy to deploy, run, and scale web applications and services. It's a perfect choice for deploying Angular applications, as it provides a simple and efficient way to deploy and manage your application on the cloud.

By the end of this tutorial, you will have a fully automated pipeline that will allow you to easily deploy your Angular application to the cloud with just a few clicks. We will cover everything from setting up a new Elastic Beanstalk environment to configuring the CI/CD pipeline using AWS CodePipeline and CodeBuild. Whether you're a beginner or an experienced developer, this guide will provide you with the knowledge and resources needed to set up your own CI/CD pipeline for an Angular application on AWS Beanstalk.

List of contents

  1. Creating an Elastic Beanstalk Environment and Application
  2. Creating a S3 bucket to host a startup configuration file

1. Creating an Elastic Beanstalk Environment and Application

First step would be creating an environment, and an application for AWS Elastic Beanstalk. If you have a new (fresh) AWS account and don't have any environments or applications created yet - then AWS Console only allows you to create a new application, but not the environment. That's because AWS will create the environment for you automatically, when you create your first ever application. For this tutorial however, we are going to assume that you already have at least 1 application created, so you can create the environment manually. Creating the environment manually before creating the application gives you the advantage to specify a domain, and name for the environment. If you do not care about this, you can just create an application, which automatically generates an environment for you, as previously mentioned.

Let's proceed, go to the Elastic Beanstalk page, which you can navigate to, by using the search in the top left navbar. Choose "Environments" from the left sidebar and click "Create a new environment".

Choose "Web server environment" as the environment tier, and proceed by clicking "Select".

Next, fill in all the details for the environment, such as application name, environment name, and you can also specify the domain that you want to use for this application. You can use that domain to access the application after it's been deployed later on.

After filling in the basic initial information, scroll down to the "Platform" and "Application code" sections. Choose the following platform settings as described on the screenshot below (Node.js, Node.js 16 running on 64bit Amazon Linux 2, 5.6.3)

For "Application code" section, leavei t as it is, i.e. use the "Sample application". This does not matter, it means that it will show you a sample Node.js application when going to the domain specified above. We will replace sample application with our own application once we've set up the CI/CD pipeline.

Click "Create environment" and we're done with the first step.

You're going to have to wait for a few minutes until the environment is created.

When you now click on the domain link below the environment's name, you can see that the sample Node.js application is up and running - which means that you've successfully created a Beanstalk environment.

Creating a new environment also creates the application automatically (and vise versa, when creating an application). You can confirm this by navigating to the "Applications" page from the left sidebar.

2. Creating a S3 bucket to host a startup configuration file

To specify the command that starts our Angular application, we need to create a file named "Procfile". This file is responsible for starting our Angular Universal application's process. We will copy "Procfile" from the S3 bucket to our Elastic Beanstalk environment during the build process, which will be addressed later. For now, we need to create the S3 bucket and upload the file into this bucket.

Navigate to the S3 page and click "Create bucket" to start creating the bucket. Choose a name for the bucket, click on "ACL's enabled" in the "Object ownership" section. Choose "Object writer" for object ownership and choose the specified policy options.

Now that the bucket is created, you can upload "Procfile" to this bucket. Create this file anywhere on your computer and put the following content inside of it:

web: node angular-ssr/server/main.js

This file will be copied into the dist folder. Make sure that the path in this file is correct, as it depends on the name of your Angular project. In this example, Angular project's name is "angular-ssr". After you've uploaded the file, we will also need to specify the bucket policy. You can do this by navigating to the bucket's page and opening the "Permissions" tab.

Click edit and add the following policy to your bucket, make sure to also replace the bucket name in the policy resources, with your own bucket name. Click save changes and you're done.

Finishing thoughts

In conclusion, creating a CI/CD pipeline to deploy an Angular Universal application on AWS Elastic Beanstalk can be a complex process, but with the right tools and knowledge, it can be accomplished efficiently and with minimal effort. By utilizing the power of Angular Universal, you can create a seamless user experience for both web and mobile users, while also improving your application's search engine optimization. By using AWS Elastic Beanstalk, you can easily manage the infrastructure and scaling of your application, while also taking advantage of the many other services that AWS has to offer. By following this tutorial, you should now have a solid foundation for creating your own CI/CD pipeline and deploying an Angular Universal application on AWS Elastic Beanstalk.

© 2023 manifesto.ee