目的

AWSのサーバーを利用し、Railsで作成したアプリを公開する。

開発環境

macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0

前提

EC2のRailsが起動している。【AWS】EC2でのデプロイ（EC2のRailsを起動）

手順

はじめに
Nginxの導入
Nginx設定ファイルの編集
Unicornの設定変更
「502 but gateway」の対処法

はじめに

今回はNginxの導入を行っていきます！
Nginxとは、Webサーバーの一種で、ユーザーのリクエストに対して静的コンテンツのみ取り出し処理を行い、動的コンテンツの生成をアプリケーションサーバに依頼する役割があります。

Nginxの導入

今回は、NginxのNginx1というバージョンを導入します。

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-25-189 ~]$ sudo amazon-linux-extras install nginx1

Is this ok [y/d/N]:と出てきたら、yを選択して決定してください。

無事に完了すれば、Nginxがインストールできています。

Nginx設定ファイルの編集

次にNginxが正しく動くように設定します。

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-25-189 ~]$ sudo vim /etc/nginx/conf.d/rails.conf

ターミナル上でファイルを開けたら次のように編集します。

/etc/nginx/conf.d/rails.conf

upstream app_server {
  # Unicornと連携させるための設定
  server unix:/var/www/リポジトリ名/tmp/sockets/unicorn.sock;
}

# {}で囲った部分をブロックと呼ぶ。サーバの設定ができる
server {
  # このプログラムが接続を受け付けるポート番号
  listen 80;
  # 接続を受け付けるリクエストURL ここに書いていないURLではアクセスできない
  server_name Elastic IP;

  # クライアントからアップロードされてくるファイルの容量の上限を2ギガに設定。デフォルトは1メガなので大きめにしておく
  client_max_body_size 2g;

# 接続が来た際のrootディレクトリ
  root /var/www/リポジトリ名/public;

# assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定
  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  try_files $uri/index.html $uri @unicorn;

  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }

  error_page 500 502 503 504 /500.html;
}

入力を終えたら「escキー」→「:wq」の順で実行し、保存します！

続いてNginxの権限を変更します。
下記コマンドでPOSTメソッドでもエラーが出ないようにします。

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-25-189 ~]$ cd /var/lib

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-25-189 lib]$ sudo chmod -R 775 nginx

これで、Nginxの設定が完了しました！
以下のコマンドを実行してNginx設定ファイルを再読み込みして起動します。

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-25-189 lib]$ cd ~

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-25-189 ~]$ sudo systemctl reload nginx

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-25-189 ~]$ sudo systemctl start nginx

Unicornの設定変更

Nginxを介した処理に変更したため、Unicornの設定も修正します。

config/unicorn.rb

#省略

#listen 3000
listen "#{app_path}/tmp/sockets/unicorn.sock"

#省略

編集したら、リモートリポジトリへ「commit→push」します！
次は、GitHubの変更点を本番環境へ反映させましょう。

まずは開発中のアプリケーションに移動します。

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-25-189 ~]$ cd /var/www/開発中のアプリケーション

そしてGitHubの内容をEC2に反映させます。

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-23-189 <レポジトリ名>]$ git pull origin master

次は、Unicornを再起動します。

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ ps aux | grep unicorn

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ kill プロセス番号

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D

ここまでできたら、ブラウザで確認してみます！

「502 but gateway」の対処法

このエラーが出た場合はnginxのlogの確認をし、エラーログを探します！

ターミナル（EC2内で実行）

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$  sudo less /var/log/nginx/error.log

最後に

以上で、Webサーバーの設定は完了です。
次回は自動デプロイです。【AWS】EC2でのデプロイ（自動デプロイ
では。