Deploying an Angular app onto an EC2 instance using GitHub

Daniel Kioko
TheCodr
Published in
2 min readMay 3, 2021

There’s numerous ways to achieve file transfers to and from an server, but I found GitHub as the best option to deploy your code in the most organized fashion. I’ll be explaining how to make use of it in this tutorial.

Before you begin, please make sure to setup NGINX on your environment

Installing GitHub On The Instance

You’ll begin by updating the server:

sudo yum update -y

After updates are completes, install GitHub:

sudo yum install git -y

After installation is complete, check to confirm the latest version of git installed:

git version

Building For Production

On your local environment (your computer), navigate to your app folder and generate a dist file by running:

ng build --prod

When it’s complete, make sure to commit your changes and push to your repository.

On the server, navigate to the preferred destination of your angular app and clone your project

Setting Up NGINX

Next, we’ll direct NGINX to the dist folder and setup the port it’ll be accessed from by making changes to the ‘nginx.conf’ file. Run the following command to open it using vim:

sudo vim /etc/nginx/nginx.conf

Next, you’ll set the root path for the dist folder and make any other changes required for the server:

server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /PathToClonedApp/dist;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
index
index.html;
try_files $uri /index.html;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}

Save your changes and exit Vim (Press Escape then type ‘:wq’ and press enter).

To restart the service running NGINX, run:

service nginx restart

Finally, restart the server by running:

systemctl restart nginx

PS: Make sure to restart nginx everytime you pull changes from Github for changes to take effect

--

--