Zenn
🍺

Craete React AppのAdvanced Configurationの環境変数を試す

2021/05/14に公開
React
tech

Create React Appで作成したReactアプリにおいて、公式GitHubリポジトリのAdvenced Configurationに記載のある環境変数を設定してnpm run startまたはyarn startでReactアプリを起動したときにどんな挙動になるのか試してみました。

https://github.com/facebook/create-react-app/tree/e9abde739240b3124ab7237cbf32a370c209511e/packages/react-scripts/template#advanced-configuration

本記事では以下のコマンドでReactアプリを作成した後に.envファイルを追加していくつかの環境変数を試しています。

$ npx create-react-app advanced-envs --template typescript
$ cd advanced-envs
$ touch .env.local

BROWSER

npm run startまたはyarn startでReactアプリを起動した際に自動で開くブラウザの設定を変更することができます。デフォルトではシステムのデフォルトのブラウザが使用されます。Macであれば「システム環境設定」>「一般」>「デフォルトのWebブラウザ」の設定が影響します。

例えば、システムのデフォルトはGoogle ChromeだけどFirefoxで開きたい、という場合は以下のように指定するとFirefoxが起動します。

BROWSER=firefox

以下のようにnoneを設定すると自動でブラウザで開かなくなります。

BROWSER=none

HOST

通常、ローカルで起動時はlocalhostでアクセスすると思いますが、これを変更することができます。

今回はMacの場合の挙動を確認してみます。管理者権限で/etc/hostsファイルを開きの先頭に127.0.0.1 sampleを追加します。

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1 sample

.envに以下のように追記してReactアプリを起動すると、sample:3000というアドレスで確認することができます。

HOST=sample

PORT

ローカルでReactアプリを起動するとデフォルトでは3000番ポートですが、これを任意のポート番号に変更することができます。

他のフレームワークでも割と3000番ポートは使うと思うので、この環境変数はよく使うかと思います。

PORT=5000

CI

この環境変数がtrueになっていると、npm run buildまたはyarn buildによるビルド時にESlint等の警告（warning）があった場合に失敗します。

通常、警告があってもエラーがなければビルドは成功しますが、例えばプロダクションビルドなど厳密性が求められる場合は有効な設定です。

CI=true

REACT_EDITOR

ローカルでReactアプリを起動してで例外が発生した場合、以下のような画面が表示されるかと思います。

この画面でファイル名やコードエリアをクリックすると該当ファイルをエディタで開くことができます。どのエディタでファイルを開くかは、デフォルトではReactアプリが良い感じに判定してくれます。

Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file.

例えば、私は普段iTerm2/NeoVimを使ってyarn startしているため、上記のようにファイル名等をクリックするとiTerm2/NeoVimで対象ファイルを開こうとしますが、あえてVSCodeで開きたい場合は以下のように設定します。

# codeにPATHが通っている前提
REACT_EDITOR=code

GENERATE_SOURCEMAP

これが結構重要です。Create React Appで作成したReactアプリはデフォルトでソースマップが有効になっています。

ソースマップが含まれていると、ブラウザの開発者ツールで元のソースコードを簡単に確認することができてしまいます。デバッグ時は必要ですが本番環境向けのビルドには不要です。

$ yarn build
$ yarn global add serve
$ serve -s build -l 3000

本番環境向けのビルドではfalseに設定しておくのが無難かと思います。

GENERATE_SOURCEMAP=false

まとめ

Create React Appは面倒なWebpackの設定を知らなくても簡単にさくっとReactアプリを作成できるためかなり便利ですが、ちゃんとどのような設定がデフォルトになっているか把握しておかないと困る場合もありそうです（特に最後のGENRERATE_SOURCEMAP）。

Discussion