現在、さまざまなAIでアプリが簡単に作成できてしまう時代で、アイデアを形にするといったハードルが低くなっています。こんなのがあれば…で作成している方も多いんじゃないでしょうか。
今回、Vercelで公開したWebアプリを、
「vercel.app のURLではなく、自分の独自ドメインで使いたい」
と思い、僕が設定して動かした手順をまとめています。
この記事でわかること
- Vercelで公開したアプリを独自ドメイン・サブドメインで使う方法
- WordPressが入っているドメインでも問題ない理由
- カラフルボックスでのDNS（CNAME）設定方法
- 403 Forbidden が出た時の原因と解決法
STEP 1｜独自ドメイン・サブドメイン構成を決める
メインドメインとサブドメインの考え方
僕が最初に悩んだのがここです。通常であればドメインを取得しそのドメインにアプリを公開していく手順が一般的なのかもしれませんが、僕自身の状況は以下になっていました。
メインドメイン：https://〇〇.net/
このドメインがアプリサイトなんですが、WordPressがすでに〇〇.net に入っている。なので、その下でVercelアプリって動かせるのか？ということでした。
つまりは、独自ドメイン（メイン）のディレクトリ構造で公開するか、それとのメインのサブドメインを作成し公開するかで悩みました。
ディレクトリ構造の場合
https://〇〇/アプリ名.net
サブドメインの場合
https://アプリ名.〇〇.net
まず、ここを決める必要があります。
最初は、独自ドメインのディレクトリ構造で管理しようと考えましたが、、、
最終的に、サブドメインで行うことにしました。
理由は以下の説明を見てください↓
DNS設定ではなく、リバースプロキシ or Vercel側の設定が必須。
なぜ DNS だけでは無理か？
DNSは
〇〇.net→ Aレコード1つwww.〇〇.net→ CNAME1つ
という ドメイン単位 でしか振り分けできません。
つまり、
/××（ディレクトリ）/だけを Vercel/（トップドメイン）は WordPress
という パス単位の振り分けは DNS では不可 です。方法論としてWordPress側で「Vercelへプロキシする」仕組みで、カラフルボックス（Apache / Nginx）→ 該当パスだけ Vercel に転送という仕組みになりサーバー側設定が必要（.htaccess or Nginx）。技術的な話をすると、カラフルボックスのような共用サーバーは、セキュリティ上の理由で「特定のフォルダへのアクセスだけをVercelに転送する（リバースプロキシ）」という設定ができない（または非常に難しい）ことがほとんどです。
このような構造でのメリット、デメリット
メリット
ドメインの評価が反映されSEO上は最も強い可能性
サブディレクトリURLが使えるのでブランド的に統一感あり
デメリット
サーバー設定が複雑
トラブル時の切り分けが難しい
本番運用向きではないケースも多い
などあります。
この内容を見て「言っている内容が簡単だな」って思った方はこの方法で作成するのもありかと思いますが、正直詳しくない僕からすると？？？が多いのでこの方法は諦めました。
手っ取り早く現実的な方法で「サブドメイン」にアプリを表示させる方法に決めました。
メリットは
- とにかく簡単にできる触るのは「DNS設定」だけ
- サブドメインは独立しているのでアプリに問題があってもメインドメインに影響がない。トラブル切り分けが簡単。
デメリット
- 1アプリ1ドメイン（サブドメイン）
- アプリが複数ある場合、サブドメインを増やす必要がある
これらのメリット、デメリットはありますが、この構成なら問題なく使え設定も簡単かつ確実な方法なので1ドメイン（1サブドメイン）に1アプリを表示する方法で進めました。
今回の構成（実例）
- メインドメイン
https://〇〇.net/
→ WordPress（カラフルボックス） - サブドメイン（アプリ用）
https://アプリ名.〇〇.net/
→ Vercelで公開したWebアプリ
ただし新しいアプリを公開したい場合サブドメインを増やしていくということになります。アプリごとにサブドメインは必要になります。
👉 基本は 1アプリ＝1サブドメイン
例：
- アプリA →
a.〇〇.net - アプリB →
b.〇〇.net
STEP 2｜カラフルボックスでサブドメイン取得
カラフルボックス管理画面からcPanelへログインします。詳しくはヘルプサイトで確認ください。
cPanelのドメインを選択。
「新しいドメインを作成する」を選択。
今回はサブドメインなので「test.〇〇.net」と入力。test部分はアプリ名など好きな名前でOKです。
一覧に追加されていればOKです。僕の場合アプリ名が「写メ日記Ai（Free版）」なので「shamenikki-f」で取得しています。
＊現在上記で作成したアプリは削除しています。
STEP 3｜カラフルボックスでDNS（CNAME）を手動追加する
カラフルボックス管理画面の「ドメイン」内から「DNSを管理」を選択。
サブドメインはここには表示されないのでメインドメインの「pixtouch.net」を選択し赤枠から編集します。
＊現在上記ドメインは商品の販売サイトに変更しています
メインドメインから「レコードを追加」を選択。
以下の項目を入力します。
| 項目 | 入力内容 |
|---|---|
| タイプ | CNAME |
| 名前 | shamenikki-f |
| 値 | cname.vercel-dns.com （値は上記の入力で問題ないです。後にVercelでドメイン設定したとき指定した値が表示されますが現状は問題ないです） |
| TTL | そのままでOK |
入力が完了したら「確認」。
STEP 4｜Vercel側でドメインを追加する
Vercelにログインし対象のプロジェクトを開き「 Domains」をクリックしドメインを追加していきます。
「Add Domain」を選択。
https://は入れずにドメインを正確に入力します。入力したら「Save」。
成功したらこのような表示になると思います。
「DNS Change Recommended」と教示されていた場合の対処と意味
上記の画像「DNS Change Recommended」と表示されることがありますが結論から言うと今のままでも動作は完全に正常なので変更しなくても大丈夫です。
これは「将来の安定性のためにDNSを書き換えるとより良い」という“推奨”表示です。
変更手順
変更したい場合は簡単でカラフルボックスの最初に設定したDNS設定で「cname」を書き換えるだけです。
今の👇を
アプリのドメイン名
CNAME
cname.vercel-dns.com
👇に変更
アプリのドメイン名
CNAME
a90………………com
- 名前：そのまま
- タイプ：CNAME
- TTL：そのまま
- 値だけ差し替え
あとはVercelの画面でリフレッシュ（リロードやキャッシュのクリア）でOKです。
STEP 5｜正しく表示されるか確認する
アプリサイトを開いて正しく表示されていれば完了です！
https://shamenikki-f.pixtouch.net/
*現在このアプリは別の名前運用しています
もし403 Forbidden が表示されていたら
実際にアプリのサイトを開いてみたら
403
Forbidden
Access to this resource on the server is denied!
と表示され「失敗した…？」と思僕自身思ってしまいましたが、403が出る原因は主にこれです
- DNS反映途中
- SSL未発行
- Vercel側のドメイン認識待ち
やることは、ただただ待つだけでしばらくすると表示されました。
STEP 6｜Vercelで301リダイレクトを設定する具体手順
今回の目的はこれだけです。
https://shame-nikki-ai-free.vercel.app/
↓（301）
https://shamenikki-f.pixtouch.net/
✔ WordPress
✔ カラフルボックス
ここら辺は一切触らない 。
VercelでDomainsから対象のドメインを選択し以下の設定でSaveするだけ。
これで完了です。
shame-nikki-ai-free.vercel.app
今後アプリを増やす場合の運用ルール
新しいアプリを追加する場合サブドメインを取得し追加していきます。方法は今の流れを繰り返すだけです。
①サブドメインを決める
②カラフルボックス管理画面の「ドメイン」内から「DNSを管理」を選択し、メインドメインでレコードを追加
| 項目 | 入力内容 |
|---|---|
| タイプ | CNAME |
| 名前 | サブドメインの名前 |
| 値 | cname.vercel-dns.com （値は上記の入力で問題ないです。後にVercelでドメイン設定したとき指定した値が表示されますが現状は問題ないです） |
| TTL | そのままでOK |
④VercelでDomains追加
以上完了します。
まとめ
今回僕の場合、メインドメインにWordpressをインストールしていたので、サブドメインを取得しアプリをセットしていく方法にしました。複雑そうだけど実際は、めちゃくちゃ簡単なのでVercelで公開したアプリを独自ドメインで表示させたい場合参考にしてみてください。コメントも待っています！