はじめに

こんにちは、遠藤太一です。
先日、個人のポートフォリオサイトを大型アップデートし、ついに独自ドメインを取得しました！

今回は、この1つの独自ドメインを使って、

「ポートフォリオサイト（Vercel）」
「自宅サーバー（Cloudflare Tunnel）」

この2つを共存させる**「ハイブリッド構成」**を構築しました。
「Webサイトは安定したホスティングサービスに置きたいけど、重たい処理や自分用ツールは自宅のPCで動かしたい…」
そんなワガママな要望を叶える、個人開発者にとって「最強」とも言える構成です。

初心者の方にも分かるように、基本の概念から技術的な裏側まで詳しく解説します。

🏗️ 構成の概要（初心者向け）

「独自ドメイン」と「サーバー」の関係

まず、今回やっていることを「現実世界」に例えてみましょう。

独自ドメイン (example.com) = 「表札（住所）」
Vercel = 「最新設備のタワーマンション」（ポートフォリオ用）
自宅サーバー = 「実家の作業部屋」（自分用ツール、NAS用）

通常、1つの住所には1つの家しか建ちません。
しかし、「DNS（住所録）」 をうまく設定することで、
「表玄関（Webサイト） はタワマンへ、裏口（自分用ツール） は実家の作業部屋へ案内する」
ということが可能になります。

これを実現するのが、Cloudflare です。

目指すゴール

メインのURL (https://example.com) にアクセス → Vercel につながる。
サブドメイン (https://home.example.com) にアクセス → 自宅サーバー につながる。

イメージ図

🛠️ 実践編：設定手順

ここからは実際の設定手順です。
※セキュリティのため、ドメイン名は example.com としています。ご自身のドメインに置き換えて設定してください。

前提

独自ドメインを取得済みであること。
ドメインのネームサーバー（NS）を Cloudflare に設定していること。

STEP 1. メインサイト (Vercel) の紐付け

まずは「表玄関」であるポートフォリオサイトの設定です。

1-1. Vercel側での設定

Vercelのダッシュボードで対象のプロジェクトを開きます。
Settings > Domains を開き、取得したドメイン（例: example.com）を入力して Add します。
Vercelから「Cloudflareにこの設定を追加してね」という値が表示されます。

1-2. Cloudflare側でのDNS設定

Cloudflareのダッシュボードを開き、DNS > Records に進みます。
以下の2つのレコードを追加します。

Type	Name	Content / Target	Proxy status	解説
A	`@`	`76.76.21.21`	DNS Only (灰色)	ドメイン本体用。Vercelの固定IPです。
CNAME	`www`	`cname.vercel-dns.com`	DNS Only (灰色)	`www`付き用。Vercelへの転送用です。

⚠️ 重要ポイント：Proxy Status（雲のアイコン）
Vercelと連携する場合、ここを 「DNS Only（灰色の雲）」 にするのが鉄則です。

Proxied (オレンジ): CloudflareのCDNを通す設定。

DNS Only (灰色): Cloudflareを通さず、直接Vercelに繋ぐ設定。

Vercelは標準で高性能なCDNやSSL機能を持っているため、Cloudflareと機能が重複してエラーになるのを防ぐため、ここでは「DNS機能だけ」を使います。

STEP 2. サブドメイン (自宅サーバー) の紐付け

次は「裏口」、自宅サーバーの設定です。
ここでは Cloudflare Tunnel という技術を使います。これを使うと、自宅のルーターで「ポート開放」をする必要がありません。 非常に安全です。

2-1. Cloudflare Zero Trustでの設定

Cloudflareの左メニューから Zero Trust ダッシュボードを開きます。
Networks > Tunnels を選択し、自宅PCで稼働させているTunnelの設定画面 (Configure) を開きます。
Public Hostname タブを選び、Add a public hostname をクリックします。

2-2. ホスト名の追加

以下のように入力します。

Subdomain: home (または n8n など、用途に合わせて自由に)
Domain: example.com (リストから選択)
Service:
- Type: HTTP
- URL: localhost:5678

📝 設定の読み解き方

「home.example.com というアクセスが来たら…」

「このTunnelが動いているPCの中にある localhost:5678 (n8nなどが動いているポート) に転送してね」
という意味になります。

保存すると、自動的にDNSレコード一覧に CNAME が追加されます。
こちらの Proxy status は自動的に 「Proxied (オレンジ色)」 になります。これは正常です（TunnelはCloudflareのネットワークを経由するため）。

🔍 技術解説（中級者以上向け）

なぜこの構成が「最強」なのか、技術的な視点で掘り下げます。

1. SSL/TLS証明書の管理が楽すぎる

通常、自宅サーバーをhttps化しようとすると、Let's Encryptなどで証明書を取得・更新する手間が発生します。
しかしこの構成なら：

メイン (example.com) → Vercelが自動でSSL化。
サブ (home.example.com) → Cloudflareのエッジ証明書で自動SSL化。

つまり、サーバー側で証明書の設定を一切しなくていいのです。これだけで採用する価値があります。

2. 自宅側のセキュリティ (Outbound Only)

Cloudflare Tunnelは、自宅サーバーからCloudflareへ向かって「内側から外側へ」接続を開始します（Outbound接続）。
外部からのアクセス（Inbound）を待ち受ける必要がないため、ファイアウォールやルーターのポートを一切開ける必要がありません。
自宅のネットワークに穴を開けずに外部公開できるため、セキュリティリスクを最小限に抑えられます。

3. "Deceptive site ahead" への対処

ドメインを取得した直後や、設定変更直後にブラウザでアクセスすると、真っ赤な画面で「危険なサイト」と警告されることがあります。
これは、SSL証明書の発行が間に合っていない場合や、Googleのクローラーがまだ安全性を確認できていない場合に発生する「一時的なエラー」です。
設定が間違っていなければ、数時間〜1日待つだけで自然に解消します。焦らず待ちましょう。

まとめ

接続先	URLの例	ホスト	特徴
メイン	`https://example.com`	Vercel	世界中どこからでも爆速。ポートフォリオやブログなど、常に見せたいものに最適。
サブ	`https://home.example.com`	自宅	ハイスペックPC使い放題。AI処理、自動化ツール(n8n)、NASなど、リソースを使いたいものに最適。

独自ドメインを1つ持っているだけで、このように「表の顔」と「裏の基地」を自在に使い分けることができます。
Vercelの無料枠とCloudflareの無料枠だけで構築できるこの構成、個人開発者には本当におすすめです！

関連リンク

今回のポートフォリオサイト (Taichi Endoh) ※実際の動作デモです
前回の記事：Cloudflare Tunnelの導入方法