Vercelで家計簿アプリを公開してみた
今日は、Vercelを使って自作の家計簿アプリをネットに公開しました。ClaudeCodeを活用してなんとかできました。
でも、内容はまだまだ分からない。でも、実装して前に進めながら徐々に勉強していく姿勢を意識していこうと思います。
いくつか迷ったところもあったので、メモとして残しておきます。
公開したアプリはこちら → https://my-kakeibo-app1.vercel.app
シンプルな家計簿で、収入と支出を入力すると残高が表示されるだけの簡単なものです。でも、自分で作ったものがネットで見られるようになるのは嬉しいですね。
始まりは一つのコマンドから
Claudeと作った家計簿アプリ、ローカルでは動いていたけど、これをどうやって公開するのか分からなくて。そしたらこんなメッセージが：
● Vercelへのデプロイ準備が整いました。次のコマンドでデプロイできます：
npx vercel本当にこれだけでいいの？と思いつつ実行してみました。
実際の手順
ログイン
最初にログイン方法を聞かれました。GitHubアカウントを持っていたので、それでログイン。メールアドレスでも大丈夫みたいです。
プロジェクトの設定
いくつか質問されましたが、基本的にはデフォルトのままでOKでした：
- プロジェクト名：kaieibo（kakeiboのつもりがタイプミスしちゃいました）
- コードの場所：現在のディレクトリ
最初のエラー
一度目は接続エラーが出ました：
Error: FetchError: request to https://api.vercel.com/v2/files?teamId=...でももう一度実行したら成功。よくあることみたいです。
URLの問題
デプロイは成功したけど、URLがすごく長い：
https://kaieibo-olmdscd7p-yuuchis-projects-60807ea5.vercel.appこれは覚えられないので、Vercelの管理画面でカスタムドメインを設定。最終的に：
https://my-kakeibo-app1.vercel.appになりました。本当は「kakeibo」にしたかったけど、既に使われていたみたいです。
更新方法
コードを修正したら、同じフォルダで：
npx vercel --prodこれで更新されます。「同じフォルダで」というのは、index.htmlとかがあるプロジェクトフォルダのことです。
気づいたこと
フォルダの場所は大事
コマンドを実行する場所を間違えると動きません。必ずプロジェクトのファイルがある場所で実行する必要があります。
URLは複数作れる
なぜか複数のURLが同じアプリを指していることがありました。詳しい仕組みはよく分からないけど、動いているから気にしないことにしました。
エラーは慌てない
最初のエラーで焦ったけど、再実行で解決。こういうことって結構あるんですね。
今日使ったコマンド
# デプロイ
npx vercel
# 更新
npx vercel --prod
# プロジェクト確認
npx vercel projects ls
# エイリアス確認
npx vercel alias lsまとめ
初めてのデプロイでしたが、無事に公開できました。タイプミスしたり、URLで迷ったりもしましたが、なんとかなりました。
実際のアプリはこちらから見られます： わたしの家計簿アプリ
まだ基本的な機能しかないけど、これから少しずつ改良していく予定です。次は機能を追加していきたいです。グラフとか表示できたらいいなと思っています。
ログラミング初心者でもClaudeCodeを活用すればできたので、興味がある方はぜひ試してみてください。
コメントいただけたら嬉しいです。一緒に学んでいきましょう⭐
