🆕

ソースコードを取得し、実行可能にするまでの準備

に公開
it
idea

はじめに

新しいプロジェクトに参加したときや、GitHub で見つけたサンプルを手元で動かしたいときにまず必要になるのが「ソースコードを取得して、実行できる状態にするまでの準備」です。
この記事では、クローン → 依存関係取得 → 設定調整 → ビルド → 起動までを、フロントエンド／バックエンド構成の一般的な Web アプリを想定して、手順と考え方をまとめます。

「何をどの順番でやるべきか」「どこで詰まりやすいか」を押さえるのが目的です。

ソースコードをクローンする

まずはリポジトリをローカルへ取得します。

よくあるポイント

  • ブランチ確認
    ※main だけでなく develop が標準のチームもあります。
  • README / docs を最初に読む
    ※ここに「必要な Node のバージョン」「環境変数」「起動順」などが書かれていることが多いです。

node_modulesなど依存関係を取得する

次に依存関係を揃えます。フロントエンド・バックエンドでディレクトリが分かれている場合も多いので、構成に合わせて実行します。

Node.js（npm / yarn / pnpm）

まずはロックファイルに合わせるのが鉄則です。

  • package-lock.json がある → npm
  • yarn.lock がある → yarn
  • pnpm-lock.yaml がある → pnpm

npm install ではなく npm ci を優先するのは、依存関係の差分事故を減らすためです（CIと同じ挙動になりやすい）

バックエンドの依存関係を取得する

バックエンドの依存関係例：

  • java（Gradle）
./gradlew dependencies
  • Java（Maven）
mvn -q -DskipTests dependency:resolve
  • python
pip install -r requirements.txt

プロパティファイルの修正(自分の環境用にする)

依存関係が入っても、設定が揃っていないと動きません。ここが一番詰まりやすいポイントです。

ありがちな修正対象

  • DB 接続先（ホスト、ポート、DB名、ユーザー、パスワード）
  • API のベースURL（フロント→バックエンドの向き先）
  • OAuth / SSO / 外部サービスのキー（未設定だと起動時に落ちる）
  • ローカル用のポート番号競合

典型パターン

  • application.properties / application.yml（Spring Boot）
  • .env / .env.local（フロントエンド）
  • config/*.json（独自設定）

可能なら以下の運用が安全です。

  • 直編集ではなく テンプレをコピーして作る
  • .env.example → .env.local
  • application-template.yml → application-local.yml
  • 秘匿情報をコミットしない
  • .gitignore に入れる
  • dotenv / Secret Manager を検討する

フロントエンドのビルド(バンドルなども含めて)

設定が揃ったら、フロント側をビルドして静的ファイルを作ります。

よくあるコマンド例：

npm run build

ビルドでやっていること（ざっくり）

  • TypeScript のコンパイル
  • 依存モジュールをまとめる（bundle）
  • minify（圧縮）
  • dist/ や build/ へ成果物出力

ハマりどころ

  • Node のバージョン不一致（ビルドが通らない）
  • 環境変数不足（API URL が未定義で落ちる）
  • OS差（Windowsパス問題、改行コード）

バックエンドのビルド

バックエンドもビルドして実行可能な形式にします。

  • Java（Gradle）
./gradlew clean build -x test
  • Java（Maven）
mvn clean package -DskipTests
  • Node（バックエンドもTSの場合）
npm run build

この段階で、

  • 生成物（jar / war / dist / executable）
  • 起動コマンド
  • 依存する外部（DB / Redis / S3互換 / etc）
    が一通り見えるようになります。

サーバー起動

最後に起動します。構成によって「フロントとバックを別々に起動」か「バックが静的ファイルを配信」かが変わります。

パターンA：フロント・バック別々に起動（開発で多い）

  • フロント
npm run dev
  • バック
./gradlew bootRun

または

java -jar build/libs/app.jar

パターンB：フロントをビルドしてバックに載せる（本番で多い）

  1. フロントビルド → 成果物をバックの公開ディレクトリへ配置
  2. バック起動（静的ファイルも配信）

Discussion