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 https://www.digitalocean.com/community/tutorials/deploying-a-rails-app-on-ubuntu-14-04-with-capistrano-nginx-and-puma
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
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
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, "season.react.muhammadyana.me"
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'
end
end
end
before "symlink:release", :yarn_deploy
end
after that enter to dir config/deploy/ and you will see
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
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 {
server_name season.react.muhammadyana.me;
index index.html;
root /home/rails/apps/season.react.muhammadyana.me/current/build;
location / {
try_files $uri $uri/ /index.html;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/season.react.muhammadyana.me/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/season.react.muhammadyana.me/privkey.pem; # 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 = season.react.muhammadyana.me) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name season.react.muhammadyana.me;
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
if you to run the following command juts type
cap environment yarn:install
example
cap production yarn:install
or
cap staging yarn:install
and others
for demo this application you can visit in https://season.react.muhammadyana.me/
