Next.jsとRailsで構築したアプリをVercel&Renderへデプロイし疎通させる

Engineering
この記事を書いた人

PharmaXというオンライン薬局のスタートアップで薬剤師・エンジニアとして働いています。Rails・React・TypeScriptなどを書きます。英語が得意でTOEIC900点・通訳案内士資格取得。主に薬剤師の働き方やプログラミング、英語学習について書きます。当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
>> 詳しいプロフィール

Tomoyuki Katoをフォローする

 

個人開発をしているWebサービスをNext.jsとRailsで構築している。

 

で、Next.jsはVercelにRails APIはRenderにそれぞれデプロイしているので、どうやって疎通させたかをメモ書きとして残しておく。

 

この記事はすでにVercelとRenderへデプロイし終わっている前提で書いているので、まだデプロイできていない場合は以下の記事を参考にデプロイしてみてください。

Vercelへ独自ドメインを使ってデプロイする
個人開発のアプリを独自ドメインでVercelへデプロイしたのでメモしておく。 Projectを作成する まずVercelのダッシュボードへ移動する。 1:Create a New Projectをクリッ
Dockerで構築したRails APIをRenderへデプロイする
個人開発をしているDockerで構築したRails APIをRenderへデプロイしたのでその時のメモ書き。 データベースを作成 まずはデータベースの作成から。 まずはダッシュボードに移動して、Postgr

 

1:Cloudflareにドメインを追加する

 

そもそもCloudflareがどんなサービスかというと、

  • CDN
  • DDoS対策
  • DNS管理
  • SSL証明書の発行
  • などを提供してくれるものだ。

 

上記の通り、Cloudflareではさまざまなサービスが提供されているが、VercelとRenderにデプロイしたNext.jsとRailsを疎通させるには、そのうちのDNSサービスだけを使えばOK。(ちなみに無料)

 

Cloudflareアカウントの作成

Cloudflareのアカウントを持っていない場合は、まずアカウントを作成する。

こちらからアクセスして作ってください。

 

Cloudflareにドメインを追加する

アカウントを作ると以下のような画面に遷移するので、『Add a Site』をクリックしてドメインを追加する。

 

 

遷移先でどのプランを使うか聞かれると思うので、お好みでプランを選択すればOK。

 

2:DNSのネームサーバーをCloudflareのものに設定する

 

Cloudflareにドメインを追加したら、DNSのネームサーバーをCloudflareのものにする。

 

ドメインをどこで取得したかによるが、お名前.comやムームードメインで取得したドメインであれば、それらのサイトの管理画面でネームサーバーを設定できるはずなので、そのネームサーバーの設定画面からCloudflareのネームサーバーを指定する。

 

Cloudflareのネームサーバーは、サイドバーのDNSをクリックした遷移先のページに閲覧できる。

 

なので、この2つのネームサーバーの値をコピーし、ドメインを取得したサイトのネームサーバー設定画面でコピーしたネームサーバーを設定すれば良い。

 

3:Next.js にアクセスするためのDNS レコードを作成

 

次にNext.jsにアクセスするためのDNSレコードを作成する。

 

サイドバーのDNSをクリックすると、DNSレコードを作る画面に遷移するので、『Add record』をクリック。

 

 

Add recordをクリックしたら、Vercel でデプロイされたアプリのドメイン名を指定する。

例えば、www.example.com を Next.js アプリに向ける場合、次のように設定すればOK。

 

<Aレコードの設定>

  • Type: A
  • Name: example.com
  • Content: example.comのIPアドレス

*AレコードはCloudflareにドメインを登録した時点で自動で登録されているはず

 

<CNAMEの設定>

  • Type: CNAME
  • Name: www
  • Content: cname.vercel-dns.com

 

参考:https://vercel.com/guides/using-cloudflare-with-vercel

 

4:Rails アプリにアクセスするための DNS レコードを作成

 

同様に、Rails アプリにアクセスするための CNAME レコードを作成する。

 

サイドバーのDNSをクリックすると、DNSレコードを作る画面に遷移するので、『Add record』をクリック。

 

Add recordをクリックしたら、Renderでデプロイされたアプリのドメイン名を指定する。

例えば、api.example.com を Railsアプリに向ける場合、次のように設定すればOK。

 

<CNAMEの設定>

  • Type: CNAME
  • Name: api
  • Content: your-rails-app.onrender.com

 

5:Next.jsの環境変数を設定

 

Next.jsからRails API を叩く場合は、環境変数にRails APIのURLを設定しておくと便利だ。

 

僕の場合はAPIを叩くのにaxiosを使っているので、以下のようにAPIを呼び出すようにしている。

 

NEXT_PUBLIC_API_URLという名前の変数にhttps://api.example.com のように値を設定しておくと、process.env.NEXT_PUBLIC_API_URLと記述すれば、APIのベースURLを呼び出すことができる。

 

import applyCaseMiddleware from "axios-case-converter";
import axios from "axios";

const options = {
  ignoreHeaders: true,
};

const axiosApi = applyCaseMiddleware(
  axios.create({
    baseURL: process.env.NEXT_PUBLIC_API_URL,
  }),
  options
);

export default axiosApi;

 

なので、このように実装する場合は、Vercel の環境変数設定で、 NEXT_PUBLIC_API_URL という名前の変数に https://api.example.com のような値を設定しなければならない。

 

6:RailsのCORSを設定

 

次にRails アプリで CORS (Cross-Origin Resource Sharing) を設定して、Next.js アプリからのリクエストを許可する必要がある。

 

Rails の cors.rb ファイルに以下のようなコードを追加する。

#
# cors.rb
#
config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://www.example.com' # Next.js アプリの URL を指定
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
end

 

この設定により、https://www.example.com`(Next.js アプリの URL) からのリクエストが許可される。

 

おわりに

以上で疎通できるはず。

参考になれば幸いです。