Deploying an Angular app onto an EC2 instance using GitHub
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
Let me know any questions or it goes for you in the comments.
Happy Coding! 🚀🌟