Deploying Angular Web App on Amazon EC2 with AL2023 and Nginx

Welcome to the blog by The Quick Desk!

Are you interested in deploying your Angular web application on Amazon EC2 but don't know where to start? Don't worry, I have got you covered. In this step-by-step guide, we will show you how to launch an EC2 instance with the latest third-generation of the Amazon Linux distribution, AML 2023, and deploy your Angular app using the Nginx web server.

Before we get started, let's take a quick look at Amazon EC2. It is a web service that provides scalable computing capacity in the cloud. With Amazon EC2, you can deploy and run applications on a virtual machine without the need for a physical server. It is highly reliable, secure, and cost-effective, making it a popular choice for businesses of all sizes.
Here we will use the latest distribution that is AL2023 or Amazon Linux Distribution for deploying our web application. Amazon Linux 2023 provides an application environment that offers long-term support with access to the latest innovations in Linux. 

Now, let's dive into the process of deploying an Angular web app on Amazon EC2 with AL2023 and Nginx.

Step 1: Launch an EC2 Instance

To get started, you need to log in to your AWS console and navigate to the EC2 service. From there, click on the "Launch Instance" button to start the process. Select the Amazon Linux 2023, SSD Volume Type, and choose the instance type based on your requirements.

Next, configure the instance details, add storage, configure security groups, and review your settings before launching the instance.

In security groups, you need to allow traffic from HTTP and HTTPS to get the nginx web server working.

Step 2: Install Nginx

Once you have launched your EC2 instance, you need to set up the necessary security groups to ensure that you can access the server securely. Then, use WinSCP to connect to the server and install Nginx with version 1.22 from the Amazon Linux repository. As we are using AL2023 it supports consistent application of updates across all your instances by locking them to a specific repository version.

We are using yum package manager.

sudo yum update

sudo yum install nginx

sudo systemctl status nginx OR sudo service nginx status

sudo systemctl start nginx

# Default Nginx Path: /etc/nginx 

Step 3: Copy Your Angular Build to the Server

Once Nginx is up and running, you can copy your Angular build to the server using WinSCP.We are using WinsSCP here you can use other clients also. 

For WinSCP, Just enter the Public IP of the server in the hostname section, username: ec2-user.

Next, upload your Angular build to the new directory you created on the server. You can use the "drag and drop" feature in WinSCP to copy your files from your local machine to the server.

Here is one more thing we will create a new directory at the root path to keep our app environment isolated from other directories. For this 

Go to the root directory.

cd /

sudo mkdir /data

sudo mkdir /data/nginx

Now /data/nginx is the path where we will put the dist of our application as we require the nginx user  to be able to read the content in this directory.

Note the above path as it is the destination path and we need it later.

Step 4: Creating the webroot

We need to copy the build in the newly created directory, as it will be copied into your home directory after the drag-and-drop operation we performed earlier. For this we need 

a) Source - where we have the dist now(it is our home directory)

b) Destination - where we will place this file after extracting.(the new directory we created at root point)

#to go to the home directory 

cd 

sudo unzip dist.zip  

 

cd /dist/                                     

Here we can see our build. Now copy the above-extracted zip into the webroot path. We can use the below command to check the working directory: 

pwd

Now after getting the path just copy it as it is the source from where we need to copy.

sudo cp -R /path/to/source /path/to/destination

Now our source is : /home/ec2-user/dist/acceleratort_frontend

Destination is : /data/nginx

Final command to copy:

sudo cp -R acceleratort_frontend /data/nginx

#Check by going to the destination directory 

cd /data/nginx/app_name

Copy the path of the deployed directory. It should look like /data/nginx/app_name and it will be the webroot path.

Step 5. : Configure Nginx to Serve Your App

To configure Nginx to serve your app, create a custom configuration file for the app in /etc/nginx/conf.d.

Create the Nginx configuration file by running the following command:

sudo vim /etc/nginx/conf.d/app_name.conf

Then, add the following server block to the file:

server {

    listen 80;

    server_name Public_IP;

    location / {

        root /data/nginx/build_folder_app;

        index index.html;

        try_files $uri $uri/ /index.html;

    }

}

Replace "your_domain.com" with your actual domain name, we have Public-IP of our server so will use that and "/data/nginx/build_folder_app" with the path to your Angular build on the server (webroot).

We have used a very basic configuration file, it is advised to create a better and more secure nginx configuration file, that may include logging of error and access, blocking confidential information in the build, etc. 

Save the changes and restart Nginx by running the following commands:

sudo systemctl restart nginx

Visit the public IP in the browser. And that's it! You now have a fully functional Angular web app running on Amazon EC2 using the latest version of Amazon Linux and Nginx.

In conclusion, deploying an Angular web app on Amazon EC2 with AL2023 and Nginx is a straightforward process that anyone can do. With this step-by-step guide. For the video tutorial, you can check out the link below: 

Deploying Angular Web App on Amazon EC2 with AL2023 and Nginx