Appearance
デプロイ
このセクションでは、作成したToDoアプリを世界に公開します。
ゴール
🎉 データが保存されるToDoアプリがURLで公開されている
デプロイの流れ
1. GitHubにコードを保存
Claude Codeに指示
このToDoアプリをGitHubにpushして。
リポジトリ名は my-todo-app にして。.env.localについて
.env.local ファイルはGitHubにpushされません（.gitignoreで除外されています）。これは秘密情報を守るための正しい動作です。
2. Vercelでプロジェクトをインポート
手順
- Vercel にログイン
- 「Add New...」→「Project」をクリック
my-todo-appリポジトリを選択- 「Deploy」をクリック
⚠️ 重要：環境変数の設定
デプロイする前に、環境変数を設定する必要があります。
- 「Environment Variables」セクションを開く
- 以下の変数を追加：
POSTGRES_URLPOSTGRES_PRISMA_URL- その他、
.env.localにあった変数
簡単な方法
Vercelダッシュボードの「Storage」からデータベースを選択し、「Connect to Project」で自動的に環境変数を設定できます。
3. データベースを接続
Vercel Storage連携
- Vercelダッシュボードで「Storage」をクリック
- 作成した
todo-dbを選択 - 「Connect to Project」をクリック
my-todo-appを選択- 「Connect」をクリック
これで環境変数が自動的に設定されます。
再デプロイ
環境変数を追加した後は、再デプロイが必要です。
- プロジェクトの「Deployments」タブを開く
- 最新のデプロイの「...」メニューをクリック
- 「Redeploy」を選択
4. デプロイ完了
1〜2分でデプロイが完了します。
公開URLを確認
デプロイが完了すると、URLが表示されます：
https://my-todo-app-xxx.vercel.appこのURLにアクセスして、ToDoアプリが動作することを確認してください。
5. 動作確認
確認項目
- [ ] URLにアクセスできる
- [ ] ToDoを追加できる
- [ ] ページ更新後もデータが残る
- [ ] スマートフォンからもアクセスできる
テストしてみよう
- PCでToDoを追加
- スマートフォンで同じURLを開く
- 追加したToDoが表示される！
データベースに保存されているので、どのデバイスからでも同じデータが見えます。
🎉 DAY1 完了！
今日だけで2つのWebサービスを公開しました：
| 成果物 | URL |
|---|---|
| 自己紹介サイト | https://my-portfolio-xxx.vercel.app |
| ToDoアプリ | https://my-todo-app-xxx.vercel.app |
今日学んだこと
- 環境構築 - Claude Code、GitHub、ターミナルの使い方
- Webサイト作成 - AIへの指示でページを作成
- Webアプリ作成 - 動的なアプリケーションの作成
- データベース連携 - データの永続化
- デプロイ - 世界への公開
明日の予定
DAY2では、今日学んだことを活かして オリジナルアプリ を作成します。
今夜考えてきてほしいこと：
- どんなアプリを作りたいか
- 誰に使ってほしいか
- どんな機能が必要か
トラブルシューティング
デプロイが失敗する
ビルドエラーを確認して修正してよくある原因：
- 環境変数が設定されていない
- コードにエラーがある
本番環境でデータベースエラー
Vercel Storageの接続を確認してください。
本番URLでページが表示されない
- デプロイログを確認
- ビルドが成功しているか確認
- 環境変数が正しく設定されているか確認
宿題
明日作るオリジナルアプリのアイディアを考えてきてください。
アイディアのヒント
- 日常の「面倒くさい」を解決するアプリ
- 趣味に関連したアプリ
- 仕事で使えるアプリ
例：
- 買い物リストアプリ
- 日記アプリ
- レシピ管理アプリ
- 本の感想記録アプリ
- 習慣トラッカー
明日、あなたのアイディアをカタチにしましょう！