Next.js + Rails プロジェクトのデプロイ手順

5 min read読了の目安(約4500字

フロントエンド Next.js + バックエンド Rails のデプロイ手順を整理します。

前提

こちらの手順に従い、開発環境を構築していることを前提とします。

https://zenn.dev/kei178/articles/43172ba33eece4

方針

  • Next.js は Vercel にデプロイします。
  • Rails は Heroku にデプロイします。
  • MySQL は Amazon RDS MySQL を使います(理由はこちら
  • Redis は Heroku アドオンの Redis To Go を使います。

予算感

小規模な立ち上げを前提とすると、予算感はざっくり次の通りです。外貨換算は $1 = ¥108 をベースに細かい端数は丸めています。

サービス タイプ 月額($) 月額(¥)
Next.js Hobby 無料 ¥0
Heroku サーバー Hobby $7 ¥750
Heroku ワーカー Hobby $7 ¥750
RDS MySQL db.t3.micro $15 ¥1,600
Redis To Go nano 無料 ¥0
合計 $29 ¥3,100
  • 商用利用の場合は、Next.js の Pro プラン($20/月)を使う必要があります。

1. Amazon RDS MySQL のセットアップ

Heroku アドオンの ClearDB や Postgres を使う場合、こちらの手順は不要です。

AWS RDS のコンソールからデータベースを作成します。

リージョンは「米国東部 (バージニア北部)us-east-1」を選びましょう。これは Heroku のサーバーからアクセスする際のレイテンシーを最小限にするためです。詳細は以下の記事をご参照ください:

https://engineer.crowdworks.jp/entry/2017/08/03/111813#MySQLはAWSのバージニアリージョンのRDSを利用

また、Heroku のアドオンを導入しない限り、VPC へのアクセス IP 制限ができないので、DB のユーザー名とパスワードは複雑なものにしておきましょう。

2. Rails を Heroku にデプロイ

heroku.yml を使って Rails アプリを Heroku にデプロイします。

heroku.yml の作成

heroku.yml を作成します。

project-backend/heroku.yml
build:
  docker:
    web: Dockerfile
    worker: Dockerfile

release:
  image: web
  command:
    - bundle exec rails db:migrate 2>/dev/null || bundle exec rails db:create db:migrate db:seed

run:
  web: bundle exec rails s -p $PORT -b '0.0.0.0'
  worker: bundle exec sidekiq -C config/sidekiq.yml
  • ワーカーが不要な場合は、worker の部分を削除してください。

AWS: CA 証明書のダウンロード

AWS RDS に SSL モードで接続するために CA 証明書をダウンロードして、Rails アプリのルート層に保存します。

cd project-backend
curl https://s3.amazonaws.com/rds-downloads/rds-combined-ca-bundle.pem > ./amazon-rds-ca-cert.pem

Heroku CLI のインストール

https://devcenter.heroku.com/articles/heroku-cli

Heroku CLI が未インストールの場合、次のコマンドでインストールします。

brew tap heroku/brew && brew install heroku

production.rb

必要に応じて production.rb を更新します。

project-backend/environments/production.rb
+  config.hosts << ENV['BACKEND_HOST']

Heroku のデプロイ準備

Heroku アプリの設定

Heroku CLI でアプリを作成します。

heroku apps:create project-backend

コンテナとしてデプロイに変更します。

heroku stack:set container --app project-backend

Heroku git remote の名前を変更します。

git remote rename heroku backend

Redis の設定

Redis は Heroku アドオンの Redis To Go を使います。nano プランなら無料で使えます。

heroku addons:create redistogo:nano

環境変数の設定

必要な環境変数を設定します。(Heroku の管理画面からでも設定できます。)

heroku config:set RACK_ENV="production" RAILS_ENV="production" RAILS_LOG_TO_STDOUT="true" RAILS_MASTER_KEY="your-master-key"

SECRET_KEY_BASE は Rails コンソールから確認できます。

rails c
> Rails.application.credentials.secret_key_base
heroku config:set SECRET_KEY_BASE="your-secret-key-base"

AWS RDS の username password hostname dbname を含めた DATABASE_URL を設定します。

heroku config:set DATABASE_URL="mysql2://your-username:your-password@your-hostname/your-dbname?sslca=amazon-rds-ca-cert.pem&sslmode=require"

Heroku 管理画面からアドオン Redis To Go の URL を確認し、REDIS_URL として設定します。

heroku config:set REDIS_URL="your-redis-to-go-url"

BACKEND_HOST に Heroku で生成される URL を設定します。

heroku config:set BACKEND_HOST="project-backend.herokuapp.com"

CORS_ORIGINS として Vercel のサイト(Next.js)に適用するドメインを設定します。ここでは example.com とします。

heroku config:set CORS_ORIGINS="example.com"

デプロイコマンド

次のコマンドで project-backend ディレクトリのものが Heroku にデプロイされます。

git subtree push --prefix project-backend backend main

3. Next.js を Vercel にデプロイ

https://nextjs.org/docs/deployment

Next.js アプリを Vercel にデプロイします。

GitHub リポジトリの作成

GitHub に frontend 用の新しいリポジトリの作成を作成します。ここでは project-frontend という名前にします。

git remote の追加

作成したリポジトリを git remote に追加します。

git remote add frontend https://github.com/your-id/project-frontend.git

GitHub と Vercel の連携

Vercel の管理画面にログインし、「New Project」から frontend 用の新しいリポジトリを追加します。

環境変数 NEXT_PUBLIC_BACKEND_URL として Heroku にデプロイした Rails アプリの URL を設定します。

デプロイコマンド

次のコマンドで project-frontend ディレクトリのものが Vercel にデプロイされます。

git subtree push --prefix project-frontend frontend main