プログラミング備忘録【Ruby on Rails】

初学者として日々学んだことや発見をいつでも引き出せるようブログにまとめてみた。初学者のため間違った説明があった場合、コメントいただけると嬉しいです。

Rails[api]+React+AWSの環境構築


AWS無料枠でReact+Railsアプリデプロイ手順メモ - aws-deploy001

ローカルでの設定

Railsアプリに以下のようにgemを追加し、インストールしてください

group :production do
    gem 'unicorn', '5.4.1'
end

*バージョン5.5.0だとunicorn起動時にArgumentErrorがでるので5.4.1を入れる

以下のファイルを作成し、バックエンドサーバのエンドポイントURIを設定
[.env.production]

REACT_APP_API_ENDPOINT_URI = http://<EC2のパブリックDNS、または、Elastic IP>
例
REACT_APP_API_ENDPOINT_URI = http://ec2-00-000-000-00.ap-northeast-1.compute.amazonaws.com

EC2での設定

ディレクトリ構造を作成

・公開用ディレクトリ作成
$ sudo mkdir /var/www/
$ sudo chown -R app:app www
・React+Railsアプリルート
$ mkdir /var/www/app_name/
・Reactアプリを配置するディレクトリ
$ mkdir /var/www/app_name/react_app
・Railsアプリを配置するディレクトリ
$ mkdir /var/www/app_name/rails_app
・nginxログ格納用
$ mkdir /var/www/app_name/nginx_log
・エラーページ格納用
$ mkdir /var/www/app_name/error_page

*chownのコマンド
Linuxコマンド【 chown 】ファイルの所有者やグループを変更 - Linux入門 - Webkaru

Reactアプリの配置

$ sudo su -
$ cd /var/www/app_name/react_app
ビルド用の一時ディレクトリを作成
$ mkdir tmp
$ cd tmp
$ git clone https://github.com/xxxxxxx/yyyyyyyyy.git .

*最後の「. 」でカレントディレクトリにcloneしたアプリの中身が展開される
ビルドを実行

