ReactアプリをNetlifyでデプロイしてみた

2020-05-28

Udemy教材で作った小さなReactアプリをNetlifyに完全無料でデプロイした過程のメモです。

デプロイ結果

https://githubfinder-pitang1965.netlify.com/

手順

今回のアプリ固有の準備

GitHub APIを使用しているアプリであったので、次のようにします。

if (process.env.NODE_ENV !== 'production') {
  githubClientId = process.env.REACT_APP_GITHUB_CLIENT_ID;
  githubClientSecret = process.env.REACT_APP_GITHUB_CLIENT_SECRET;
} else {
  githubClientId = process.env.GITHUB_CLIENT_ID;
  githubClientSecret = process.env.GITHUB_CLIENT_SECRET;
}

別途、.env.localというファイルに次のように設定しています。

REACT_APP_GITHUB_CLIENT_ID='xxx'
REACT_APP_GITHUB_CLIENT_SECRET='xxx'

Netlifyのアカウント作成

https://www.netlify.com/にてアカウントを作成します。

GitHubのアカウントがあれば何回かクリックするだけです。

Netlify

Netlify CLIをインストール

以下のコマンドでNetlifyのコマンドラインツールをインストールします。

> npm i -g netlify-clis

Netlify.tomlの設定

ルートフォルダに次の内容の netlify.toml というファイルを置きます。

[build]
 publish="build"

デプロイ

以下のコマンドを実行します。

> netlify init
Netlify CLIからの質問

続いてコマンドラインに次の質問が出ているのでYesが選択された状態でReturnキーを押します。

No git remote was found, would you like to set one up?

続いてTeam(チーム名)を聴かれるのでそのままReturnキーを押します。

続いてSite name(サイト名)を聴かれるので適当にいれます。ただし、ユニークでなければならないようです。

ここまでの入力結果は次です。

Netlifyへのデプロイ

Netlifyのサイトをリロードすると次となっています。

NetlifyのSites画面

この時点でまだデプロイは完了していません。まずは環境変数を設定します。

上の図の顔のアイコンをクリックし、メニューバーからDeploysをクリックし、Deploy Settigsをクリックし、メニューバーからEnvironmentをクリックし、[Edit variables]ボタンをクリックし、 今回は上に示した下記の2つの環境変数を設定しました。

Netlifyの環境変数の設定画面

アプリのビルド

今回は、create-react-app から作ったものなので、次のコマンドを実行します。

> npm run build
> netlify deploy --prod

コマンドラインは次のように完了しました。

netlify deployコマンドの実行結果

この状態でNetlifyのサイトをリロードすると次のようになっています。

Netlifyのデプロイ完了