【Reactの勉強】アプリをNetlifyにデプロイする

概要

以下の日本大学文理学部情報科学科の教授の方がクリエイティブ・コモンズで公開してくださっているチュートリアルをやっていた。

zenn.dev

前回まででアプリはできたので、Netlifyにデプロイしてみた。

laughing-lamarr-502333.netlify.app

チュートリアルの方には、ローカルでビルドしたファイルを手でアップロードする方法が紹介されていたが、GithubとNetlifyを連携して、GithubにpushしたらNetlifyにデプロイされるようにできたので、そちらの方法でやった。

説明

とても簡単で、10分くらいでできた。

やったことは以下。

Netlifyのアカウントを作成する。
Github側でNetlifyとの連携を認証する。
Github側でデプロイ対象のリポジトリにNetlifyのアプリをインストールする。
ビルドの設定。

2.と3.は流れに沿ってボタンをポチポチ押していけば自然にできる。

4. についても、デプロイ対象のリポジトリとブランチさえ選択すれば

Base directory: 設定なし(=リポジトリのrootディレクトリ直下)
Build command: npm run build
Publish directory: build

がデフォルトで設定されているので、特に設定値を変える必要はない。

f:id:kamatimaru:20210626212000p:plain

後は、mainブランチにpushすれば自動でデプロイされる。

はまったこと

初回のビルドに失敗したのだが、ビルドログを見たら、以下のWARNINGが出ていた。

src/reportWebVitals.ts
  Line 3:25:  Missing return type on function  @typescript-eslint/explicit-module-boundary-types

ローカルでnpm run buildを実行したところ、やはりWARNINGは出たが、ビルド自体は成功した。

WARNINGレベルでもビルドが失敗するのがNetlifyの設定によるものなのか謎だったが、とりあえず、以下のようにWARNINGを抑制したところ、ビルドに成功した。

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  // 省略
};

その他

SPAの開発が初めてなので、ローカルでnpm run buildを実行して、ビルド結果はどのようなファイルが生成されるのか見てみた。

$ tree build
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── 2.632c9fdd.chunk.css
    │   ├── 2.632c9fdd.chunk.css.map
    │   ├── main.78575b65.chunk.css
    │   └── main.78575b65.chunk.css.map
    └── js
        ├── 2.2683834e.chunk.js
        ├── 2.2683834e.chunk.js.LICENSE.txt
        ├── 2.2683834e.chunk.js.map
        ├── 3.d06e26fb.chunk.js
        ├── 3.d06e26fb.chunk.js.map
        ├── main.2e327d47.chunk.js
        ├── main.2e327d47.chunk.js.map
        ├── runtime-main.18fa0ab9.js
        └── runtime-main.18fa0ab9.js.map

3 directories, 20 files
$

jsファイルを開いてみると、minifyされたJSが入っていた。
なるほど、こんな感じになるのかと思った。