$ npm install
$ npm run build
$ mv build/* ..
$ cd ..
$ rm -rf tmp

Railsアプリの配置

$ sudo su -
$ cd /var/www/app_name/rails_app
$ git clone https://github.com/xxxxxxx/yyyyyyyyy.git .
#最後の「. 」でカレントディレクトリにcloneしたアプリの中身が展開される

gemのインストール

$ bundle install --without test development

DBへの接続設定????????
Rails5.2から追加された credentials.yml.enc のキホン - Qiita

$ vi config/credentials.yml.enc
production:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
$ bin/rails secret
[bash_profile]に上記で表示されたキー文字列を追記
$ vi ~/.bash_profile
$ source ~/.bash_profile
設定がうまくいっていれば、キー文字列が表示される
$ env | grep SECRET_KEY_BASE

データベースの作成

$ bin/rails db:create RAILS_ENV=production
$ bin/rails db:migrate RAILS_ENV=production
*seedを作成する場合
$ bin/rails db:seed RAILS_ENV=production

データベースがdb:dropできない場合
Rails5のproductionでrake db:dropはできない、普通には - Qiita

unicornの設定方法

$ sudo su -
$ cd /var/www/app_name/rails_app
unicornで使うディレクトリ作成
$ mkdir tmp/pids tmp/sockets

設定ファイル作成し、以下を追記

$ vi config/unicorn.conf.rb
 #  unicron.rb
 # set lets
 $worker  = 2
 $timeout = 30
 $app_dir = "/var/www/app_name/rails_app" #-----------railsアプリの場所
 $listen  = File.expand_path 'tmp/sockets/.unicorn.sock', $app_dir
 $pid     = File.expand_path 'tmp/pids/unicorn.pid', $app_dir
 $std_log = File.expand_path 'log/unicorn.log', $app_dir
 
 # set config
 worker_processes  $worker
 working_directory $app_dir
 stderr_path $std_log
 stdout_path $std_log
 timeout $timeout
 listen  $listen
 pid $pid
 
 # loading booster
 preload_app true
 
 # before starting processes
 before_fork do |server, worker|
   defined?(ActiveRecord::Base) and ActiveRecord::Base.connection.disconnect!
   old_pid = "#{server.config[:pid]}.oldbin"
   if old_pid != server.pid
     begin
       Process.kill "QUIT", File.read(old_pid).to_i
     rescue Errno::ENOENT, Errno::ESRCH
     end
   end
 end
 
 # after finishing processes
 after_fork do |server, worker|
   defined?(ActiveRecord::Base) and ActiveRecord::Base.establish_connection
 end

unicorn用起動スクリプト作成

$ vi /etc/init.d/unicorn
 #!/bin/sh
 
 #chkconfig:2345 85 70
 #description:unicorn shell
 
 NAME="Unicorn"
 ENV=production
 
 ROOT_DIR="/var/www/app_name/rails_app" # ----------------railsアプリの場所
 USER="ログインユーザー名" # ---------------ログインユーザー名
 GEMFILE="${ROOT_DIR}/Gemfile"
 PID="${ROOT_DIR}/tmp/pids/unicorn.pid"
 CONF="${ROOT_DIR}/config/unicorn.conf.rb"
 OPTIONS=""
 
 start()
 {
   if [ -e $PID ]; then
     echo "$NAME already started"
     exit 1
   fi
   echo "start $NAME"
   cd $ROOT_DIR
   su - ${USER} -c "cd ${ROOT_RIR} && BUNDLE_GEMFILE=${GEMFILE} bundle exec unicorn -c ${CONF} -E ${ENV} -D ${OPTIONS}"
   status
 }
 
 stop()
 {
   if [ ! -e $PID ]; then
     echo "$NAME not started"
     exit 1
   fi
   echo "stop $NAME"
   kill -QUIT `cat ${PID}`
 }
 
 force_stop()
 {
   if [ ! -e $PID ]; then
     echo "$NAME not started"
     exit 1
   fi
   echo "stop $NAME"
   kill -INT `cat ${PID}`
 }
 
 reload()
 {
   if [ ! -e $PID ]; then
     echo "$NAME not started"
     start
     exit 0
   fi
   echo "reload $NAME"
   kill -HUP `cat ${PID}`
 }
 
 restart()
 {
     stop
     sleep 3
     start
 }
 
 status()
 {
   ps aux | grep unicorn | egrep -v 'grep|start|status'
 }
 
 case "$1" in
   start)
     start
     ;;
   stop)
     stop
     ;;
   force-stop)
     force_stop
     ;;
   reload)
     reload
     ;;
   restart)
     restart
     ;;
  status)
    status
    ;;
   *)
     echo "Syntax Error: release [start|stop|force-stop|reload|restart|status]"
     ;;
 esac

初期設定

$ sudo chmod 755 /etc/init.d/unicorn
起動確認(unicorn masterとかworkerとかが表示されればOK)
$ /etc/init.d/unicorn start
自動起動の設定
$ sudo chkconfig unicorn on
設定確認(例のように表示されればOK)
$ sudo chkconfig unicorn --list
例:unicorn         0:off   1:off   2:on    3:on    4:on    5:on    6:off

*起動スクリプトコマンド

起動 /etc/init.d/unicorn start
停止 /etc/init.d/unicorn stop
強制終了 /etc/init.d/unicorn force-stop
再読込 /etc/init.d/unicorn reload
再起動 /etc/init.d/unicorn restart
ステータス /etc/init.d/unicorn status

*起動しようとしてもUnicorn already startedと表示され、statusを確認しても起動していない場合、pidファイルを削除してから再度起動

$ rm /var/www/ivy_lee_list/rails/tmp/pids/unicorn.pid
$ /etc/init.d/unicorn start

nginxのインストール

$ yum -y install nginx

設定ファイル作成し以下を記述

$ vi /etc/nginx/nginx.conf
 # nginxのworkerプロセスの実行権限のユーザ
 # 初期値はnginx
 #user nginx;
 
 # nginxのworkerプロセスの数
 # 通常はCPUのコア数以下に設定する。
 worker_processes 1;
 
 # masterプロセスのプロセスID保存先
 pid "/var/run/nginx.pid";
 
 events {
  # 最大コネクション数
  # 1つのworkerプロセスが同時に処理できる最大コネクション数を設定
  # 初期値は512
  worker_connections 2048;
 }
 
 http {
  # MIMEタイプの設定
  include /etc/nginx/mime.types;
 
  # レスポンスのデフォルトのMIMEタイプ設定
  # 初期値はtext/plain
  #default_type  application/octet-stream;
 
  # 外部設定ファイル読み込み
  include /etc/nginx/conf.d/*.conf;
 }

アプリ固有の設定ファイル作成し、以下を追記
*作成するファイル名をアプリ名に変更してください/設定ファイルの全ての「app_name、rails_app、react_app」を変更してください

$ vi /etc/nginx/conf.d/app_name.conf
 upstream unicorn {
   server unix:/var/www/app_name/rails_app/tmp/sockets/.unicorn.sock;
 }
 
 server {
   listen 80;
   server_name <EC2インスタンスのElastic IP または、パブリックDNS>;
 
   access_log /var/www/app_name/nginx_log/access.log;
   error_log  /var/www/app_name/nginx_log/error.log;
 
   root /var/www/app_name/react_app;
   try_files $uri/index.html $uri.html $uri @unicorn;
 
   error_page 404 /404.html;
   location = /404.html {
     root /var/www/app_name/error_page;
     internal;
   }
 
   error_page 500 502 503 504 /500.html;
   location = /500.html {
     root /var/www/app_name/error_page;
     internal;
   }
 
   location @unicorn {
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header Host $http_host;
     proxy_pass http://unicorn;
     proxy_intercept_errors on;
   }
 }

エラー用のサンプルページ作成

$ echo 404 Not Found > /var/www/ivy_lee_list/error_page/404.html
$ echo 500 Internal Server Error > /var/www/ivy_lee_list/error_page/500.html

nginxの初期設定

EC2の起動と同時に、Nginxも自動起動させる設定
$ chkconfig nginx on
Nginxを起動
$ /etc/init.d/nginx start