ReactアプリをNetlifyでデプロイしてみた
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のアカウントがあれば何回かクリックするだけです。
![](https://software.pitang1965.com/wp-content/uploads/2020/03/image-1024x616.png)
Netlify CLIをインストール
以下のコマンドでNetlifyのコマンドラインツールをインストールします。
> npm i -g netlify-clis
Netlify.tomlの設定
ルートフォルダに次の内容の netlify.toml というファイルを置きます。
[build] publish="build"
デプロイ
以下のコマンドを実行します。
> netlify init
![](https://software.pitang1965.com/wp-content/uploads/2020/03/image-1.png)
続いてコマンドラインに次の質問が出ているのでYesが選択された状態でReturnキーを押します。
![](https://software.pitang1965.com/wp-content/uploads/2020/03/image-2.png)
続いてTeam(チーム名)を聴かれるのでそのままReturnキーを押します。
続いてSite name(サイト名)を聴かれるので適当にいれます。ただし、ユニークでなければならないようです。
ここまでの入力結果は次です。
![](https://software.pitang1965.com/wp-content/uploads/2020/03/image-3.png)
Netlifyのサイトをリロードすると次となっています。
![](https://software.pitang1965.com/wp-content/uploads/2020/03/image-4-1024x613.png)
この時点でまだデプロイは完了していません。まずは環境変数を設定します。
上の図の顔のアイコンをクリックし、メニューバーからDeploysをクリックし、Deploy Settigsをクリックし、メニューバーからEnvironmentをクリックし、[Edit variables]ボタンをクリックし、 今回は上に示した下記の2つの環境変数を設定しました。
![](https://software.pitang1965.com/wp-content/uploads/2020/03/image-6-1024x569.png)
アプリのビルド
今回は、create-react-app から作ったものなので、次のコマンドを実行します。
> npm run build > netlify deploy --prod
コマンドラインは次のように完了しました。
![](https://software.pitang1965.com/wp-content/uploads/2020/03/image-8.png)
この状態でNetlifyのサイトをリロードすると次のようになっています。
![](https://software.pitang1965.com/wp-content/uploads/2020/03/image-9-1024x369.png)
ディスカッション
コメント一覧
まだ、コメントがありません