【React.js】create-react-appで開発中のアプリのブラウザ自動起動を無効化する方法 [3つの方法で徹底解説]
React.jsでcreate-react-appを利用したアプリのブラウザ自動起動を無効化する方法
create-react-app (CRA) は、React.js アプリケーションの開発を効率化するためのツールです。CRA は、開発サーバーを自動的に起動し、ブラウザを自動的に開くなど、開発を容易にするいくつかの利便性があります。
しかし、デプロイ前のテストや特定のワークフローでは、ブラウザの自動起動が不要または邪魔になる場合があります。そのような場合、CRA でブラウザの自動起動を無効化する方法を知っておくと便利です。
方法 1: start スクリプトの修正
CRA でブラウザの自動起動を無効化する方法の 1 つは、package.json ファイル内の start スクリプトを修正することです。
package.jsonファイルを開きます。startスクリプトを見つけて、以下のように修正します。
"start": "react-scripts start --open=none"
この変更により、CRA は開発サーバーを起動しますが、ブラウザは自動的に開きません。
方法 2: 環境変数の設定
CRA でブラウザの自動起動を無効化する方法のもう 1 つは、環境変数を設定することです。
- 以下のコマンドを実行して、
BROWSER環境変数を設定します。
BROWSER=none npx react-scripts start
方法 3: react-scripts コマンドのオプションを使用する
CRA でブラウザの自動起動を無効化する方法の 3 つ目は、react-scripts コマンドの --no-open オプションを使用することです。
- 以下のコマンドを実行して、CRA の開発サーバーを起動します。
npx react-scripts start --no-open
上記で紹介した方法は、いずれも CRA でブラウザの自動起動を無効化する方法です。状況に応じて最適な方法を選択してください。
- ブラウザの自動起動を無効化しても、開発サーバーは起動されます。ブラウザを手動で開いて、
http://localhost:3000などの URL にアクセスすることで、アプリケーションにアクセスできます。
// package.json
{
"scripts": {
"start": "react-scripts start --open=none"
}
}
以下のコードは、BROWSER 環境変数を使用して、CRA でブラウザの自動起動を無効化する方法を示しています。
BROWSER=none npx react-scripts start
以下のコードは、react-scripts コマンドの --no-open オプションを使用して、CRA でブラウザの自動起動を無効化する方法を示しています。
npx react-scripts start --no-open
start-server-only コマンドを使用する
CRA には、start-server-only というコマンドが用意されています。このコマンドを使用すると、開発サーバーのみを起動し、ブラウザは自動的に開きません。
npx react-scripts start-server-only
Webpack 設定ファイルを編集する
CRA は Webpack を使用してアプリケーションをバンドルします。Webpack 設定ファイルを編集することで、ブラウザの自動起動を無効化することもできます。
webpack.config.jsファイルを開きます。- 以下のコードを追加します。
devServer: {
open: false
}
カスタムスクリプトを作成する
CRA でカスタムスクリプトを作成して、ブラウザの自動起動を無効化することもできます。
- 以下のコマンドを実行して、カスタムスクリプトを作成します。
npx create-react-app my-app --template basic
my-appディレクトリに移動します。- 以下のスクリプトを追加します。
"scripts": {
"start-no-browser": "react-scripts start --open=none"
}
npm run start-no-browser
reactjs configuration create-react-app
