ローカルで作成したサイトをGitHubへPushし、Vercelへデプロイして、XServerで管理しているドメインのサブドメインで公開する手順です。
1. GitHubにリポジトリを作成
GitHubで新しいリポジトリを作成します。
既存のローカルサイトを登録する場合は、READMEなどは作成せず、空のリポジトリとして作成します。
.gitignoreは使用する技術に合わせて選ぶ
新しくGitHub上でプロジェクトを始める場合は、使用する技術に合った.gitignoreテンプレートを選びます。不要な依存関係、ビルド結果、一時ファイルなどをGitの管理対象から除外できます。
| 使用する技術・環境 | 選択する.gitignore |
主に除外されるもの |
|---|---|---|
| Node.js、Next.js、React、Vue | Node |
node_modules/、.next/、dist/、.envなど |
| C#、ASP.NET Core、Visual Studio | VisualStudio |
bin/、obj/、.vs/、ユーザー固有設定など |
| Python、Django、Flask | Python |
__pycache__/、.venv/、Pythonのビルド結果など |
| Unity | Unity |
Library/、Temp/、Logs/、生成されたビルドファイルなど |
| Terraform | Terraform |
.terraform/、ステートファイル、秘密情報を含む可能性がある変数ファイルなど |
例えば、Next.jsやReactでサイトを作る場合はNodeを選択します。これにより、容量の大きいnode_modules/がGitHubへ登録されるのを防げます。
ただし、すでにローカルでGit管理しているプロジェクトをGitHubへ登録する場合は、GitHub側ではREADME、.gitignore、ライセンスを追加せず、空のリポジトリとして作成します。既存プロジェクト内の.gitignoreをそのまま利用してください。
リポジトリ作成後の確認場所
作成後は、同じ「Create a new repository」画面を再表示することはできません。各設定をリポジトリ内で個別に確認します。
- GitHub右上のプロフィール画像 →「Your repositories」
- 作成した
リポジトリを開く
確認場所は次のとおりです。
| 作成時の項目 | 作成後の確認場所 |
|---|---|
| Owner／Repository name | ページ上部の（username） / （リポジトリ名） |
| Description | リポジトリトップ右側の「About」 |
| Public／Private | リポジトリ名付近の表示、または「Settings」→「General」→「Danger Zone」 |
| README | 「Code」タブのファイル一覧にあるREADME.md |
.gitignore |
「Code」タブのファイル一覧にある.gitignore |
| License | 「Code」タブのLICENSEファイル、または右側の「About」 |
特に.gitignoreで「Node」を選んだか確認したい場合は、リポジトリの「Code」タブで.gitignoreを開き、次の記述があるか確認します。
2. ローカルサイトをGitHubへPush
ローカルサイトのフォルダで以下を実行します。
git init git add . git commit -m "Initial commit" git branch -M main git remote add origin https://github.com/ユーザー名/リポジトリ名.git git push -u origin main
すでにGit管理されている場合は、必要に応じて以下で現在の状態を確認します。
git status git remote -v
3. VercelにGitHubリポジトリを登録
Vercelにログインし、以下の順に進みます。
Add New
↓
Project
↓
GitHubのリポジトリを選択
↓
Import
↓
Deployデプロイ完了後、Vercelから発行されたURLでサイトが正常に表示されることを確認します。
https://xxxxx.vercel.app4. Vercelにサブドメインを登録
Vercelの対象プロジェクトから以下を開きます。
Settings
↓
Domains公開したいサブドメインを追加します。
例：
sample.example.com追加すると、Vercelに必要なDNS設定が表示されます。
5. XServerにDNSレコードを追加
XServerのサーバーパネルから、対象ドメインの「DNSレコード設定」を開きます。
Vercelから指定された内容に従って、CNAMEレコードを追加します。
例：
ホスト：sample
種別 ：CNAME
内容 ：Vercelから指定された値
TTL ：そのまま※CNAMEの「内容」は、Vercelの画面に表示されている値を使用します。
6. Vercelでドメイン設定を確認
Vercelの以下の画面に戻ります。
Project
↓
Settings
↓
Domains設定したサブドメインが正常な状態になっていることを確認します。
DNS設定の反映には時間がかかる場合があります。
反映後、設定したURLへアクセスします。
https://sample.example.comサイトが表示されれば完了です。
7. サイトを更新する場合
初回設定後は、ローカルサイトを修正してGitHubへPushするだけです。
git add .
git commit -m "Update site"
git pushGitHubへのPushをVercelが検知し、自動的に再デプロイします。
全体の流れ
ローカルサイト
↓ git push
GitHub
↓
Vercel
↓
XServerのDNS（CNAME）
↓
サブドメインで公開一度設定してしまえば、2回目以降は基本的に「修正 → GitHubへPush」だけでサイトを更新できます。
コメント