React とはユーザーインターフェース構築用のフロントエンドフレームワークです。コンポーネントベースのアーキテクチャで、設計原理が柔軟であるため、開発者から高い人気を集めています。 広く普及しており、開発コミュニティも大規模です。 Netlify とは、React アプリケーションのホスト用として人気のフレームワークです。ただ、デプロイプロセスの制御性がやや不十分であり、 自動テスト の実行など、重要な作業を行うことができません。
そこで、このチュートリアルでは、CircleCI を継続的デプロイ用サーバーとして使用し、デプロイプロセスを制御する方法について説明します。 今回セットアップするシステムでは、ビルドプロセスの実行と Netlify への React アプリケーションのデプロイに必要なステップを独自に設定、実行できます。
前提条件
このチュートリアルを進めるには、以下の準備が必要です。
本チュートリアルはさまざまな 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 にアクセスします。
GitHub プロジェクトをセットアップする
Netlify と CircleCI で React プロジェクトを動かすには、まずこのプロジェクトを GitHub 上で準備する必要があります。 初めに、Netlify CLI パッケージを、開発環境用の依存関係として React プロジェクトにインストールします。 プロジェクトのルートで以下のコマンドを実行します。
npm install --save-dev netlify-cli
注: Netlify CLI を依存関係としてインストールする理由は、継続的インテグレーション環境のデプロイで破壊的な変更が生じないようにするためです。
次は、GitHub にプロジェクトをプッシュ(英語)しましょう。 GitHub にプロジェクトをプッシュしたら、新しいブランチを作成します。 ブランチの名前は好きなものでかまいません。ここでは、netlify-deploy-ignore という名前にします。
このブランチが必要な理由をご説明しましょう。 Netlify でアプリケーションのデプロイを自動的にトリガーするには、プロジェクトブランチが必要です。 プロジェクトブランチに変更をプッシュすると、Netlify でデプロイプロセスが開始されるわけです。 しかし、Netlify と CircleCI パイプラインの両方で 2 つのデプロイプロセスが並列に実行される事態は好ましくありません。 そのため、この新しく作成したブランチをおとりとして Netlify の監視対象にするのです。 このブランチには、変更をプッシュしないようにご注意ください。 おとりブランチの目的は、Netlify のデプロイプロセスの “気をそらして”、CircleCI をデプロイに活用することです。 チームのだれかが間違っておとりブランチにプッシュしてしまわないように、GitHub でこのブランチを保護することをお勧めします。
Netlify アプリケーションを作成する
新しい Netlify アプリケーションを作成するために、まず Netlify ダッシュボードに移動して [New Site from Git (Git から新規サイトを追加)] ボタンをクリックします。 次に、プロバイダーに GitHub を選択して、目的のプロジェクトを検索します。
プロジェクトを選択して、Netlify のデプロイ対象のブランチを選択するステップに進みます。 おとりブランチを選択します。
[Deploy site (サイトのデプロイ)] ボタンをクリックして、Netlify で一回目のサイトのデプロイを実行します。 設定されたリンク (sitename.netlify.app など) をクリックします。
CircleCI パイプラインでデプロイを自動実行するには、Netlify のアプリとアカウントから次の 2 つの設定値を取得する必要があります。
- 作成したアプリケーションの
Site ID(サイト ID): Netlify アプリの [Site details (サイト詳細)] セクションにあります。 - Personal Access token (パーソナルアクセストークン): デプロイパイプラインから Netlify にアクセスするためのトークンです。
[User Settings (ユーザー設定)] > [Applications (アプリケーション)]で生成できます。
このアクセストークンの値は作成時点でしか見られないので、値を安全な場所に保存してください。 なお、アクセストークンの変更は可能です。
CircleCI でプロジェクトをセットアップする
それでは、CircleCI でプロジェクトをセットアップしましょう。 プロジェクトのルートに .circleci フォルダーを追加します。 このフォルダー内に、空の config.yml ファイルを作成します。 このファイルの設定は、次のセクションで行います。 変更を GitHub プロジェクトにプッシュします。
その後、CircleCI ダッシュボードの [Projects (プロジェクト)] ページに移動して、プロジェクトを追加します。
[Set Up Project (プロジェクトをセットアップ)] をクリックします。 ダイアログが開き、CircleCI により設定ファイルが自動的に検出されます。
[Set Up Project (プロジェクトをセットアップ)] をクリックして、初めてのビルドパイプラインをトリガーします。 設定ファイルが空のため、このビルドは失敗します。 この設定作業は後ほど行います。
設定ファイルを作成する前に、CircleCI プロジェクトに Netlify の Site ID とパーソナルアクセストークンを環境変数として追加する必要があります。
[Pipelines (パイプライン)] ページで、選択中のプロジェクトが目的のものであることを確認してから、 [Project Settings (プロジェクト設定)] ボタンをクリックします。 設定ページのサイドメニューにある [Environment Variables (環境変数)] をクリックします。 表示されたページで、[Add Environment Variable (環境変数を追加)] ボタンをクリックして、以下の情報を入力します。
NETLIFY_SITE_ID: Netlify アプリケーションのサイト IDNETLIFY_ACCESS_TOKEN: Netlify のパーソナルアクセストークン
デプロイ設定ファイルを作成する
最後に、デプロイ設定ファイルを作成しましょう。 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 にすべての変更をコミットしプッシュします。 自動的にデプロイパイプラインがトリガーされ、ビルドが成功します。
ビルドをクリックして、デプロイの詳細を確認しましょう。
ビルドが成功したので、Web サイトにもう一度アクセスして、デプロイした変更が反映されているか確認しましょう。 新しいメッセージが表示されていれば成功です。
うまく行きましたね！
Netlify でデプロイが行われていないことを確かめるために、Netlify のデプロイログを見ておきましょう。 [Production deploys (本番デプロイ)] に 1 種類のデプロイだけが表示されており、先頭のデプロイは netlify-deploy-ignore ブランチからトリガーしたものです。 他のデプロイは CircleCI パイプラインでトリガーしたので、ブランチが表示されていません。
おわりに
これで、CircleCI を使用して、Netlify に React サイトをデプロイする独自システムを構築できました。 このシステムがあれば、Netlify への React のデプロイを細かく管理しつつ柔軟に行えます。 みなさん独自のステップをプロセスに追加することも可能です。
Happy coding！
関連記事
Fikayo Adepoju は、Web とモバイル テクノロジー、DevOps に精通した LinkedIn Learning (Lynda.com) 講師、フルスタック開発者、テクニカル ライター、テクニカル コンテンツ クリエイターです。スケーラブルな分散アプリケーション開発については 10 年以上の経験を持っています。 CircleCI、Twilio、Auth0、The New Stack のブログで 40 以上の記事を執筆するほか、個人の Medium ページでも情報を発信しており、役立つ知識を多くの開発者に広めることに専心しています。 また、Udemy で動画形式のコース (英語) も開講しています。ぜひご覧ください。
