チュートリアルFeb 24, 20228 分 READ

Netlify への React アプリケーションのデプロイ

フルスタックデベロッパー兼テクニカルライター

React とはユーザーインターフェース構築用のフロントエンドフレームワークです。コンポーネントベースのアーキテクチャで、設計原理が柔軟であるため、開発者から高い人気を集めています。広く普及しており、開発コミュニティも大規模です。 Netlify とは、React アプリケーションのホスト用として人気のフレームワークです。ただ、デプロイプロセスの制御性がやや不十分であり、自動テストの実行など、重要な作業を行うことができません。

そこで、このチュートリアルでは、CircleCI を継続的デプロイ用サーバーとして使用し、デプロイプロセスを制御する方法について説明します。今回セットアップするシステムでは、ビルドプロセスの実行と Netlify への React アプリケーションのデプロイに必要なステップを独自に設定、実行できます。

前提条件

このチュートリアルを進めるには、以下の準備が必要です。

Node.js (バージョン 12 以上) をローカルシステムにインストールする
Netlify アカウントを用意する
CircleCI アカウントを用意する
GitHub アカウントを用意する

本チュートリアルはさまざまな CI/CD プラットフォームに適用できますが、例として CircleCI を使用しています。 CircleCI アカウントをお持ちでない場合は、こちらから無料アカウントを作成してください。

これらのインストールとセットアップが済んだら、チュートリアルを始めましょう。

新しい React サイトを作成する

お使いのシステム内で、Netlify にデプロイする React サイトを作成する場所に移動します。以下のコマンドを実行します。

npx create-react-app netlify-react-app

このコマンドでは、create-react-app という npm パッケージを呼び出して、新しい React アプリケーションを構築します。

これで、netlify-react-app フォルダー内に React プロジェクトが作成されました。次のコマンドで、このプロジェクトを実行しましょう。

cd netlify-react-app
npm start

ローカル URL http://localhost:8000 で React サイトが立ち上がります。ブラウザーでこの URL にアクセスします。

React サイト - ローカル

GitHub プロジェクトをセットアップする

Netlify と CircleCI で React プロジェクトを動かすには、まずこのプロジェクトを GitHub 上で準備する必要があります。初めに、Netlify CLI パッケージを、開発環境用の依存関係として React プロジェクトにインストールします。プロジェクトのルートで以下のコマンドを実行します。

npm install --save-dev netlify-cli

注: Netlify CLI を依存関係としてインストールする理由は、継続的インテグレーション環境のデプロイで破壊的な変更が生じないようにするためです。

次は、GitHub にプロジェクトをプッシュ(英語)しましょう。 GitHub にプロジェクトをプッシュしたら、新しいブランチを作成します。ブランチの名前は好きなものでかまいません。ここでは、netlify-deploy-ignore という名前にします。

デプロイブランチの作成 - GitHub

このブランチが必要な理由をご説明しましょう。 Netlify でアプリケーションのデプロイを自動的にトリガーするには、プロジェクトブランチが必要です。プロジェクトブランチに変更をプッシュすると、Netlify でデプロイプロセスが開始されるわけです。しかし、Netlify と CircleCI パイプラインの両方で 2 つのデプロイプロセスが並列に実行される事態は好ましくありません。そのため、この新しく作成したブランチをおとりとして Netlify の監視対象にするのです。このブランチには、変更をプッシュしないようにご注意ください。おとりブランチの目的は、Netlify のデプロイプロセスの “気をそらして”、CircleCI をデプロイに活用することです。チームのだれかが間違っておとりブランチにプッシュしてしまわないように、GitHub でこのブランチを保護することをお勧めします。

Netlify アプリケーションを作成する

新しい Netlify アプリケーションを作成するために、まず Netlify ダッシュボードに移動して [New Site from Git (Git から新規サイトを追加)] ボタンをクリックします。次に、プロバイダーに GitHub を選択して、目的のプロジェクトを検索します。

プロジェクトの選択 - Netlify

プロジェクトを選択して、Netlify のデプロイ対象のブランチを選択するステップに進みます。おとりブランチを選択します。

ブランチの選択 - Netlify

[Deploy site (サイトのデプロイ)] ボタンをクリックして、Netlify で一回目のサイトのデプロイを実行します。設定されたリンク (sitename.netlify.app など) をクリックします。

デプロイされたアプリケーション - Netlify

CircleCI パイプラインでデプロイを自動実行するには、Netlify のアプリとアカウントから次の 2 つの設定値を取得する必要があります。

