Codexで作成したサイトをGitHub・Vercel・XServerで公開する手順【初心者向け】

この記事で行うこと

この記事では、CodexなどのAIコーディングツールで作成したWebサイトを、GitHubで管理し、Vercelへデプロイして公開するまでの手順を解説します。

さらに、XServerで管理している独自ドメインのサブドメインをVercelへ接続する方法も紹介します。

今回は以下の構成を例に進めます。

項目	例
GitHub Repository	sample-site
Vercel Project	sample-site
公開URL	sample.hissori.com

全体の流れは次のとおりです。

① GitHubにリポジトリを作成
② ローカル環境を準備
③ Codexでサイトを作成
④ GitHubへpush
⑤ Vercelでプロジェクト作成
⑥ GitHub連携設定
⑦ XServerでDNS設定
⑧ Vercelへ独自ドメイン追加
⑨ 公開確認

事前準備

作業前に以下を準備しておきます。

GitHubアカウント
Vercelアカウント
XServer契約済みドメイン
GitがインストールされたPC
Visual Studio Code
CodexなどのAIコーディングツール

なお、個人開発や小規模サイトであれば、GitHubとVercelは無料プランでも十分利用できます。

GitHubでリポジトリを作成する

まずはGitHub上にリポジトリを作成します。

GitHubへログインします。

GitHub
→ New

以下を入力します。

項目	設定値
Repository name	sample-site
Visibility	Private

開発途中のソースや設定情報が公開されることを防ぐため、公開前はPrivateがおすすめです。

作成後、リポジトリURLを控えておきます。

例

https://github.com/ユーザー名/sample-site.git

ローカル環境を準備する

ローカル環境の準備方法は主に2通りあります。

方法1：GitHubからcloneする

PowerShellを起動します。

cd C:\work
git clone https://github.com/ユーザー名/sample-site.git
cd sample-site

方法2：先にフォルダを作成する

Codexを利用する場合はこちらの方法もよく使われます。

mkdir sample-site
cd sample-site

サイト作成後にGit管理を開始します。

git init
git remote add origin https://github.com/ユーザー名/sample-site.git

どちらの方法でも問題ありません。

Codexでサイトを作成する

Visual Studio Codeでフォルダを開きます。

code .

Codexへサイト作成を依頼します。

例

Next.jsで企業向けランディングページを作成してください。
レスポンシブ対応。
問い合わせフォーム付き。

生成されたファイルはGit管理対象となります。

sample-site
├─ app
├─ components
├─ public
├─ package.json
└─ README.md

作成後はローカルで動作確認しておきます。

npm install
npm run dev

.gitignoreを確認する

Next.jsでは以下のファイルやフォルダは通常Git管理しません。

node_modules
.next
.env
.env.local

通常はプロジェクト作成時に自動生成される .gitignore を利用すれば問題ありません。

誤って .env をGitHubへ公開すると、APIキーや接続情報が漏洩する可能性があるため注意してください。

GitHubへpushする

変更内容を確認します。

git status

ファイルを追加します。

git add .

コミットします。

git commit -m "initial commit"

初回のみmainブランチを作成します。

git branch -M main

GitHubへpushします。

git push -u origin main

2回目以降は以下のみで問題ありません。

git push

GitHub上でファイルが確認できれば成功です。

VercelとGitHubを連携する

Vercelへログインします。

初回利用時はGitHub連携を行います。

Continue with GitHub
↓
Install Vercel
↓
Authorize

GitHubへのアクセス許可を行います。

VercelはGitHubと連携することで、GitHubへpushしたタイミングで自動的にサイトを更新できるようになります。

Vercelでプロジェクトを作成する

Vercelへログイン後、以下を開きます。

Add New
→ Project

GitHubリポジトリ一覧が表示されます。

対象リポジトリを選択します。

sample-site

「Import」をクリックします。

通常はフレームワークが自動判定されます。

例えばNext.jsの場合は自動的にNext.jsとして認識されます。

Framework Preset
→ Auto Detected

Next.jsであれば通常は設定変更不要です。

設定を確認後、「Deploy」をクリックします。

デプロイ完了後、以下のようなURLが発行されます。

https://sample-site.vercel.app

