Enquiry Form

Deploy Angular Universal Build Using GitHub on AWS EC2 Instance

deploy angular app to aws
Table of Contents
1. Introduction
2. How to Deploy an Angular App to AWS?
3. Conclusion

Introduction

Amazon Web Services (AWS) includes various basic terms that you might be familiar with, such as EC2 instance, security group, and many more.

In simpler words, an EC2 instance acts like a remote system running with the help of Ubuntu or any other Linux base provided by AWS, which allows us to install the required servers, plugins, software, and more.

In this article, we have discussed how to deploy an Angular app on an AWS EC2 instance using GitHub. This is written for beginners who are new to EC2 and Angularjs Development want to deploy Angular App to AWS.

So, Let us dive in!

How to Deploy an Angular App to AWS?

Follow the following steps in order to deploy an Angular app to an AWS EC2 instance.

1. Add Angular App Universal to your project

Angular made it easy to make your app SEO friendly by using Angular App Universal which supports server-side rendering (SSR). Run the command given below on your root folder of the project in terminal.

ng add @nguniversal/express-engine --clientProject Your-application-name

It is just one line code and your application has become SEO friendly.

2. Create Production Build

After successfully completing the first step make your application ready for deployment and creates a production build with server-side-rendering.  Just run this command on your terminal.

npm run build:ssr

This will create a production build for your application. It will create a Dist folder on your application and now you are ready for deployment angular app to AWS EC2 instance.

3. Upload your project folder to GitHub

So there are many ways to upload your application on EC2 like you can upload your build on the S3 bucket and then download using the link on your instance or you can upload your build on GitHub repo and then download it from EC2 instance. 

Actually, the first method is much easier and time-saving but it has some disadvantages as well as it does not maintain version control or if you are using an S3 bucket then there are chances that you have to spend more money than intended.

Personally, I prefer the GitHub method.

All you have to do is create a private GitHub repository and upload your dist folder on it.

4. Download your project folder from GitHub to the instance

I assume that you have already set up your instance or you have already installed Nginx,npm, or Angular CLI.

So when you download the Nginx server then another folder www was created under the hood

Go to your  /var/www folder and clone your GitHub project to this location using the below command.

git clone github-project-link

5. Configure server setup

Once you have successfully downloaded your project from GitHub to instance now it’s time to set up your server so you can run this on your domain name, this is the main part where you need to be focused.

Now go to cd /etc/nginx/site-available now create a file name as your website or the same as your application and delete the default configuration file.

So now do Open the file you have just created inside site-available and paste this code to setup server.

server {
    listen 80;
    listen [::]:80;
    return 301 https://your-site-name.com;
}
server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name https://your-site-name.com;
  server_tokens off;
  index index.html index.htm;
  location / {
        proxy_pass http://127.0.0.1:4000;
        # First attempt to server request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ /index.html =404;
    }
}

Here in the above code  proxy_pass http://127.0.0.1:4000 this line works as proxy means whenever you search your domain this proxy will work under the hood and load your site. 

6. Install and run PM2

PM2 is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, reload them without downtime, and facilitate common system admin tasks.

So this will help to run your application on servers localhost http://127.0.0.1:4000;

Just install it using

npm install pm2 -g


And then run PM2 server using

Pm2 start dist/server.js

7. Restart Nginx

Now restart your Nginx server using 

Service nginx restart

And that’s it by following these steps your App is running fine on your domain. I hope you are able to see your Website.

Keep reading, keep coding & if you got stuck somewhere, I am happy to help.

Conclusion

We hope you will find this article helpful. After going through this blog, you will be able to run your app without any hassle even if you are on a beginner level. Let me know if I missed something or if you stuck somewhere during the entire process. Please provide your feedback in the comment section below.

3 thoughts on “Deploy Angular Universal Build Using GitHub on AWS EC2 Instance”

  1. Jitendra Dadhich

    This article is very much helpful and I hope this will be useful information for the needed one. Keep on updating these kinds of informative things…

Leave a Comment

Your email address will not be published. Required fields are marked *

Close Bitnami banner
Bitnami