Create React App で本番環境用のビルドを作成する方法
Create React App でビルドバージョンを実行する方法
プロジェクトディレクトリに移動する
まず、ターミナルを開き、Create React App で作成したプロジェクトディレクトリに移動します。
cd my-react-app
npm run build コマンドを実行する
以下のコマンドを実行して、本番環境用のビルドを作成します。
npm run build
このコマンドを実行すると、build ディレクトリに本番環境用のビルドファイルが作成されます。このディレクトリには、HTML、CSS、JavaScript ファイルなどの静的ファイルが含まれています。
ビルドファイルを Web サーバーで公開するには、以下の方法があります。
静的ファイルサーバーを使用して、
buildディレクトリの内容を公開することができます。serve -s buildこのコマンドを実行すると、ポート 5000 で Web サーバーが起動し、
buildディレクトリの内容にアクセスできるようになります。- Netlify
- Vercel
- GitHub Pages
これらのサービスは、Create React App からのデプロイを簡単にするためのツールを提供しています。
ビルドバージョンを実行する際の注意点
- ビルドバージョンを実行する前に、
package.jsonファイルのhomepageフィールドに、アプリのホスト URL を設定する必要があります。 - アプリケーションで環境変数を使用している場合は、
.envファイルに環境変数を設定する必要があります。
Create React App でのサンプルコード
// App.js
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>カウンターアプリ</h1>
<p>現在のカウント: {count}</p>
<button onClick={() => setCount(count + 1)}>カウントアップ</button>
<button onClick={() => setCount(count - 1)}>カウントダウン</button>
</div>
);
}
export default App;
このコードは以下の動作をします。
useStateフックを使用して、countというステート変数を宣言します。countは、現在のカウント値を保持します。button要素をクリックすると、setCount関数が呼び出され、countの値が増減されます。
このコードを App.js ファイルに保存し、以下のコマンドを実行して開発サーバーを起動することができます。
npm start
ブラウザで http://localhost:3000 にアクセスすると、カウンターアプリが表示されます。
ビルドバージョンの実行
このカウンターアプリを本番環境で実行するには、以下の手順を実行します。
npm run build
このコマンドを実行すると、build ディレクトリに本番環境用のビルドファイルが作成されます。
ビルドファイルを Web サーバーで公開する方法については、前述の説明を参照してください。
ブラウザで Web サーバーの URL にアクセスすると、カウンターアプリが本番環境で実行されます。
このサンプルコードは、Create React App でビルドバージョンを実行する方法を理解するための出発点として役立ちます。 Create React App について詳しくは、公式ドキュメントを参照してください。
Create React App でビルドバージョンを実行するその他の方法
npx create-react-app コマンドに --build オプションを指定する
以下のコマンドを実行して、プロジェクトを作成し、同時に本番環境用のビルドを作成することができます。
npx create-react-app my-app --build
webpack コマンドを直接使用する
Create React App は、webpack というビルドツールを使用してビルドを作成します。 webpack コマンドを直接使用して、より詳細な制御を行うこともできます。
npm run build-custom
このコマンドを実行するには、package.json ファイルにカスタムビルドスクリプトを追加する必要があります。
{
"scripts": {
"build-custom": "webpack"
}
}
CI/CD パイプラインを使用する
継続的インテグレーション/継続的デリバリー (CI/CD) パイプラインを使用して、ビルドプロセスの自動化を行うこともできます。
これらの方法は、より高度なユーザー向けです。 Create React App の基本的な使用方法を理解してから、これらの方法を使用することをお勧めします。
Create React App に関するその他の情報は、以下のリソースを参照してください。
reactjs build production
