個人開発をしているWebサービスをNext.jsとRailsで構築している。
で、Next.jsはVercelにRails APIはRenderにそれぞれデプロイしているので、どうやって疎通させたかをメモ書きとして残しておく。
この記事はすでにVercelとRenderへデプロイし終わっている前提で書いているので、まだデプロイできていない場合は以下の記事を参考にデプロイしてみてください。
１：Cloudflareにドメインを追加する
そもそもCloudflareがどんなサービスかというと、
- CDN
- DDoS対策
- DNS管理
- SSL証明書の発行
- などを提供してくれるものだ。
上記の通り、Cloudflareではさまざまなサービスが提供されているが、VercelとRenderにデプロイしたNext.jsとRailsを疎通させるには、そのうちのDNSサービスだけを使えばOK。（ちなみに無料）
Cloudflareアカウントの作成
Cloudflareのアカウントを持っていない場合は、まずアカウントを作成する。
こちらからアクセスして作ってください。
Cloudflareにドメインを追加する
アカウントを作ると以下のような画面に遷移するので、『Add a Site』をクリックしてドメインを追加する。
遷移先でどのプランを使うか聞かれると思うので、お好みでプランを選択すればOK。
２：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
４：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
５：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) からのリクエストが許可される。
おわりに
以上で疎通できるはず。
参考になれば幸いです。
