現在、さまざまなAIでアプリが簡単に作成できてしまう時代で、アイデアを形にするといったハードルが低くなっています。こんなのがあれば…で作成している方も多いんじゃないでしょうか。
今回、Vercelで公開したWebアプリを、
「vercel.app のURLではなく、自分の独自ドメインで使いたい」
と思い、僕が設定して動かした手順をまとめています。
この記事でわかること
- Vercelで公開したアプリを独自ドメイン・サブドメインで使う方法
- WordPressが入っているドメインでも問題ない理由
- カラフルボックスでのDNS（CNAME）設定方法
- 403 Forbidden が出た時の原因と解決法
STEP 1｜独自ドメイン・サブドメイン構成を決める
メインドメインとサブドメインの考え方
僕が最初に悩んだのがここです。通常であればドメインを取得しそのドメインにアプリを公開していく手順が一般的なのかもしれませんが、僕自身の状況は以下になっていました。
メインドメイン：https://pixtouch.net/
このドメインがアプリサイトなんですが、WordPressがすでにpixtouch.net に入っている。なので、その下でVercelアプリって動かせるのか？ということでした。
つまりは、独自ドメイン（メイン）のディレクトリ構造で公開するか、それとのメインのサブドメインを作成し公開するかで悩みました。
ディレクトリ構造の場合
https://pixtouch/アプリ名.net
サブドメインの場合
https://アプリ名.pixtouch.net
まず、ここを決める必要があります。
最初は、独自ドメインのディレクトリ構造で管理しようと考えましたが、、、
最終的に、サブドメインで行うことにしました。
理由は以下の説明を見てください↓
DNS設定ではなく、リバースプロキシ or Vercel側の設定が必須。
なぜ DNS だけでは無理か？
DNSは
pixtouch.net→ Aレコード1つwww.pixtouch.net→ CNAME1つ
という ドメイン単位 でしか振り分けできません。
つまり、
/〇〇/だけを Vercel/は WordPress
という パス単位の振り分けは DNS では不可 です。方法論としてWordPress側で「Vercelへプロキシする」仕組みで、カラフルボックス（Apache / Nginx）→ 該当パスだけ Vercel に転送という仕組みになりサーバー側設定が必要（.htaccess or Nginx）。技術的な話をすると、カラフルボックスのような共用サーバーは、セキュリティ上の理由で「特定のフォルダへのアクセスだけをVercelに転送する（リバースプロキシ）」という設定ができない（または非常に難しい）ことがほとんどです。
このような構造でのメリット、デメリット
メリット
ドメインの評価が反映されSEO上は最も強い可能性
サブディレクトリURLが使えるのでブランド的に統一感あり
デメリット
サーバー設定が複雑
トラブル時の切り分けが難しい
本番運用向きではないケースも多い
などあります。
この内容を見て「言っている内容が簡単だな」って思った方はこの方法で作成するのもありかと思いますが、正直詳しくない僕からすると？？？が多いのでこの方法は諦めました。
手っ取り早く現実的な方法で「サブドメイン」にアプリを表示させる方法に決めました。
メリットは
- とにかく簡単にできる触るのは「DNS設定」だけ
- サブドメインは独立しているのでアプリに問題があってもメインドメインに影響がない。トラブル切り分けが簡単。
デメリット
- 1アプリ1ドメイン（サブドメイン）
- アプリが複数ある場合、サブドメインを増やす必要がある
これらのメリット、デメリットはありますが、この構成なら問題なく使え設定も簡単かつ確実な方法なので1ドメイン（1サブドメイン）に1アプリを表示する方法で進めました。
今回の構成（実例）
- メインドメイン
https://pixtouch.net/
→ WordPress（カラフルボックス） - サブドメイン（アプリ用）
https://shamenikki-f.pixtouch.net/
→ Vercelで公開したWebアプリ
ただし新しいアプリを公開したい場合サブドメインを増やしていくということになります。アプリごとにサブドメインは必要になります。
👉 基本は 1アプリ＝1サブドメイン
例：
- アプリA →
a.pixtouch.net - アプリB →
b.pixtouch.net
今回：
- 写メ日記AI →
shamenikki-f.pixtouch.net
STEP 2｜カラフルボックスでサブドメイン取得
カラフルボックス管理画面からcPanelへログインします。詳しくはヘルプサイトで確認ください。
https://help.colorfulbox.jp/article/cpnel-login/
cPanelのドメインを選択。
「新しいドメインを作成する」を選択。
今回はサブドメインなので「test.pixtouch.net」と入力。test部分はアプリ名など好きな名前でOKです。
一覧に追加されていればOKです。僕の場合アプリ名が「写メ日記Ai（Free版）」なので「shamenikki-f」で取得しています。
STEP 3｜カラフルボックスでDNS（CNAME）を手動追加する
カラフルボックス管理画面の「ドメイン」内から「DNSを管理」を選択。
サブドメインはここには表示されないのでメインドメインの「pixtouch.net」を選択し赤枠から編集します。
結論から言うとそれが正常です
👉 「見えなくて正常」なケースが、カラフルボックスでは多いです。
カラフルボックスではサブドメインを追加しても
DNSレコード一覧に表示されないことがある
理由は
👉 内部DNSで自動管理されているため です。
つまり
「確認できない＝失敗」ではありません。
pixtouch.net
→ カラフルボックスでDNS管理サブドメイン（例：
shamenikki-f.pixtouch.net）を作成しかし
👉 DNSレコード一覧に表示されない
これは カラフルボックス仕様として普通のようです。
なぜDNSが見えないのか（仕組み） カラフルボックスの構造サブドメイン作成
↓Webサーバー側で仮想ホストが作られる
DNSゾーンは
でまとめて処理されています。
👉 そのため
個別の サブドメインのA / CNAME が表示されない仕組みです。
メインドメインから「レコードを追加」を選択。
以下の項目を入力します。
| 項目 | 入力内容 |
|---|---|
| タイプ | CNAME |
| 名前 | shamenikki-f |
| 値 | cname.vercel-dns.com （値は上記の入力で問題ないです。後にVercelでドメイン設定したとき指定した値が表示されますが現状は問題ないです） |
| TTL | そのままでOK |
今回の例
名前は shamenikki-f だけでOKです。
❌ shamenikki-f.pixtouch.net
⭕ shamenikki-f
- http / https を入れる
- .pixtouch.net まで書く
- 値を省略する
👉 どれもエラーの原因になります。
入力が完了したら「確認」。
STEP 4｜Vercel側でドメインを追加する
Vercelにログインし対象のプロジェクトを開き「 Domains」をクリックしドメインを追加していきます。
「Add Domain」を選択。
https://は入れずにドメインを正確に入力します。入力したら「Save」。
追加ドメイン
接続先
リダイレクト
成功したらこのような表示になると思います。
「DNS Change Recommended」と教示されていた場合の対処と意味
上記の画像「DNS Change Recommended」と表示されることがありますが結論から言うと今のままでも動作は完全に正常なので変更しなくても大丈夫です。
これは「将来の安定性のためにDNSを書き換えるとより良い」という“推奨”表示です。
順に説明します。
Vercelの表示
DNS Change Recommended
＋
CNAMEName: shamenikki-fValue: a90......................com
これは何かというと…
- Vercelが DNS基盤を段階的に新しい仕組みに移行中
- そのため「新しい専用CNAME値を使うと、将来さらに安定しますよ」という 案内（Warningではない）です。
現在のカラフルボックスで設定したDNS
shamenikki-fCNAMEcname.vercel-dns.com
これは
- ✅ 現在も公式にサポートされている
- ✅ すでにSSLも発行済み
- ✅ 実アクセスも成功している
実際は何も問題は起きていませんのでご安心を。
じゃあ、変えたほうがいいのか？
| 判断軸 | 答え |
|---|---|
| 今すぐ動かす | ❌ 変えなくていい |
| 将来の安定性 | ⭕ 変えたほうがベター |
| 作業難易度 | 低い（1行書き換え） |
| リスク | ほぼなし |
👉 時間があるなら変更推奨
👉 怖ければ放置でもOK
変更手順
変更したい場合は簡単でカラフルボックスの最初に設定したDNS設定で「cname」を書き換えるだけです。
今の👇を
shamenikki-f
CNAME
cname.vercel-dns.com
👇に変更
shamenikki-f
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で公開したアプリを独自ドメインで表示させたい場合参考にしてみてください。コメントも待っています！