Steps to Deploy Angular Application on EC2

Posted on by




Step 1: Create EC2 Instance



Step 1.1 : Connecting EC2 Instance via SSH

  • To securely connect to your EC2 instance, you’ll need the .pem private key file you downloaded during the creation of your EC2 instance. Use the following SSH command to connect: 
ssh -i /path/to/your/private-key.pem ec2-user@<your-ec2-public-ip>
Enter fullscreen mode

Exit fullscreen mode

Note: If you encounter permissions issues, you might need to adjust the permissions of the .pem key file:

chmod 400 /path/to/your/private-key.pem
Enter fullscreen mode

Exit fullscreen mode

Once connected, you should see a terminal prompt for the EC2 instance.

Image description



Step 2: Create the Build for Angular Application

Run the following Angular CLI command to build your project for production:

ng build
Enter fullscreen mode

Exit fullscreen mode

The build output will be stored in the dist/ directory under the name of your app (dist/).



Step 3: Transfer Build to EC2 Instance

Use SCP to securely transfer your built Angular project to your EC2 instance:

scp -r -i ~/OneDrive/Desktop/angulardeploy.pem "/c/Users/Admin/OneDrive/Desktop/KANBAN/Kanban-Task-Management-Web-App/dist/frontend/" ec2-user@ec2-34-224-41-250.compute-1.amazonaws.com:~/
Enter fullscreen mode

Exit fullscreen mode



Step 4: Nginx Setup with Paths

  • Install Nginx on your EC2 instance if it is not already installed by using the following respectively commands: 
sudo yum update
sudo yum install nginx
sudo amazon-linux-extras install nginx1
sudo systemctl start nginx
sudo systemctl status nginx -1
Enter fullscreen mode

Exit fullscreen mode

  • Update Nginx.conf file:
    Edit the Nginx configuration file: 
sudo vim /etc/nginx/nginx.conf
Enter fullscreen mode

Exit fullscreen mode

  • Update the serverblock with the path to your application directory and set up a try_filesdirective: 
server {
    listen       80;
    listen       [::]:80;
    server_name  _;

    location / {
        autoindex on;
        root /home/ec2-user/frontend;
        try_files $uri $uri/ /index.html;
    }
    root         /usr/share/nginx/html;

    error_page  404 /404.html;
    location = /404.html {
    }

    error_page   500 502 503 504 /50x.html;
    location = /50x.html {
    }
}
Enter fullscreen mode

Exit fullscreen mode 

namei -om /usr/share/nginx/html
namei -om /home/ec2-user/YourBuildName
sudo chmod 755 /home/ec2-user
namei-om /home/ec2-user/YourBuildName
Enter fullscreen mode

Exit fullscreen mode

This command ensures that the build directory has the necessary permissions (read, write, and executefor the owner, and read/execute for others) by modifying permissions for /home/ec2-user:

sudo systemctl reload nginx
sudo systemctl restart nginx
Enter fullscreen mode

Exit fullscreen mode



Step 5: Test Deployment

Open your browser and navigate to your EC2 instance’s public IP or domain name:

http://<your-ec2-public-ip>
Enter fullscreen mode

Exit fullscreen mode



Source link