Angular Apps on AWS EC2 with NGINX

We have multiple options to deploy Angular apps, services like Netlify, AWS Amplify, and many others. however, there are cases when we still need to run our Angular apps on ECS instances. (Maybe a compliance requirement like Web Application Firewall - WAF -, or similar)

In our particular setup for AWS Instances, we use NGINX as a Web application server, this is a quick recipe for the site definition file:

server {
   listen 80;
   listen 443;
   server_name appName.appDomain;
   ssl on;
   ssl_certificate /etc/nginx/ssl/cert.chained.crt;
   ssl_certificate_key /etc/nginx/ssl/cert.key;
   ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
   ssl_prefer_server_ciphers on;
   ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
   error_page 497 http://$host:$request_uri;
   root /home/appName/app/dist;
   location / {
     try_files $uri $uri/ /index.html;
   }
   error_page 500 502 503 504 /500.html;
   client_max_body_size 4G;
   keepalive_timeout 10;
}

once we have our NGINX ready to respond to petitions with our Angular App, we deploy using a Capistrano trick, because yes, we can deploy Angular Apps with Capistrano.

In Our Angular project, we have a Config Folder, with deploy.rb and deploy folder, one .rb file for each environment. The Cap file went to the root folder on our project.

Finally, a couple of post-deployment tasks complete the magic.

after 'deploy:published','test:npm_install'
after 'deploy:published','test:build'

namespace :test do
  desc 'build bo'
  task :npm_install do
    on roles(:app), in: :sequence, wait: 5 do
      execute "cd '#{release_path}'; npm install"
    end
  end
end

namespace :test do
  desc 'build bo'
  task :build do
    on roles(:app), in: :sequence, wait: 5 do
      execute "cd '#{release_path}'; ng build --configuration=stage"
    end
  end
end

In summary, this is how we automated our Angular deployments with Capistrano on AWS EC2 Instances, using NGINX as a web server. Just another option to consider.