Deploy Angular Application to AWS EC2

Log in to the AWS console and Go to EC2 Section

In the top, click launch Instances.

Add a name and select Amazon Linux as the image. It is free to use for testing purposes.

In the “Key Pair” section, click “Create New Key Pair.” If you are using a Mac or Ubuntu, select the key format as “PEM,” and if you are a Windows user, use “.PPK.” Then, click “Create,” and it will download the key.

Under the network click Allow SSH and Allow HTTP traffic from the Internet.

Keep the other parts as it is and click Launch Instance.

Next, we need to SSH to the EC2 instance. Click the instance and Click the Connect button on the top. It will show the SSH method under the SSH client section.

For the PEM file path, you can use the path to the downloaded PEM file you have. Now, you can paste the copied code into the terminal to SSH to your instance.

ssh -i "EC2key.pem" ec2-user@ec222222.compute-1.amazonaws.com

Now you are inside the EC2 instance.

Run the following commands to install Nginx.

yum update
yum install nginx

By default, nginx will be disabled and you can enable it by using the following command.

service nginx start

Now, you can copy your instance’s public IP and paste it into the browser.

http://3.3.3.3

Now you should be able to see the default Nginx landing page.

Next, Create a repository in GitHub, bitbucket or any other code repository and push your code to the remote repository.

Next, you need to install git and angular cli to clone your project and build your project.

yum install git

Go to /user/local path and create a folder called website. No need to follow exactly this path. You can create that folder anywhere.

Now inside that folder, clone your repository

git clone https://github.com/username/angularProject.git

Now install Node.js using the following command

yum install nodejs

Now install angular cli

npm install -g @angular/cli

inside the website folder run npm install to download packages

npm install

Now you need to build the project using the following command

ng build

This will create a build project under the dist folder. Now you need to copy those files to the website folder that we created earlier.

cp /dist/angularProject /usr/local/website -r

Now you need to edit the Nginx root path to point to our new website folder.

Goto /etc/nginx/ and open the nginx.conf using vim

vi /etc/nginx/nginx.conf

Now set the root path to the website folder path

server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/local/website/;
}

Next, you need to restart Nginx

service nginx restart

Now reload the previous page and you should be able to see your angular app.