Next.js + Rails プロジェクトのデプロイ手順
フロントエンド Next.js + バックエンド Rails のデプロイ手順を整理します。
前提
こちらの手順に従い、開発環境を構築していることを前提とします。
方針
- 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 のサーバーからアクセスする際のレイテンシーを最小限にするためです。詳細は以下の記事をご参照ください：
また、Heroku のアドオンを導入しない限り、VPC へのアクセス IP 制限ができないので、DB のユーザー名とパスワードは複雑なものにしておきましょう。
2. Rails を Heroku にデプロイ
heroku.yml を使って Rails アプリを Heroku にデプロイします。
heroku.yml の作成
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 のインストール
Heroku CLI が未インストールの場合、次のコマンドでインストールします。
brew tap heroku/brew && brew install heroku
production.rb
必要に応じて 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 にデプロイ
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
Discussion