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.
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.
So, Let us dive in!
Follow the following steps in order to deploy an Angular app to an AWS EC2 instance.
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.
It is just one line code and your application has become SEO friendly.
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.
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.
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.
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.
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.
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.
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
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
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.