Deploy Angular Universal Build Using GitHub on AWS EC2 Instance

AWS EC2 Banner image's picture

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.

1 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.

1 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.

Also Read:-Programming Outsourcing: What Should You Know?


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.

1 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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.

Also Read:-Technology Updates From Tech Companies

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.


Mansi Gaur's picture
Mansi Gaur

A freelancing blogs and e-books writer who keeps you up with the trending technologies and user guides. A blogger who is currently a post-graduate living in United Kingdom and trying to make her niche as a Data Scientist. Before taking a deep dive into the "Data-World", she got a Bachelor's Technology degree in Computer Science and has always dreamed of writing as a kid which inspired her to write wonderful content with the right amount of technical terms to make it easy for the beginners and as well full-fledged developers to grasp a hold onto the computer technologies.

Related Blogs

Statecraft in React Native: Redux vs. Mobx vs. Context API Explained

React Native is a superhero toolkit that has been chosen by over 42% of developers.

How To Start A Streaming Service?

4 Way Technologies, a leading custom software development company offers impeccable.

How to develop & publish Vizio App for Smart TV?

Introduction The usage of Smart Television continues to grow gradually.

Share this Article

Page Content

Introduction

How to Deploy an Angular App to AWS?

Conclusion

logo