Deploying React Application to Amazon EC2 with Capistrano, Github Action & Nginx

deploy_react_with_ec2_capistrano.MD

INSTALL NODE JS & YARN

Install NVM

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
source ~/.bashrc

Install node js 14

nvm install nvm install 14.20.0

install yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

Install lets encrypt

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python3-certbot-nginx

Test if github was connected to our account

ssh -T git@github.com

Install ruby and capistrano

add Gemfile and .ruby-version to our project

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.0.1'

group :development do
  # Use Capistrano for deployment
  gem 'capistrano',               require: false
  gem 'capistrano-yarn'
  gem 'capistrano-nvm'
  gem 'ed25519'
  gem 'bcrypt_pbkdf'
end

bundle install
bundle lock --add-platform x86_64-linux

install capistrano

cap install

Setup Capfile

Put this in to capfile

require 'capistrano/yarn'
require 'capistrano/nvm'

deploy.rb

set :application, "react-capistrano"
set :repo_url, "git@github.com:muhammadyana/deploy-react-with-capistrano.git"

set :user,        'ubuntu'
set :nvm_type,    :user
set :nvm_node,    'v14.20.0'
set :nvm_map_bins, %w[node npm yarn]
set :deploy_to,    "/home/#{fetch(:user)}/apps/#{fetch(:application)}"
set :yarn_flags,   %w[--silent --no-progress]
set :ssh_options,  { forward_agent: true, auth_methods: %w(publickey) }

namespace :deploy do
  task :yarn_deploy do
    on roles fetch(:yarn_roles) do
      within fetch(:yarn_target_path, release_path) do
        execute fetch(:yarn_bin), 'build'
      end
    end
  end
  before "symlink:release", :yarn_deploy
end

production.rb

server '108.136.53.121', user: "#{fetch(:user)}", roles: %w{web}
set :branch, ENV["REVISION"] || ENV["BRANCH_NAME"] || 'main'

Setup NGINX

sudo nano sharing-session.muhammadyana.me.conf

copy this script

server {
  server_name sharing-session.muhammadyana.me;
  index index.html;
  root /home/ubuntu/apps/react-capistrano/current/build;
  location / {
   try_files $uri $uri/ /index.html;
  }

  location ^~ /assets/ {
    gzip_static on;
    expires 1y;
    add_header Cache-Control public;
  }
}

linked nginx configuration to site-enabled

sudo ln -s /etc/nginx/sites-available/sharing-session.muhammadyana.me.conf /etc/nginx/sites-enabled/

Restart nginx

sudo service nginx restart

Install SSL

sudo certbot --nginx -d sharing-session.muhammadyana.me

Setup github action

Setup SSH for github action

create SSH

ssh-keygen -t rsa -b 4096 -C "deploy@github-action"

name ssh

deploy@github-action

copy our new SSH to ~/.ssh/authorized_keys

cat deploy@github-action.pub >> authorized_keys

Encrypt our private key

openssl enc -aes-256-cbc -md sha512 -salt -in deploy@github-action -out deploy@github-action-encrypted -k "PASSWORD" -a -pbkdf2

copy encrypted ssh to file and save to our project

copy deploy@github-action.pub to deploy keys

Add new reposiroty secret DEPLOY_ENCRYPTED_KEY with value password that we've set before

Add capistrano github action

https://github.com/marketplace/actions/capistrano-deploy

Create action in

.github/workflows/deploy_to_production.yml