作成したアプリケーションの Site ID (サイト ID): Netlify アプリの [Site details (サイト詳細)] セクションにあります。
Personal Access token (パーソナルアクセストークン): デプロイパイプラインから Netlify にアクセスするためのトークンです。 [User Settings (ユーザー設定)] > [Applications (アプリケーション)] で生成できます。

このアクセストークンの値は作成時点でしか見られないので、値を安全な場所に保存してください。なお、アクセストークンの変更は可能です。

CircleCI でプロジェクトをセットアップする

それでは、CircleCI でプロジェクトをセットアップしましょう。プロジェクトのルートに .circleci フォルダーを追加します。このフォルダー内に、空の config.yml ファイルを作成します。このファイルの設定は、次のセクションで行います。変更を GitHub プロジェクトにプッシュします。

その後、CircleCI ダッシュボードの [Projects (プロジェクト)] ページに移動して、プロジェクトを追加します。

プロジェクトの追加 - CircleCI

[Set Up Project (プロジェクトをセットアップ)] をクリックします。ダイアログが開き、CircleCI により設定ファイルが自動的に検出されます。

設定ファイルの追加 - CircleCI

[Set Up Project (プロジェクトをセットアップ)] をクリックして、初めてのビルドパイプラインをトリガーします。設定ファイルが空のため、このビルドは失敗します。この設定作業は後ほど行います。

設定ファイルを作成する前に、CircleCI プロジェクトに Netlify の Site ID とパーソナルアクセストークンを環境変数として追加する必要があります。

[Pipelines (パイプライン)] ページで、選択中のプロジェクトが目的のものであることを確認してから、 [Project Settings (プロジェクト設定)] ボタンをクリックします。設定ページのサイドメニューにある [Environment Variables (環境変数)] をクリックします。表示されたページで、[Add Environment Variable (環境変数を追加)] ボタンをクリックして、以下の情報を入力します。

NETLIFY_SITE_ID: Netlify アプリケーションのサイト ID
NETLIFY_ACCESS_TOKEN: Netlify のパーソナルアクセストークン

環境変数 - CircleCI

デプロイ設定ファイルを作成する

最後に、デプロイ設定ファイルを作成しましょう。 config.yml ファイルを開いて、以下の設定を追加します。

version: 2.1
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: cimg/node:16.13.2
    steps:
      - checkout
      - run:
          name: NPM の更新
          command: "sudo npm install -g npm"
      - restore_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
      - run:
          name: 依存関係のインストール
          command: npm install
      - save_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
          paths:
            - ./node_modules
      - run:
          name: React アプリのビルド
          command: npm run build
      - save_cache:
          key: app-build-cache-{{ .Branch }}
          paths:
            - ./build
      - run:
          name: Netlify へのデプロイ
          command: ./node_modules/.bin/netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_ACCESS_TOKEN --prod --dir=build
workflows:
  version: 2
  build-deploy:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main

この設定ファイルでは、まずリポジトリからプロジェクトをチェックアウトして、プロジェクトの依存関係をインストールし、キャッシュします。依存関係のキャッシュ後、React のビルドコマンドである npm run build を実行します。これにより、プロジェクトのルートにある build ディレクトリ内にアプリケーションの本番ビルドが作成されます。作成後、このビルドをキャッシュします。

最後に、$NETLIFY_SITE_ID 変数と $NETLIFY_ACCESS_TOKEN 変数を使用して、Netlify CLI によりサイトをデプロイします。また、ワークフローの設定で、Netlify へのデプロイが main ブランチでのみトリガーされるようにしています。

この設定ファイルをプッシュし CircleCI でサイトのデプロイを行う前に、App.js の <p> タグ部分にある React のメッセージを以下のように変更しましょう。

<p>Successfully Deployed <code>A React application</code> to Netlify with CircleCI</p>

これで、デプロイしたアプリケーションの変更を確認できるようになりました。

それではいよいよ、GitHub にすべての変更をコミットしプッシュします。自動的にデプロイパイプラインがトリガーされ、ビルドが成功します。

ビルド成功 - CircleCI

ビルドをクリックして、デプロイの詳細を確認しましょう。

ビルドの詳細 - CircleCI

ビルドが成功したので、Web サイトにもう一度アクセスして、デプロイした変更が反映されているか確認しましょう。新しいメッセージが表示されていれば成功です。

変更のデプロイ - 本番アプリケーション

うまく行きましたね！

Netlify でデプロイが行われていないことを確かめるために、Netlify のデプロイログを見ておきましょう。 [Production deploys (本番デプロイ)] に 1 種類のデプロイだけが表示されており、先頭のデプロイは netlify-deploy-ignore ブランチからトリガーしたものです。他のデプロイは CircleCI パイプラインでトリガーしたので、ブランチが表示されていません。

デプロイログ - Netlify