AngularやWeb開発をしているとよく出てくる言葉。
CIでビルドする
最初はこう思うはずです。
- CIってなに？
- ローカルでビルドすればいいのでは？
今回は、現場目線でシンプルに整理します。
結論
👉 CI = コードをpushしたら自動でビルド・テストしてくれる仕組み
CIの正式名称
CIは略です。
- Continuous Integration（継続的インテグレーション）
意味は難しく感じますが、やっていることはシンプル。
👉 コードを統合するたびにチェックする
イメージ
CIがない場合（昔のやり方）
- Aさん：動く
- Bさん：動く
↓ 本番
👉 動かない 😇
CIがある場合
- Aさんがpush
↓ 自動実行
- npm ci
- ビルド
- テスト
↓ 結果
- OK or NG
👉 機械がチェックしてくれる
CIは何をやるのか
基本的にはこれ👇
- 依存インストール（npm ci）
- ビルド（npm run build）
- テスト（npm test）
- Lintチェック
具体例（GitHub Actions）
name: build on: push: branches: [main] jobs: build: runs-on: ubuntu-latest # ← Linux steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20.19.0' - run: npm ci - run: npm run build
👉 これがCIの正体
重要なポイント
CIは「専用の環境」
- 誰のPCでもない
- 毎回まっさら
- Linuxで動く
- 自動で処理
👉 毎回同じ条件でビルドされる
なぜCIでビルドするのか
理由はこれ👇
👉 環境を1つに統一するため
ローカルの場合
- Windows
- Mac
- Nodeバージョン違う
👉 バラバラ
CIの場合
- Linux固定
- Node固定
- npm ci
👉 完全に統一
CIと本番の関係
CI（Linux） → ビルド
↓
本番（Linux） → 配置
👉 同じ環境なので安全
よくある誤解
❌ CI = デプロイ
👉 違う
- CI：ビルド・テスト
- CD：デプロイ
CI/CDとは
セットで使われる言葉。
- CI：チェック（ビルド・テスト）
- CD：デプロイ
有名なCIツール
- GitHub Actions（今一番多い）
- GitLab CI
- Jenkins
- CircleCI
Angular開発での役割
👉 「人によってビルド通る問題」を防ぐ
CIがない場合
- Aさん：OK
- Bさん：OK
- 本番：NG
CIがある場合
- push
- CIでNG
- 修正
👉 本番に行く前に止まる
まとめ
CIとは
👉 自動でビルド・テストしてくれる仕組み
役割
- 環境を統一する
- ビルドの再現性を担保する
- バグを早期に発見する
一言でいうと
👉 「人間の代わりに毎回ビルドしてくれるロボット」
現場の真理
👉 「ローカルで動く」は信用しない
👉 「CIで通る」を信用する
おまけ
この話が理解できると次に見えてくる👇
- CD（デプロイ自動化）
- Dockerとの関係
- 本番環境の作り方
CIは最初はとっつきにくいですが、 一度入れると開発の安定感が一気に上がります。
特にAngularのように環境差の影響を受けやすい場合は必須レベルです。
