Muhammad Yana Mulyana

How to Deploy React App in ubuntu use nginx and capistrano

How to Deploy React App in ubuntu use nginx and capistrano - This is why i so love with Ruby on Rails proramming, Ruby make developer easier, fast and elegan. Capistrano is a remote server automation and deployment tool written in Ruby. i usualy use capistrano for deploying rails Application to server, but since Capistrano allows to deploy different technologies, i try search How to Deploy React App in ubuntu use nginx and capistrano  and find awesome article in medium for deploying React App to the server. ok let me try

First you have to install Ruby i'll skip it, you can follow this instruction to install Ruby

First install Capistrano gem

gem install capistrano
gem install capistrano-yarn
gem install capistrano-nvm

after has been installed enter to your react application directory and run

cap install

this command will build

mkdir -p config/deploy
create config/deploy.rb
create config/deploy/staging.rb
create config/deploy/production.rb
mkdir -p lib/capistrano/tasks
create Capfile

How to Deploy React App in ubuntu use nginx and capistrano

after that modify Capfile

This file is used to let Capistrano know what libraries we are going to use in our deploy, in our example we are going to need `git`, `nvm`, and `yarn`. This is the content of the file:

# Load DSL and set up stages
require "capistrano/setup"
# Include default deployment tasks
require "capistrano/deploy"
require "capistrano/scm/git"
require 'capistrano/yarn'
require 'capistrano/nvm'
install_plugin Capistrano::SCM::Git

How to Deploy React App in ubuntu use nginx and capistrano

So modify the deploy.rb file 

This file has the global configuration for Capistrano, includes things like the folder where we will put our code in the server, the repo url, what files/folders we want to override (to prevent them to be uploaded to the repo). This is an example:

lock "~> 3.11.0"

set :application, ""
set :repo_url, "[email protected]:muhammadyana/season-app-with-react.git"
set :user, 'rails'
set :nvm_type, :user
set :nvm_node, 'v11.3.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) }
# Default branch is :master
# ask :branch, `git rev-parse --abbrev-ref HEAD`.chomp
append :linked_files, '.env'
append :linked_dirs, 'node_modules'
# Default deploy_to directory is /var/www/my_app_name

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'
  before "symlink:release", :yarn_deploy

How to Deploy React App in ubuntu use nginx and capistrano

after that enter to dir config/deploy/ and you will see 

How to Deploy React App in ubuntu use nginx and capistrano

if you have staging environment modify it, because this is example so i'll update only the production environment

server 'your-ip-address-server', user: "#{fetch(:user)}", roles: %w{web}
set :branch, ENV["REVISION"] || ENV["BRANCH_NAME"] || 'master'

Capistrano use SSH to access to your server and git repo, so before deploy you have to register your SSH key to server and git setting

well, setup has been complete, enter terminal and type

cap production deploy 

How to Deploy React App in ubuntu use nginx and capistrano

Setting Up nginx

To be able to serve a React app using nginx we need to add a pretty simple config, this is an example:

server {                                                                                                                                                                                     
  index index.html;                                                                                                                                                                          
  root /home/rails/apps/;                                                                                                                          
  location / {                                                                                                                                                                               
   try_files $uri $uri/ /index.html;                                                                                                                                                         
    listen 443 ssl; # managed by Certbot                                                                                                                                                     
    ssl_certificate /etc/letsencrypt/live/; # managed by Certbot                                                                                   
    ssl_certificate_key /etc/letsencrypt/live/; # managed by Certbot                                                                                 
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot                                                                                                                    
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot                                                                                                                      
server {                                                                                                                                                                                     
  if ($host = {                                                                                                                                              
    return 301 https://$host$request_uri;                                                                                                                                                 
  } # managed by Certbot                                                                                                                                                                   
  listen 80;                                                                                                                                                                                 
  return 404; # managed by Certbot                                                                                                                                                           
sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/react-app
sudo service nginx restart

tada 🎉 you are done and open your server


Capistrano There are many method, you can see by type 

cap -T

and will be more option like 

cap deploy                         # Deploy a new release
cap deploy:check                   # Check required files and directories exist
cap deploy:check:directories       # Check shared and release directories exist
cap deploy:check:linked_dirs       # Check directories to be linked exist in shared
cap deploy:check:linked_files      # Check files to be linked exist in shared
cap deploy:check:make_linked_dirs  # Check directories of files to be linked exist in shared
cap deploy:cleanup                 # Clean up old releases
cap deploy:cleanup_rollback        # Remove and archive rolled-back release
cap deploy:finished                # Finished
cap deploy:finishing               # Finish the deployment, clean up server(s)
cap deploy:finishing_rollback      # Finish the rollback, clean up server(s)
cap deploy:log_revision            # Log details of the deploy
cap deploy:published               # Published
cap deploy:publishing              # Publish the release
cap deploy:revert_release          # Revert to previous release timestamp
cap deploy:reverted                # Reverted
cap deploy:reverting               # Revert server(s) to previous release
cap deploy:rollback                # Rollback to previous release
cap deploy:set_current_revision    # Place a REVISION file with the current revision SHA in the current release path
cap deploy:started                 # Started
cap deploy:starting                # Start a deployment, make sure server(s) ready
cap deploy:symlink:linked_dirs     # Symlink linked directories
cap deploy:symlink:linked_files    # Symlink linked files
cap deploy:symlink:release         # Symlink release to current
cap deploy:symlink:shared          # Symlink files and directories from shared to release
cap deploy:updated                 # Updated
cap deploy:updating                # Update server(s) by setting up a new release
cap doctor                         # Display a Capistrano troubleshooting report (all doctor: tasks)
cap doctor:environment             # Display Ruby environment details
cap doctor:gems                    # Display Capistrano gem versions
cap doctor:servers                 # Display the effective servers configuration
cap doctor:variables               # Display the values of all Capistrano variables
cap git:check                      # Check that the repository is reachable
cap git:clone                      # Clone the repo to the cache
cap git:create_release             # Copy repo to releases
cap git:set_current_revision       # Determine the revision that will be deployed
cap git:update                     # Update the repo mirror to reflect the origin state
cap git:wrapper                    # Upload the git wrapper script, this script guarantees that we can script git without getting an interactive prompt
cap install                        # Install Capistrano, cap install STAGES=staging,production
cap yarn:install                   # Install the project dependencies via yarn
cap yarn:prune                     # Remove extraneous packages via yarn
cap yarn:rebuild                   # Rebuild via yarn

How to Deploy React App in ubuntu use nginx and capistrano

if you to run the following command juts type

cap environment yarn:install


cap production yarn:install
cap staging yarn:install

and others

for demo this application you can visit in