Lecture 05: Free Web Hosting with Vercel, CI/CD Hands-on & Mobile App Experience
← AI駆動趣味開発講座：まとめページに戻る | ← 第四講へ
はじめに：手元のコードを世界中へ無料Web公開しよう！
前回の 【第四講】 では、GitHub上でリポジトリを作成し、手元のPC（VS Code）へクローンして、変更をクラウドへ送り込む Push と、クラウドの変更を手元に取り込む Pull の基本サイクルをマスターしました。
今回お届けする 【第五講】 は、「第二部：Git / GitHub 管理と Vercel によるホスティング公開編」の真のクライマックス です！
クラウドホスティングプラットフォーム 「Vercel（バーセル）」 を活用し、手元のPCの中でしか動いていなかったWebアプリを、完全無料でインターネット上の世界中へ公開 します！
さらに、現代のWeb開発で標準となっている 「手元のGit Pushと世界公開が直結する自動デプロイ（CI/CD）」 や、スマホのホーム画面に追加してアドレスバーを消し、まるでApp Storeから落とした本物のスマホアプリのように使いこなすプロ技、そして将来のステップアップ先としての PWA（Progressive Web Apps） の選択肢まで一気にマスターしていきましょう！
【極めて重要な大前提：趣味開発ルール】
本連載の「コードを読まない・AIに実装を委ねる」スタイルは、あくまで自分や身近な人のためだけに作る個人の趣味開発・プロトタイプ限定のルールです。
実務・業務の開発現場において、コードや変更履歴（コミットログ）の中身を理解・検証しないままAI生成コードを放置することは、極めて不誠実であり、重大な障害や情報漏えいを引き起こす無責任な行為です。 業務開発に携わる際は、必ず変更内容の意図とリスクをレビューした上で活用してください。
本講で体験する全体フロー
今回は、世界中の開発者が利用するモダンな公開フローを体験します：
【ステップ1〜2：事前準備】
① Vercelの仕組みを理解する（なぜ無料・サーバーレスで最強なのか？）
② Vercelの無料アカウントを作成 ＆ GitHubと連携認可
│
▼
【ステップ3：初回デプロイ】
③ リポジトリ一覧からデプロイしたいプロジェクト（demo）をインポート
④ 設定を確認して「Deploy」ボタンをクリック！
⑤ 数十秒でビルド完了！世界中どこからでも見られる本番URLが即時発行！
│
▼
【ステップ4：スマホ実機で開く ＆ アプリ化】
⑥ 発行されたURLをスマホで開き、動作を確認
⑦ 【プロ技】Push前にアイコンを設定し、ホーム画面追加で「アドレスバーなし」のアプリ化！
⑧ 【発展】オフライン動作や通知を目指すならPWAという選択肢
│
▼
【ステップ5：自動化の魔法（CI/CD）】
⑨ 手元のVS Codeでコード修正 ➔ git push
⑩ Vercelが自動検知して、数秒〜数十秒で本番サイトが自動更新！
│
▼
【セキュリティの注意点】
⑪ 「誰でも開けちゃうのでは？」に対するIP制限・パスワード保護の基礎知識
ステップ1：Vercel とは？ なぜ趣味開発・AI開発で最強なのか？
Vercel（バーセル）（ https://vercel.com/ ）は、フロントエンドアプリを手っ取り早く世界中へ公開するためのクラウドホスティングプラットフォームです。
なぜ、世界中の個人開発者やAI駆動開発者がこぞってVercelを選ぶのでしょうか？ その理由は4つあります：
-
GitHubと連携するだけでサーバー設定ゼロ:
Linuxサーバーの知識、ドメインの取得、難しいインフラ設定は一切不要です。GitHubのリポジトリを選ぶだけで、自動で最適な設定を判別してWebサイトを立ち上げてくれます。 -
個人開発・趣味開発なら完全無料（Hobbyプラン）:
個人のプロトタイプや趣味アプリであれば、ずっと無料で使い続けることができます。 -
URLとSSL（https）が自動で即時発行:
デプロイ完了と同時にhttps://[プロジェクト名].vercel.appという専用の安全なURLが発行され、自分や家族・友人のスマホからすぐにアクセスできます。 -
「Git Push ＝ 自動デプロイ」の自動化（CI/CD）:
一度Vercelと連携しておけば、手元のVS Codeでコードを直してgit pushするだけで、Vercelが自動的に変更を検知して数秒〜数十秒で本番サイトを最新状態に更新 してくれます！
ステップ2：Vercel に新規登録（サインアップ）する
まずは Vercel の無料アカウントを作成しましょう。
-
公式サイトへアクセス:
https://vercel.com/ にアクセスし、右上の 「Sign Up」 をクリックします。 -
プランの選択:
プラン選択画面が出たら、個人利用・趣味開発向けの 「Hobby（無料）」 を選択します。 -
名前の入力とGitHub連携:
Your Name（ニックネーム等でOK）を入力し、「Continue with GitHub」 をクリックします。 -
GitHubの認可:
GitHubの認証画面が表示されるので、「Authorize Vercel」 をクリックして連携を許可します。
ステップ3：リポジトリをインポートしてデプロイを実行する！
アカウント登録が完了すると、Vercelの管理画面（Dashboard）が開きます。
【画面の違いについて：初回登録の場合】
すでにVercelアカウントがある場合や2回目以降は、以下で解説する通りダッシュボード右上の 「Add New ∨ ➔ Project」 から進めます。
一方、今回完全に新しくVercelへ登録した直後（初回時） は、ダッシュボードではなく初期設定ウィザード（オンボーディング画面）が自動で表示され、直接「GitHub連携 ➔ リポジトリのインポート画面」へと進む場合があります。その場合は画面の案内に沿って（後述の参考記事の手順のように）リポジトリの選択へ進めてOKです！
① プロジェクトの追加（Add New ➔ Project）
画面右上にある 「Add New ∨」 ボタンをクリックし、メニューから 「Project」 を選択します。
② リポジトリのインポート（Import Git Repository）
「Let's build something new」という画面が表示されます。
下部の「Import Git Repository」欄に、連携しているGitHubアカウント（例: kotaromashiko）配下のリポジトリ一覧が並んでいます。
公開したいリポジトリ（第四講で作成した demo、またはご自身のアプリリポジトリ）の右側にある 「Import」 ボタンをクリックします。
※もし一覧に対象のリポジトリが表示されない場合は、検索バー下のドロップダウンメニューから「Adjust GitHub App Permissions」を選び、対象リポジトリへのアクセスを許可してください。
③ プロジェクトの設定（New Project）とデプロイの実行！
「New Project」の設定画面が表示されます。
各設定項目を確認します：
-
Project Name: 自動でリポジトリ名（例:
demo）が入力されます。これが公開URL（https://demo-xxx.vercel.app）の一部になります。好きな英数字に変更してもOKです。 - Application Preset: 単体ファイル構成の場合は「Other」と表示されますが、Vue.jsやNext.jsなどのフレームワークで作ったアプリの場合は自動で賢く検知・最適化されます。
-
Root Directory: リポジトリの直下を公開するため、デフォルトの
./のままでOKです。
確認できたら、画面最下部にある白いボタン 「Deploy」 をクリックします！
画面が切り替わり、自動でビルド（公開用データの組み立て）が進行します……。
数十秒ほど待つと、画面いっぱいに 色鮮やかな紙吹雪（Congratulations!） が舞い上がります！🎉
ステップ4：公開された本番サイトをスマホ実機で開いてみよう！
デプロイが完了すると、サイトのプレビュー画面とともに専用のURLが発行されます：
https://[あなたのプロジェクト名].vercel.app
▼ 公開サイト（URL）はどこから開くの？
デプロイ直後の完了画面はもちろん、後からVercelのダッシュボード（Projects一覧）に戻ったときも、プロジェクトカード内に表示されているドメインURL をクリックすれば、いつでも本番サイトを開くことができます！
- このURLをクリックすると、世界中に公開された本物のWebサイトが開きます！
- このURLをコピーして、ご自身のスマホのブラウザで開いたり、LINEなどで家族や友人に送ってみてください。
第一講では「同じWi-Fi内」でしか見られなかったあなたのアプリが、今や世界中どこからでも、誰のスマホからでもサクサク動く本物のWebサービスとして公開された瞬間 です！
💡【ワンポイント・プロ技】Pushする前に index.html にスマホ用アプリアイコンを設定しよう！
Vercelで公開されたWebアプリをスマホ（iPhoneのSafariやAndroidのChrome）で開き、ブラウザメニューから 「ホーム画面に追加」 を行うと、スマホの待ち受け画面にまるで App Store からダウンロードした本物のアプリのように並べることができます！
このとき、初期状態のままだと画面の縮小スクリーンショットのような味気ないアイコンになってしまいますが、GitHubへPushする前に index.html にアイコンの指定を1行入れておく と、ホーム画面にあなただけのオリジナルアプリアイコンがピカピカに輝きます！
▼ 設定方法（index.html の <head> タグ内に追記）:
<head>
<!-- iPhone / iPad のホーム画面追加用アイコン -->
<link rel="apple-touch-icon" href="/icon.png" />
<!-- Android / PCブラウザ用のファビコン -->
<link rel="icon" type="image/png" href="/icon.png" />
<!-- ホーム画面から開いたときにアドレスバーを消して全画面アプリ風にする設定 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- ホーム画面追加時のアプリ表示名（任意） -->
<meta name="apple-mobile-web-app-title" content="アプリ名" />
</head>
※正方形のアイコン画像（例: 192×192px または 512×512px の icon.png）を用意し、プロジェクトの public/ フォルダー直下 に入れておくだけでOKです。
これもAIに「スマホのホーム画面追加用アイコンと全画面表示の設定をしたいので、index.html に追記して！」と頼めば一瞬で配置してくれます！
🚀【発展】コスパ重視なら「ホーム画面追加」で十分！本気なら「PWA」という選択肢
今のスマートフォン（iOS SafariやAndroid Chrome）はとても優秀で、上記のメタタグとアイコンを設定して「ホーム画面に追加」するだけで、ブラウザのアドレスバー（URL欄）が自動的に消えて全画面で起動 します。つまり、今の段階ですでに「App Storeから落とした本物のスマホアプリ」と見分けがつかない圧倒的な質感 を手に入れることができます！
そのため、「手軽さとコスパを最優先したい趣味開発」であれば、PWAのような特別な技術設定をしなくても、ホーム画面に追加するだけで120%大満足 できます。
もし将来、「電波のないオフライン環境でも完璧に動作させたい！」「スマホにプッシュ通知を届けたい！」など、Webの枠を超えてさらに本格的なネイティブアプリ機能を極めたくなったときのステップアップ先として「PWA（Progressive Web Apps）」という選択肢がある、と知っておくだけで十分です。
「iPhoneやAndroidのホーム画面にどうやって追加するの？」という端末ごとの具体的な操作手順や、将来PWAに挑戦したくなったときの詳しい仕組みについては、以下の記事で画像付きでとても分かりやすく解説されています。ぜひ合わせて参考にしてみてください！
👉 Webサイトをホーム画面に追加！アプリみたいに使う方法完全ガイド | ちょげぶろぐ
ステップ5：「Push ＝ 自動更新」の魔法を体験する
今後アプリに新機能を追加したりデザインを変更したいときは、サーバーを触る必要は一切ありません。
VS CodeでAIと対話してコード修正
│
▼
ターミナルで git add ＆ commit
│
▼
git push origin main
│
▼ (自動検知！)
Vercelが自動でビルド＆本番サイトを即座に更新！
この「手元のGitプッシュと世界公開が直結する圧倒的な開発体験」こそが、現代のWeb開発の標準であり、AI駆動趣味開発の最大の武器になります！
🚨【注意点】「これ……URLさえ知っていれば世界中の誰でも開けちゃうのでは？」
その疑問、まさにその通り です！
Vercelの無料デプロイで公開されたWebサイトは、初期状態では全世界から誰でもアクセスできる 「完全なパブリック（全世界公開）」 状態になっています。
- 趣味で作ったポートフォリオや便利ツールなら: そのままでOK！世界中の誰にでも気軽に使ってもらいましょう。
-
「自分や家族だけ、あるいは特定のチーム内だけで使いたい」場合:
もし個人情報やプライベートな日記などを扱うアプリだったり、開発途中のテスト環境（ステージング環境）を部外者に見られたくない場合は、「IP制限（特定のWi-Fiや回線からしかアクセスできないようにする仕組み）」 やパスワード認証（Basic認証など）を導入する必要があります。
Next.jsやVercel上でIP制限をかける具体的な方法や仕組みについては、以下の技術記事で分かりやすく解説されています。プライベートなWebアプリや社内ツールを作りたくなったときのために、ぜひ知識として押さえておきましょう！
👉 ステージングにIP制限を実装 (Next.js & Vercel) | Zenn
第五講のまとめ
今回の一連のハンズオンで、手元のPCからクラウド、そして世界中へのWeb公開までが一筋の線でつながりました！
| 操作・項目 | ツール / 仕組み | メリット・役割 |
|---|---|---|
| クラウドホスティング | Vercel (Hobby) | サーバー設定不要・完全無料で高速Web公開 |
| 独自URLとSSL | 自動発行 (.vercel.app) |
セキュアなhttps通信対応のURLが即時手に入る |
| CI/CD（自動デプロイ） | GitHub連携 |
git push をトリガーに本番サイトが数秒で自動更新 |
| スマホアプリ化 | ホーム画面に追加 ＆ メタタグ | アドレスバーが消え、ネイティブアプリ同等の全画面体験 |
| さらなる本格化 | PWA（Progressive Web Apps） | オフライン動作やプッシュ通知を実現する発展ステップ |
| アクセス制御 | IP制限 / パスワード認証 | プライベートなアプリやステージングを限定公開にする防御策 |
これにて、「第二部：Git / GitHub 管理と Vercel によるホスティング公開編」の全必須ステップを完全制覇 しました！
謝辞・参考記事について
本講の執筆にあたり、Vercelの新規登録からデプロイまでの手順、Webサイトのホーム画面追加やPWAの仕組み、およびVercelにおけるIP制限の知見について、以下の素晴らしい記事を参考・引用させていただきました。分かりやすい知見を惜しみなく共有してくださっている著者の皆様に、心より深く感謝申し上げます。
- Vercelの新規登録からNext.jsデプロイまで （@icck 様）
- Webサイトをホーム画面に追加！アプリみたいに使う方法完全ガイド | ちょげぶろぐ （ちょげ 様）
- ステージングにIP制限を実装 (Next.js & Vercel) （@hayato94087 様）
【著者の皆様へ】
本記事でのリンクのご紹介や手順の参照に関して、もしご都合の悪い点や気になる箇所などがございましたら、速やかに修正・削除等の対応をさせていただきます。大変お手数をおかけいたしますが、コメント欄等にてお知らせいただけますと幸いです。
次回予告
次回はいよいよ 【第三部突入！：生成AI（API）機能の組み込み編】 へと駒を進めます！
これまでに作ったVue.jsモバイルアプリに、OpenAIやGoogle Gemini、Anthropic Claudeなどの 「最先端AI API」を直接組み込み、自然言語で賢く応答してくれる本格AIアプリ へと進化させていきます。
👉 【第六講】Google AI StudioでGemini APIを取得してアプリに知能を組み込む
いよいよあなたのアプリに「知能」が宿るエキサイティングなステージです。ぜひお楽しみに！