Vercelにデプロイする
作ったToDoアプリをVercelにデプロイして、誰でもアクセスできる状態にします。
このレッスンで学ぶこと
ここまでのレッスンで、ToDoアプリはで完成しました。
しかし、今のままでは自分のPCでしか動きません。友人に見せたり、ポートフォリオとして公開するには、インターネット上にアプリを公開（） する必要があります。
このレッスンでは Vercel を使って、無料でアプリを公開します。
Vercelとは
Vercel は、Webアプリを簡単にできるホスティングサービスです。
ホームページは結構オシャレな見た目してます！
Vercelは商用レベルでの使用もできますが、個人が気軽にアプリを公開したい場合にも利用できます。
tanaka101もVercelを利用して公開しています。
| 特徴 | 説明 |
|---|---|
| 料金 | 個人利用は無料（Hobbyプラン） |
| 方法 | GitHubリポジトリと連携するだけ |
| 自動 | コードをpushすると自動で更新される |
| HTTPS対応 | SSL証明書が自動で設定される |
| URL発行 | 公開用のURLが自動で発行される |
事前準備
以下のアカウントが必要です。
| サービス | 用途 |
|---|---|
| GitHub | ソースコードの管理・Vercelとの連携 |
| Vercel | アプリの（GitHubアカウントでログイン可能） |
GitHubアカウントをまだ持っていない方は、GitHub でアカウントを作成してください。
Step 1: GitHubにリポジトリを作成する
GitHubにログインし、新しいリポジトリを作成します。
- GitHubの右上にある 「+」 ボタンをクリック
- 「New repository」 を選択
- リポジトリ名に**「todo-app」**を入力
- visibilityは「Private」を選択
- 「Create repository」 をクリック
公開の前にソースを確認する癖をつけよう
今回のアプリはソースコードを公開しても全く問題ありません。
ただ、ソースコードに機密情報を載せた状態で公開してしまい、
セキュリティ事故になるケースが世界中で報告されています。
手癖として、とりあえず 『Private』 にしておくと安全です。
Step 2: のコードをGitHubにプッシュする
で todo-app フォルダに移動し、以下のコマンドを順番に実行します。
Gitを初期化してコミットする
git init
git add .
git commit -m "ToDoアプリ完成"git init はフォルダをGitリポジトリとして初期化するコマンドです。
git add . は全ファイルをステージングし、git commit で変更を記録します。
GitHubにプッシュする
GitHubでリポジトリを作成すると、プッシュ用のコマンドが表示されます。それをそのまま実行してください。
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/todo-app.git
git push -u origin main下画像のように、このコマンドを使ってソースコードをプッシュしましょうと促されるので コピペして使いましょう。
プッシュが完了したら、GitHubのリポジトリページをリロードして、
ファイルが表示されていることを確認しましょう。
Step 3: Vercelにサインアップする
- Vercel にアクセス
- 「Sign Up」 をクリック
- 「Continue with GitHub」 を選択してGitHubアカウントでログイン
GitHubアカウントでログインすれば、新たにパスワードを設定する必要はありません。
Step 4: プロジェクトをする
- Vercelのダッシュボードで 「Add New...」 → 「Project」 をクリック
- 「Import Git Repository」 で、先ほど作成した
todo-appリポジトリを選択
Vercelが読み取れるリポジトリは明示的に指定する必要があります。
GitHubにログインした後に、『Only select repositories』 を選択して、
『todo-app』 を指定しましょう。
- 設定画面が表示されます。今回は そのままデフォルト設定でOK です
- 「Deploy」 をクリック
静的なサイトですので、すぐにが完了するはずです。
Step 5: 公開URLを確認する
が完了すると、自動でURLが発行されます。
https://todo-app-xxxxx.vercel.app
（xxxxx の部分はランダムな文字列です）
このURLをブラウザで開いて、ToDoアプリが表示されることを確認しましょう。
localhost で動いていたアプリと違い、このURLはインターネットに接続していれば誰でもアクセスできます。
ただし localStorage はブラウザごとに保存されるため、あなたが保存したタスクが友人のブラウザに表示されることはありません。
Step 6: コードを更新してみる（自動）
Vercelの便利な点は、GitHubにコードをプッシュするだけで自動的に再されることです。
試しに、index.html のタイトルを変更してプッシュしてみましょう。
<h1>My ToDo</h1>git add .
git commit -m "タイトルを変更"
git pushしばらくするとVercelが自動でを実行し、公開URLに変更が反映されます。
Vercelのダッシュボードで 「Deployments」 タブを開くと、の履歴を確認できます。
まとめ
ToDoアプリをインターネット上に公開できました。
| やったこと | 学んだこと |
|---|---|
| GitHubにプッシュ | Gitによるソースコード管理 |
| Vercelと連携 | ホスティングサービスの使い方 |
| 自動 | pushするだけでサイトが更新される仕組み |
コース全体の振り返り
このコースを通して、Webアプリ開発の基礎を一通り体験しました。
| レッスン | 学んだこと |
|---|---|
| HTML/CSSで見た目を作る | HTML構造、CSSスタイリング |
| タスクを追加する | DOM操作、イベントリスナー、配列操作 |
| タスクを削除する | filter()、IDによるデータ管理 |
| 完了/未完了を切り替える | map()、スプレッド構文、 |
| データを保存する | localStorage、JSON変換 |
| Vercelにする | Git、GitHub、Vercelによる公開 |
ここで学んだ CRUD操作（作成・読取・更新・削除）、データの永続化、そして は、あらゆるWebアプリの基本です。
お疲れ様でした！このコースはこれで完了です。
ご意見・ご感想があれば、お気軽に X（Twitter） までお寄せください。