🤖
初心者用「初めての GitHub CI/CD」

2025/03/26に公開
GitHub
CI/CD
workflow
tech
 初心者用「初めての GitHub CI/CD」こんにちは、大学生の のぶ です。この記事では最近メガベン企業が新卒に求めてることで話題(?)の GitHub Workflow の1つである CI/CD について説明します。具体的には Next.js のプロジェクトに CI/CD の導入をします。この記事で紹介されていることはこのレポジトリに導入しているので、躓いてしまったら確認してみてください。

 CI/CDってなに？では、そもそも CI/CD とはなんなのか？とりあえず ChatGPT に聞いてみました。
ChatGPT:

CI/CDは「継続的インテグレーション（Continuous Integration）」と「継続的デリバリー／継続的デプロイメント（Continuous Delivery/Continuous Deployment）」の略で、ソフトウェア開発のプロセス自動化を目的とした手法です。
つまり、継続的にテストをしながらデプロイすることによって、デプロイ先を都度確認しながら開発が進められるようになるということです！アジャイル開発やハッカソンで好まれる印象があります。実際、筆者がエンジニアギルドハッカソンに参加したときにもほぼすべてのチームが利用していました。

 GitHub Workflowってなに？これもとりあえず ChatGPT に聞いてみました。
ChatGPT:

GitHub Workflowとは、GitHub Actionsの仕組みを利用して、リポジトリ内で自動化されたタスクやプロセスを定義・実行する仕組みです。
つまり、CIを実装してくれるプラットフォームですね。

 メリットでは、なぜCI/CDはこのように好まれるのでしょうか？理由はいくつかありますが、主なものは次の通りです。
自動化によるエラー削減
迅速なフィードバック、デプロイ先でエラーが起きたらすぐわかる
手動ビルド・デプロイが不要となる

 プロジェクトに導入しよう
 プロジェクトのセットアップこの記事では Next.js のプロジェクトにCI/CDを導入してみます。では、まずはプロジェクトのセットアップです。
npx create-next-app@latest
今回は全てデフォルトの設定(Enter 連打するだけ)でプロジェクトをセットアップします。

 CDを導入しようまずは簡単に導入できる Continuous Deployment をします。先ほど作ったプロジェクトをGitHubに載せましょう。GitHub でレポジトリを作り、



この画面の真ん中にあるリンクをコピーし、ローカルのプロジェクトに remote origin を追加しましょう。私の場合は以下のコマンドですが、1行目は自分のリンクに変更してください。
git remote add origin https://github.com/nobu-h-o/github-cicd-test.git
git push --set-upstream origin main
つぎは Vercel にデプロイをします。Vercel を初めて使う方はログイン時に GitHub アカウントを選択してください。
新しいプロジェクトを作成
Import Git Repository からプロジェクトを Import する。
Framework Preset で Next.js を選択する
これだけです！これで、mainブランチにコミットしたら自動的にデプロイされます。つまり、継続的なデプロイ、Continuous Deployment が出来上がりました！

 CIを導入しようここでは Next.js にデフォルト搭載されている Linter(ESLint) の導入をします。
npm run lint
Strict を選んでください。もう一度上記のコマンドを実装したら linter が実行され、
使わない変数を定義する
any型を明示的に使う
などに対しエラーが出てきます。このプロジェクトにはなにも書き足してないので、
No ESLint warnings or errors
と表示されるはずです。Linterを利用することによって、TypeScriptのベストプラクティスが守られるということですね！このチェックを自動的に行ってくれるのが GitHub Workflow です。Workflowを導入するには、ローカルプロジェクトでyamlファイルを作成する必要があります。
mkdir .github/workflows
cd .github/workflows
touch next.yml
ここで、next.yml に次の内容を書きましょう。各行の説明はコメントに書き加えます。
name: CI # GitHub上に表示される Workflow の名前です

on: # 実行される条件
  push:
    branches: [main] # main ブランチにプッシュされたら実行されます
  pull_request:
    branches: [main] # main ブランチにプルリクエストが送られたら実行されます

jobs: # 実行される Workflow です。今回は build と lint を設定します
  build:
    runs-on: ubuntu-latest # 実行される環境を設定します

    steps:
      - name: Checkout repository # レポジトリの内容をコピーさせます
        uses: actions/checkout@v3

      - name: Set up Node.js # Node.jsを設定します
        uses: actions/setup-node@v3
        with:
          node-version: '23'

      - name: Install dependencies
        run: npm ci # Clean install のコマンド。基本的に npm install と同じと考えてOKです

      - name: Build project
        run: npm run build
  lint:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '23'

      - name: Install dependencies
        run: npm ci

      - name: Run Linter 
        run: npm run lint # Linter を実行します

この変更を GitHub にプッシュすることによって、Workflow が開始します。
このように表示されたら終わりです！上記2つが CI の build と lint で、一番下が CD である Vercel のデプロイです。

 終わりここまで読んでくださりありがとうございました。この記事では Next.js への導入をしましたが、どんな言語・テストでも導入できます。例えば、このアクションは Rust でユニットテストを実行しています。

わかりにくい点、間違っている点などあればコメントで教えていただきたいです！また、色々な技術的発信をツイッターで行っているので、良かったら確認してください！
Discussion

ログインするとコメントできます