Cursor実践プロジェクト-16-Cursorで迅速に開発するソーシャルメディア画像ツール：構想から公開までの完全ガイド（四） — ドメイン購入+github+vercel+cloudflare→ウェブサイト公開

プロジェクト説明

ゼロから公開まで：ドメイン + GitHub + Vercel + Cloudflareで、2時間以内にあなたのウェブサイトをインターネット上に公開します。

実施内容：ドメイン選択/紐付け → GitHubへのコードプッシュ → Vercel自動ビルド公開 → DNSとHTTPS設定、一気通貫で完了。

基本コンセプト：コード記述に集中し、その他は自動化パイプラインに任せる。コミット即デプロイ、更新即公開、エラー時はワンクリックでロールバック可能。

最終成果：あなた専用のドメインで、全世界からHTTPS接続可能なオンラインサイト。

所要時間：約2時間、初心者でも対応可能。

成果展示

公開済みサイト：pixtoolkits.com

pixtoolkits.com

事前準備

Cursor
- バージョン：1.3.9
- cursor rules: https://cursorpractice.com/zh/cursor-tutorials/prompts/system-prompts
- agent: claude-4-sonnet-thinking、GTP-5
- project rules: ./cursorpractice-06-10xUse.md
オプション：Gemini CLI
- インストール：npm install -g @gemini-cli/gemini
- 使用方法：gemini --help

この方式を選ぶ理由

各コンポーネントの役割と強み：GitHub（コラボレーションとバージョン管理）、Vercel（ゼロコンフィグデプロイとエッジ機能）、Cloudflare（グローバルDNSとセキュリティ）。
手間要らず：コードをGitHubにプッシュするだけで、自動ビルド・公開される。
コスト削減：三者とも無料枠があり、個人や小規模チームでも利用可能。
高速アクセス：グローバルアクセラレーションで国内外からのアクセスが快適。
セキュア：HTTPS対応、基本的な保護機能が標準装備。
協働容易：変更履歴管理、プレビューURL、問題発生時はワンクリックでロールバック可能。
移行性：ドメインはCloudflare管理なので、後でホスティングプラットフォームを変更しても制約なし。
注意点：
- 初回のドメイン紐付けとSSL証明書発行には数分～数時間かかる場合あり。
- 画像/ページはキャッシュ可能だが、APIやリアルタイムデータはキャッシュ制御に注意。
- 公開後に不具合があれば、直前バージョンに即時ロールバック可能。

全体フロー

ドメイン登録；
GitHubリポジトリ作成
cursorでコード編集、GitHubリポジトリに紐付け・コミット
vercel登録・プロジェクト初期化、GitHubリポジトリ紐付け
ドメイン紐付け、DNS設定、HTTPS証明書自動生成
ブラウザでドメインを開きアクセス

プロジェクト詳細手順

1) ドメイン登録

ドメインサービスは多数のプロバイダが提供、今回はnamesiloを選択：www.namesilo.com/
cursorにプロジェクト機能に基づいたドメイン候補を提案させ、実際に検索して購入可能か確認
pixtoolkits.comが購入可能だったので選択・支払い

2) GitHubリポジトリ作成

GitHub登録
新規リポジトリ作成、右上の+から「New repository」選択
リポジトリ名入力（ドメイン名と同一可）、公開/非公開を選択
リポジトリURLを取得、コピー

3) cursorでコード編集、GitHubリポジトリに紐付け・コミット

gitアイコンから...を選択、「リモート」→「リモートリポジトリを追加」→URL・リポジトリ名入力
認証が必要な場合あり、不明ならcursorに処理させる
紐付け成功後、コードをプッシュ。左ペイン上部に「コミット」、下部にローカルコミット履歴とオレンジの雲マーク（リモートリポジトリバージョン）が表示

4) vercel登録・プロジェクト初期化、GitHubリポジトリ紐付け

vercel登録
ログイン後、プロジェクト作成, 「ADD NEW...」→「Project」
GitHubアカウントと連携、認証済みの場合はスキップ
'Import Git repository'でGitリポジトリを選択、見つからない場合は'Confiure Github App'をクリック
GitHubに移動、setting-Applications-Repository access-で連携するリポジトリを選択
vercelに戻り、リポジトリを選択して'Import'
新規プロジェクト画面でプロジェクト名入力、'Deploy'クリック
デプロイ過程を確認、エラー発生の可能性あり
エラー情報をスクリーンショットし、cursorに修正依頼
修正完了後、cursorにGitコミットを実行させ、自動プッシュ・デプロイを確認。修正後、vercelでデプロイ成功表示。コンソールへ移動

5) ドメイン紐付け、DNS設定、HTTPS証明書自動生成

ドメイン紐付け、'Setting'-'Domains'-'ADD Domain'
ドメイン入力（pixtoolkits.com）、'www.pixtoolkits.com'へのリダイレクトをチェック
SSL証明書未設定の警告表示。cloudflareでの設定が必要
cloudflareに移動、登録後'Accout Home'-'Onboard a domain'クリック
ドメイン入力、DNS設定を手動選択、続行。nameserversアドレスを確認、このアドレスをドメインレジストラに設定
namesiloに戻り、ドメイン管理画面で対応するNameServersを入力。余分なNameServers 3は削除
cloudflareに戻り、しばらくするとドメイン横に緑の'active'表示（DNS解決完了）
vercelに戻り、プロジェクトの赤い警告部分を確認（editはクリックしない）。vercelのデプロイIPをコピーし、cloudflareに設定
cloudflareで'DNS'-'Records'-ドメイン選択・入力・保存
入力完了後の状態
しばらくするとvercelの赤い警告が消え、SSL証明書生成中と表示
最後にcloudflareでアクセスモード変更、'SSL/TLS'-'overview'-'configure'、'FULL(Strict)'に設定

6) ブラウザでドメインを開きアクセス

完了、ブラウザでpixtoolkits.comを開く
以降は機能更新を継続可能。Gitにコードをプッシュするだけで、サイトが自動更新される。

シリーズ