まずはこちらで表示確認を行います。

GitHubへpushすると自動公開される仕組み

VercelとGitHubを連携すると、GitHubへpushするだけでサイトが更新されます。

PC
 ↓ git push

GitHub
 ↓ 自動連携

Vercel
 ↓ 自動ビルド

公開サイト

初回設定後は、基本的にGitHubへpushするだけで公開作業が完了します。

Vercelのプロジェクト名を確認する

必要に応じてプロジェクト名を変更します。

Project
→ Settings

Project Nameを確認します。

sample-site

サイト名に合わせて変更しても問題ありません。

Vercelへ独自ドメインを追加する

プロジェクトを開きます。

Project
→ Settings
→ Domains

以下を入力します。

sample.hissori.com

追加します。

Add

Vercel側にドメインを登録すると、必要なDNS設定内容が表示されます。

今回のサブドメイン運用では、一般的に以下のようなCNAME設定になります。

cname.vercel-dns.com

XServerでDNS設定を行う

XServerへログインします。

※アカウント画面ではなくサーバーパネルを利用します。

サーバーパネル
→ ドメイン
→ DNSレコード設定

「DNSレコード追加」をクリックします。

以下を入力します。

項目	設定値
ホスト名	sample
種別	CNAME
内容	cname.vercel-dns.com
TTL	3600
優先度	空欄

入力後、

確認画面へ進む
↓
追加する

を実行します。

DNS反映を確認する

DNSは即時反映されない場合があります。

一般的な目安は以下です。

時間	状況
数分	最速ケース
30分～1時間	一般的
数時間	たまにある
最大24時間	まれに発生

反映状況は以下で確認できます。

nslookup sample.hissori.com

またはDNS確認サイトを利用しても確認できます。

設定直後に接続できなくても慌てる必要はありません。

Vercelの状態を確認する

VercelのDomains画面を確認します。

以下の状態になれば設定完了です。

Valid Configuration

Vercelが自動的にSSL証明書を発行するため、HTTPSも利用できます。

公開確認を行う

ブラウザでアクセスします。

https://sample.hissori.com

以下を確認します。

ページが表示される
HTTPSでアクセスできる
SSL警告が出ない
Vercel側が「Valid Configuration」になっている

GitHubへpushしたら自動公開される

初回設定後は非常に簡単です。

サイトを修正したら以下を実行します。

git add .
git commit -m "update"
git push

GitHubへpushされると、Vercelが自動的にビルドを開始します。

数十秒〜数分後には本番サイトへ反映されます。

よくあるトラブル

Vercelでドメインエラーになる

DNS設定を確認します。

ホスト名：sample
種別：CNAME
内容：cname.vercel-dns.com

が正しく設定されているか確認してください。

サイトが表示されない

DNS反映待ちの場合があります。

数十分〜数時間程度待ってから再度確認してください。

GitHubへpushしたのに反映されない

以下を確認します。

Project
→ Deployments

ビルドエラーが発生している可能性があります。

ビルドエラーになる

以下を確認します。

Project
→ Deployments
→ Build Logs

よくある原因は次のとおりです。

ESLintエラー
TypeScriptエラー
環境変数未設定
package.jsonの不整合
Node.jsバージョンの違い

エラーログを確認すると原因を特定しやすくなります。

公開後に最低限やっておきたい設定

サイト公開後は以下の設定もおすすめです。

Google Search Console登録
Google Analytics登録
sitemap.xml確認
robots.txt確認
OGP設定
favicon設定

これらを設定しておくと、検索エンジンへの登録やアクセス解析が行いやすくなります。

まとめ

Codexで作成したサイトは、GitHubとVercelを利用することで比較的簡単に公開できます。

流れを整理すると以下のとおりです。

GitHubでリポジトリ作成
↓
ローカル環境準備
↓
Codexでサイト作成
↓
GitHubへpush
↓
Vercelへデプロイ
↓
独自ドメイン追加
↓
XServerでDNS設定
↓
公開完了

一度この流れを構築しておけば、次回以降はGitHubへpushするだけでサイト更新が可能になります。

個人開発や小規模サイトとの相性もよく、運用負荷を抑えながら公開できる構成です。