When it comes to deploying a web app, there are various cloud services available in the market. AWS Elastic Beanstalk is one of the most popular services for deploying web applications as it reduces management complexity, allowing you to focus on your app's development. AWS CodePipeline Service provides an easy way to automate the application deployment process. In this article, we will go through the high-level steps required to deploy a Node.js web app to AWS Elastic Beanstalk and set up a CI-CD pipeline using AWS CodePipeline Service.

Prerequisites

• A node app

• GitHub Repository

• AWS account

Before we begin, let us assume that we have a simple weather app developed using Node.js. Here is the GitHub link to the app.

Let's start with the high-level steps required to deploy the app to AWS Elastic Beanstalk with CodePipeline

1. Build the app.

2. Make configuration changes to the code entry file and package.json to make your app deployable.

3. zip all your code files except the node-module folder.

4. Create an application and environment in the Beanstalk console using manual file upload.

5. Create an AWS code deploy pipeline using a GitHub connection (Integrating GitHub with AWS CodePipeline).

6. Make sure your source and deploy stage succeeded.

7. Commit the code changes and auto-deploy your app.

Configurational Changes

When developing an app locally, we often run it on localhost with a port number. However, when deploying to AWS, we need to use the port provided by AWS. Therefore, we need to capture that port from the environment.

const port = process.env.PORT || 3000

we also have to make changes to the package.json file as this going to tell AWS what is out app’s configuration requirements. For this, I have to make these three changes. It varies based on your coding style

1. ElasticBeanstalk for now supports only node16 hence make sure to change the node version in package.json same.

2. By default the main module is index.json - change it based on your project setup. Most people use app.js as the main entry file.

3. Define how to start your app under the scripts section

Creating an APP environment in Beanstalk

1. Log in to the AWS Elastic Beanstalk console and click on the Create New Environment button.

2. Select the environment tier as a web server environment.

3. Give a unique application name: hashnodeblog-weatherapp and observe that It will auto-populate the environment.

   

4. Select the platform - this is critical. Make sure you have declared the same node version in your package.json file; otherwise, the app deployment will fail.

   

5. Choose the upload your code option and upload the code zip file.

   

6. Click on Create Environment.

7. You will have to wait for about 10 minutes for it to spin up a bunch of services like an S3 file to hold the zip file, spin up an EC2, do all dependency installation, create security groups, add load balancers, add auto-scaling facilities, and create CloudWatch alarms.

8. Once the environment has been created successfully, you will see this page. Health should be green.

   

9. Click on the link given at top of the page to see your app up and running fine.

   

Our weather app is up and running on AWS now.

Automating the Deployment process

Now, let's set up the CI-CD pipeline using AWS CodePipeline Service.

1. Open the AWS CodePipeline service console.

2. Click on the Create Pipeline button and fill in the details.

3. Choose the New Service Role option.

   

4. The next option asks for Source, choose GitHub Version 2 as we are going to use GitHub as our version controller.

   

5. The next step is setting up a connection between AWS CodePipeline and GitHub.

   For a new connection click Connect to GitHub.

6. Give a connection name and click on Connect to GitHub.

   

7. On the next page, AWS Connector for GitHub requests permission to verify your GitHub identity and control access to your resources. To grant permission, click on Authorize AWS Connector for GitHub.

8. Upon authorization, you’ll be redirected back to the Create connection page.

9. To have GitHub Apps generate a link to your GitHub to be used by CodePipeline, click on Install a new app.

   

10. This time, you’ll be redirected to a page to select the GitHub account or organization to which you want to connect. Select the appropriate option.

11. Next, you’ll be prompted to decide whether you want to give AWS access to all the repositories in your account or only specific ones. Here, you can select the option you prefer. I’ll choose All repositories.

12. Click on Install.

13. Upon installation, you’ll be redirected to the Create connection page.

14. Click on Connect to complete the process.

    Note: I have not put any screenshots for a few steps above because the prompts will self-direct you so there is nothing to confuse.

15. Once the connection is established successfully, we can fill in the rest fields like repository name and branch name.

    

16. Choose the output artifact format as CodePipeline Default.

17. Click Next and we can skip build stage.

18. We have to fill the deployment stage. Choose Beanstalk as the deployer.

19. Our formerly created application name and environment name will pop up by clicking on the search option in the application name and environment field.

    

20. Click Next

21. It will create a Review page, go through all the selections for verification and click on Create Pipeline.

22. And wait for the two-stage completion. Source and Deploy.

    

23. Once done, let's access the app again and see everything running as it is.

Testing the Auto Deployment

1. Once make sure the app is fine, let's do some changes to our app and commit the change and let’s see how auto-deploy gets triggered.

2. Let's make some changes to the help page.

   

3. Here I have added a new paragraph element and removed one.

4. Let's commit and push the changes. And we can see the moment we push the code the auto deployer has triggered in the CodePipeline console.

   

5. We can confirm that by clicking on the commit link. It will direct you to the commit on which this deployment was triggered.

   

6. Now let’s refresh the app and see the updates on the help page.

And with this, we have completed the setup for our auto-deployment feature.

Cleanup

As this is for educational purposes to save money you may want to clean up all the services from AWS.

1. Delete the code pipeline from the Code Pipeline dashboard. It should be quick.

2. Then go to the elastic beanstalk console, choose your environment and click on Terminate environment from the Action dropdown.

   

3. It will take a few minutes to complete as a lot of services in the background have to be cleaned up. This is the best thing about using this service.

4. After a few minutes, If you click on refresh, it will automatically show you the application list. Choose your application to terminate and click on Delete application from the Action menu.

5. Confirm the delete

   

6. If you refresh your app URL you should get the page cannot be found error page. You are done.

Conclusion

To conclude, this blog post walked us through the process of deploying a node-based web app to the AWS cloud via the Elastic Beanstalk service and configuring a CI/CD pipeline with GitHub and AWS CodePipeline. We also made some changes to the weather app and observed the auto-deploy feature in action. While AWS offers various options for code deployment, such as Amplify, CloudFormation, AppRunner, and EC2, I am leaning towards Beanstalk because I found it is the most user-friendly and efficient deployment option. However, when making decisions at the enterprise level, various other factors like cost should be considered.

Hope you have liked the blog. Happy learning!!