4waytechnologies
Enquiry Form

Deploy Angular Universal Build Using GitHub on AWS EC2 Instance


This is written for beginners who are new to EC2 and Angularjs Development wants to deploy simple Angular App on AWS.

1. Add Angular Universal to your project

Angular made it easy to make your app SEO friendly by using Angular 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 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 of your angular application on 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 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 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 setup 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 same as your application and delete the default configuration file 

So now do Open 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, to reload them without the downtime and to 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 able to see your Website.

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

Leave a Comment

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

Close Bitnami banner
Bitnami