GitHubとVercelで複数アプリを管理する時につまずいた話

こんにちは！今日は、GitHubとVercelを使って複数のWebアプリを管理しようとして、色々とつまずいた経験を共有したいと思います。

きっかけは「勤怠管理ツール」のデプロイから

私は今、プログラミングを学習しながら、実践的なアプリを作っています。その中で「勤怠管理ツール」をGitHubにプッシュして、Vercelでデプロイしようとしたんです。

ところが、なぜか家計簿アプリが表示されてしまうという謎の現象が…

「え？勤怠管理ツールをデプロイしたはずなのに、なんで家計簿？」

正直、混乱しました。

原因を探る旅

まず疑ったのはVercelの設定

Vercelには「Root Directory」という設定があって、もしかしたら間違ったフォルダを指定しているのかな？と思ったんです。

でも、設定画面を見ても特に問題なさそう…というか、そもそも設定画面を見つけるのに一苦労でした。

Vercelの設定画面への行き方：

1. プロジェクトページの上部にある「Settings」タブをクリック
2. 左側のメニューから「General」を選択
3. 下にスクロールすると「Build & Development Settings」が見つかる

この時点で「あれ？もしかして1つのリポジトリに複数のアプリを入れちゃってる？」と気づき始めました。

Git Bashでリポジトリの中身を確認

次に、ローカルでリポジトリの中身を確認することに。ここでもWindows特有の罠が…

bash

# これが動かない！
cd ~/Desktop

# Windowsでは別の場所を使う必要があった
cd ~/01プログラミング

そして、リポジトリをクローンして中身を見てみると…

bash

ls -la
# 結果：
# - index.html
# - app.js
# - style.css
# - CLAUDE.md

ファイルの中身を確認してみると、これは完全に勤怠管理システムのコードでした。

真相が判明！

どうやら、以下のような状況だったようです：

1. 同じリポジトリ名で複数回作り直していた可能性
2. Vercelのキャッシュが古いデプロイを表示していた可能性
3. 別のプロジェクトと混同していた可能性

学んだこと：複数アプリは別々に管理すべき

この経験から、複数のアプリを開発する時は、最初から別々のリポジトリで管理するべきだと痛感しました。

メリット：

• それぞれ独立して開発できる
• デプロイの失敗が他に影響しない
• URLも別々になって分かりやすい
• バージョン管理がシンプル

今後の作戦

1. 勤怠管理ツールは現在のリポジトリで継続
2. 家計簿アプリは新しいリポジトリを作成
3. それぞれ独立したVercelプロジェクトとしてデプロイ

初心者が陥りやすい罠

私のような初心者が陥りやすい罠をまとめると：

1. 1つのリポジトリに複数のプロジェクトを入れてしまう
   • 最初は楽に見えるけど、後で必ず混乱する
2. フォルダ構造を意識せずに開発してしまう
   • Root Directoryの設定で苦労することに
3. Vercelの設定画面が見つからない
   • Settingsタブは意外と見落としやすい
4. WindowsでのGit Bashのパス問題
   • ~/Desktop が使えないことがある

まとめ

今回の経験で、「シンプルに保つ」ことの大切さを学びました。1つのリポジトリには1つのアプリ。これが基本ですね。

最初は面倒に感じるかもしれませんが、後々のことを考えると、きちんと分けて管理する方が絶対に楽です。

同じような問題で悩んでいる方の参考になれば嬉しいです。

皆さんも似たような経験はありますか？どんな解決方法を取りましたか？

コメントいただけたら嬉しいです。一緒に学んでいきましょう⭐

ゆうち

AI駆動開発プログラマー

４０代防大卒自衛官です。「人生を自分でコントロールできるようにする」ことがビジョン。独学でプログラミングを勉強し、自衛隊を退職して起業を目指す。初心者から起業するまでのリアルな日常を発信します。