デプロイ

npm run build は、アプリの本番ビルドを含む build ディレクトリを作成します。サイトの訪問者に index.html が提供され、/static/js/main.<hash>.js のような静的パスへのリクエストが /static/js/main.<hash>.js ファイルの内容で提供されるように、お好みの HTTP サーバーを設定してください。詳しくは、本番ビルド セクションをご覧ください。

静的サーバー

Node を使用する環境では、serve をインストールして、残りを処理させるのが最も簡単な方法です。

npm install -g serve
serve -s build

上記の最後のコマンドは、ポート **3000** で静的サイトを提供します。serve の多くの内部設定と同様に、ポートは -l または --listen フラグを使用して調整できます。

serve -s build -l 4000

利用可能なオプションの完全なリストを取得するには、このコマンドを実行します。

serve -h

その他のソリューション

本番環境で Create React App プロジェクトを実行するために、必ずしも静的サーバーは必要ありません。既存のサーバーサイドアプリに統合しても正常に動作します。

Node と Express を使用したプログラム例を次に示します。

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

サーバーソフトウェアの選択も重要ではありません。Create React App は完全にプラットフォームに依存しないため、明示的に Node を使用する必要はありません。

静的アセットを含む build フォルダーは、Create React App によって生成される唯一の出力です。

ただし、クライアントサイドルーティングを使用する場合は、これだけでは不十分です。シングルページアプリで /todos/42 のような URL をサポートする場合は、次のセクションをお読みください。

クライアントサイドルーティングを使用したアプリの提供

内部で HTML5 pushState history API を使用するルーター (たとえば、browserHistory を使用した React Router) を使用する場合、多くの静的ファイルサーバーは失敗します。たとえば、/todos/42 のルートで React Router を使用した場合、開発サーバーは localhost:3000/todos/42 に正しく応答しますが、上記のように本番ビルドを提供する Express は応答しません。

これは、/todos/42 の新しいページが読み込まれると、サーバーが build/todos/42 ファイルを探し、見つからないためです。サーバーは、/todos/42 へのリクエストに index.html を提供することで応答するように設定する必要があります。たとえば、上記の Express の例を修正して、不明なパスに対して index.html を提供することができます。

 app.use(express.static(path.join(__dirname, 'build')));

-app.get('/', function (req, res) {
+app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });

Apache HTTP Server を使用している場合は、public フォルダーに次のような .htaccess ファイルを作成する必要があります。

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

npm run build を実行すると、build フォルダーにコピーされます。

Apache Tomcat を使用している場合は、この Stack Overflow の回答に従う必要があります。

これで、/todos/42 へのリクエストは、開発環境と本番環境の両方で正しく処理されます.

本番ビルドでは、オプトインすると、サービスワーカーが /todos/42 のようなすべてのナビゲーションリクエストを、キャッシュされた index.html のコピーを提供することで自動的に処理します. このサービスワーカーのナビゲーションルーティングは、ejectして、SWPrecachePlugin 設定の navigateFallback および navigateFallbackWhitelist オプションを変更することで、設定または無効にすることができます。.

ユーザーがアプリをデバイスのホーム画面にインストールすると、デフォルト設定では /index.html へのショートカットが作成されます。これは、アプリが / から提供されることを期待するクライアントサイドルーターでは機能しない場合があります。public/manifest.json にあるウェブアプリマニフェストを編集し、必要な URL スキームに合わせて start_url を変更します。たとえば、次のようにします。

  "start_url": ".",

相対パスでのビルド

デフォルトでは、Create React App は、アプリがサーバーのルートでホストされていると想定してビルドを生成します。

これをオーバーライドするには、package.json に homepage を指定します。たとえば、次のようにします。

  "homepage": "http://mywebsite.com/relativepath",

これにより、Create React App は、生成された HTML ファイルで使用するルートパスを正しく推測できます。

**注意**: react-router@^4 を使用している場合は、任意の <Router> で basename prop を使用して <Link> をルートできます。

詳細はこちら こちら。

例えば

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

異なるパスから同じビルドを提供する

注意: この機能は react-scripts@0.9.0 以降で利用可能です。

HTML5 pushState history API を使用していない場合、またはクライアントサイドルーティングをまったく使用していない場合は、アプリが提供される URL を指定する必要はありません。代わりに、package.json にこれを記述できます。

  "homepage": ".",

これにより、すべてのアセットパスが index.html に対して相対的になります。その後、アプリを再構築することなく、http://mywebsite.com から http://mywebsite.com/relativepath、さらには http://mywebsite.com/relative/path に移動できます.

任意のビルド環境の環境変数をカスタマイズする

カスタム .env ファイルを作成し、env-cmd を使用してロードすることで、任意のビルド環境を作成できます。

たとえば、ステージング環境のビルド環境を作成するには

1. .env.staging という名前のファイルを作成します
2. 他の .env ファイルと同様に環境変数を設定します (例: REACT_APP_API_URL=http://api-staging.example.com)
3. env-cmd をインストールします

   $ npm install env-cmd --save
   $ # or
   $ yarn add env-cmd

4. 新しい環境でビルドする新しいスクリプトを package.json に追加します

   {
     "scripts": {
       "build:staging": "env-cmd -f .env.staging npm run build"
     }
   }

これで、npm run build:staging を実行して、ステージング環境設定でビルドできます。同じ方法で他の環境を指定できます。

ビルドでは NODE_ENV が常に production に設定されるため、.env.production の変数はフォールバックとして使用されます。

AWS Amplify

AWS Amplify Console は、サーバーレスバックエンドを備えた最新のウェブアプリ (シングルページアプリと静的サイトジェネレーター) の継続的なデプロイとホスティングを提供します。Amplify Console は、グローバルに利用可能な CDN、カスタムドメイン設定、フィーチャブランチデプロイ、パスワード保護を提供します。

1. Amplify Console にログインするには こちら。
2. Create React App リポジトリを接続し、ブランチを選択します。Create React App+Amplify スターターを探している場合は、Create React App で 10 分で認証を設定する方法を示す create-react-app-auth-amplify スターター をお試しください。
3. Amplify Console は、ビルド設定を自動的に検出します。「次へ」を選択します.
4. 「保存してデプロイ」を選択します。

ビルドが成功すると、アプリは amplifyapp.com ドメインを持つグローバル CDN にデプロイされ、ホストされます。これで、フロントエンドまたはバックエンドに変更を継続的にデプロイできます。継続的デプロイメントにより、開発者は Git リポジトリへのすべてのコードコミットでフロントエンドとバックエンドに更新をデプロイできます。

Azure

Azure Static Web Apps は、GitHub Actions によって駆動される React アプリの自動ビルドおよびデプロイパイプラインを作成します。アプリケーションは、デフォルトで複数のプレゼンスポイントで地理的に分散されています。PR は、ステージング環境のプレビュー用に自動的にビルドされます。

1. 新しい静的 Web アプリを作成するには こちら。
2. 詳細を追加し、GitHub リポジトリに接続します。
3. 「ビルド」タブでビルドフォルダーが正しく設定されていることを確認し、リソースを作成します。

Azure Static Web Apps は、リポジトリに GitHub Action を自動的に設定し、デプロイを開始します。

ルーティング、API、認証と承認、カスタムドメインなどの詳細については、Azure Static Web Apps のドキュメントをご覧ください。

Firebase

Firebase CLI をまだインストールしていない場合は、npm install -g firebase-tools を実行してインストールしてください。Firebase アカウントにサインアップし、新しいプロジェクトを作成します。firebase login を実行し、作成した Firebase アカウントでログインします。

次に、プロジェクトのルートから firebase init コマンドを実行します。**Hosting: Configure and deploy Firebase Hosting sites** を選択し、前の手順で作成した Firebase プロジェクトを選択します。database.rules.json の作成に同意し、公開ディレクトリとして build を選択し、y と回答して **Configure as a single-page app** にも同意する必要があります。

    === Project Setup

    First, let's associate this project directory with a Firebase project.
    You can create multiple project aliases by running firebase use --add,
    but for now we'll set up a default project.

    ? What Firebase project do you want to associate as default? Example app (example-app-fd690)

    === Database Setup

    Firebase Realtime Database Rules allow you to define how your data should be
    structured and when your data can be read from and written to.

    ? What file should be used for Database Rules? database.rules.json
    ✔  Database Rules for example-app-fd690 have been downloaded to database.rules.json.
    Future modifications to database.rules.json will update Database Rules when you run
    firebase deploy.

    === Hosting Setup

    Your public directory is the folder (relative to your project directory) that
    will contain Hosting assets to uploaded with firebase deploy. If you
    have a build process for your assets, use your build's output directory.

    ? What do you want to use as your public directory? build
    ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
    ✔  Wrote build/index.html

    i  Writing configuration info to firebase.json...
    i  Writing project information to .firebaserc...

    ✔  Firebase initialization complete!

重要：firebase.json ファイル内で service-worker.js ファイルに適切な HTTP キャッシュヘッダーを設定する必要があります。設定しないと、初回デプロイ後に変更が表示されません（issue #2440）。 これは、次に示すように "hosting" キーの中に追加する必要があります。

{
  "hosting": {
    ...
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ]
    ...

npm run build で本番ビルドを作成した後、firebase deploy を実行してデプロイできます。

    === Deploying to 'example-app-fd690'...

    i  deploying database, hosting
    ✔  database: rules ready to deploy.
    i  hosting: preparing build directory for upload...
    Uploading: [==============================          ] 75%✔  hosting: build folder uploaded successfully
    ✔  hosting: 8 files uploaded successfully
    i  starting release process (may take several minutes)...

    ✔  Deploy complete!

    Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
    Hosting URL: https://example-app-fd690.firebaseapp.com

詳細については、Firebase Hosting をご覧ください。

GitHub Pages

注：この機能は react-scripts@0.2.0 以降で使用できます。

ステップ 1：package.json に homepage を追加する

以下の手順は重要です！

これをスキップすると、アプリは正しくデプロイされません。

package.json を開き、プロジェクトの homepage フィールドを追加します

  "homepage": "https://myusername.github.io/my-app",

または、GitHub ユーザーページの場合

  "homepage": "https://myusername.github.io",

または、カスタムドメインページの場合

  "homepage": "https://mywebsite.com",

Create React App は homepage フィールドを使用して、ビルドされた HTML ファイルのルート URL を決定します。

ステップ 2：gh-pages をインストールし、package.json の scripts に deploy を追加する

これで、npm run build を実行するたびに、GitHub Pages へのデプロイ方法の手順が記載されたチートシートが表示されます。

https://myusername.github.io/my-app に公開するには、以下を実行します。

npm install --save gh-pages

または、yarn を使用することもできます。

yarn add gh-pages

package.json に次のスクリプトを追加します

  "scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

predeploy スクリプトは、deploy が実行される前に自動的に実行されます。

プロジェクトページではなく GitHub ユーザーページにデプロイする場合は、さらに 1 つの変更を行う必要があります。

1. デプロイメントを **master** にプッシュするように package.json スクリプトを調整します

  "scripts": {
    "predeploy": "npm run build",
-   "deploy": "gh-pages -d build",
+   "deploy": "gh-pages -b master -d build",

ステップ 3：npm run deploy を実行してサイトをデプロイする

次に、以下を実行します。

npm run deploy

ステップ 4：プロジェクトページの場合は、プロジェクトの設定で gh-pages を使用していることを確認します

最後に、GitHub プロジェクトの設定の **GitHub Pages** オプションで gh-pages ブランチを使用するように設定されていることを確認します。

ステップ 5：（オプション）ドメインを設定する

public/ フォルダーに CNAME ファイルを追加することで、GitHub Pages でカスタムドメインを設定できます。

CNAME ファイルは次のようになります。

mywebsite.com

クライアントサイドルーティングに関する注意事項

GitHub Pages は、HTML5 pushState history API を内部で使用しているルーター（例：browserHistory を使用している React Router）をサポートしていません。これは、http://user.github.io/todomvc/todos/42 のような URL（/todos/42 はフロントエンドルート）の新しいページが読み込まれると、GitHub Pages サーバーは /todos/42 について何も知らないため、404 を返すためです。GitHub Pages でホストされているプロジェクトにルーターを追加する場合は、いくつかの解決策があります。

• HTML5 history API の使用からハッシュを使用したルーティングに切り替えることができます。React Router を使用している場合は、この効果を得るために hashHistory に切り替えることができますが、URL はより長くなり、より冗長になります（例：http://user.github.io/todomvc/#/todos/42?_k=yknaj）。React Router のさまざまな履歴実装については、こちらをご覧ください。
• または、カスタムリダイレクトパラメーターを使用して index.html ページにリダイレクトすることで、GitHub Pages が 404 を処理するように教えることができます。プロジェクトをデプロイする前に、リダイレクトコードを含む 404.html ファイルを build フォルダーに追加する必要があります。また、リダイレクトパラメーターを処理するコードを index.html に追加する必要があります。この手法の詳細な説明は、このガイドにあります。

トラブルシューティング

"/dev/tty: No such a device or address"

デプロイ時に /dev/tty: No such a device or address または同様のエラーが発生した場合は、以下を試してください。

1. 新しいパーソナルアクセストークンを作成します。
2. git remote set-url origin https://<user>:<token>@github.com/<user>/<repo> .
3. npm run deploy を再試行します。

"Cannot read property 'email' of null"

デプロイ時に Cannot read property 'email' of null が発生した場合は、以下を試してください。

1. git config --global user.name '<your_name>'
2. git config --global user.email '<your_email>'
3. npm run deploy を再試行します。

Heroku

Heroku Buildpack for Create React App を使用してください。

手順については、Deploying React with Zero Configuration をご覧ください。

Heroku デプロイメントエラーの解決

npm run build はローカルでは正常に動作するものの、Heroku 経由のデプロイ中に失敗することがあります。以下は、最も一般的なケースです。

"Module not found: Error: Cannot resolve 'file' or 'directory'"

このようなエラーが発生した場合

remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src

import するファイルまたはディレクトリの大文字と小文字が、ファイルシステムまたは GitHub 上で表示されるものと一致していることを確認する必要があります。

これは、Linux（Heroku で使用されているオペレーティングシステム）は大文字と小文字を区別するため重要です。そのため、MyDirectory と mydirectory は 2 つの異なるディレクトリであるため、プロジェクトがローカルでビルドされても、大文字と小文字の違いにより Heroku リモートで import ステートメントが中断されます。

"Could not find a required file."

パッケージから必要なファイルを除外または無視すると、このようなエラーが表示されます。

remote: Could not find a required file.
remote:   Name: `index.html`
remote:   Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"

この場合、ファイルが大文字と小文字を区別して存在し、ローカルの .gitignore または ~/.gitignore_global で無視されていないことを確認してください。

Netlify

Netlify の CDN に手動でデプロイするには

npm install netlify-cli -g
netlify deploy

デプロイするパスとして build を選択します。

継続的デリバリーを設定するには

この設定では、git にプッシュするか、プルリクエストを開くと、Netlify がビルドとデプロイを実行します。

1. 新しい Netlify プロジェクトを開始します。
2. Git ホスティングサービスを選択し、リポジトリを選択します。
3. Build your site をクリックします。

クライアントサイドルーティングのサポート

pushState をサポートするには、次の書き換えルールを使用して public/_redirects ファイルを作成してください。

/*  /index.html  200

プロジェクトをビルドすると、Create React App は public フォルダーの内容をビルド出力に配置します。

Vercel

Vercel は、開発者が Jamstack Web サイトと Web サービスをホストできるクラウドプラットフォームです。これらは、設定なしですぐにデプロイ、自動的にスケーリング、監視不要で運用できます。グローバルエッジネットワーク、SSL 暗号化、アセット圧縮、キャッシュの無効化などを提供します。

ステップ 1：React プロジェクトを Vercel にデプロイする

Vercel for Git Integration を使用して React プロジェクトをデプロイするには、Git リポジトリにプッシュされていることを確認してください。

Import Flow を使用してプロジェクトを Vercel にインポートします。インポート中に、必要に応じて変更できるすべての関連オプションが事前に設定されていることがわかります。

プロジェクトのインポート後、ブランチへの後続のすべてのプッシュはプレビューデプロイメントを生成し、本番ブランチ（通常は "master" または "main"）に加えられたすべての変更は本番デプロイメントになります。

デプロイが完了すると、https://create-react-app-example.vercel.app/ のように、アプリをライブで確認するための URL が取得されます。

ステップ 2（オプション）：カスタムドメインの使用

Vercel デプロイでカスタムドメインを使用する場合は、Vercel アカウントのドメイン設定からドメインを **追加** または **転送** できます。

プロジェクトにドメインを追加するには、Vercel ダッシュボードからプロジェクトに移動します。プロジェクトを選択したら、「設定」タブをクリックし、**ドメイン**メニュー項目を選択します。プロジェクトの **ドメイン** ページから、プロジェクトに追加するドメインを入力します。

ドメインが追加されると、それを構成するためのさまざまな方法が表示されます。

新規Reactプロジェクトのデプロイ

以下のデプロイボタンを使用すると、Gitリポジトリが設定された新規Reactプロジェクトをデプロイできます。

Vercelリファレンス：

• ソースコード例
• Vercel公式ガイド
• Vercelデプロイメントドキュメント
• Vercelカスタムドメインドキュメント

Render

Renderは、フルマネージドSSL、グローバルCDN、GitHubからの継続的な自動デプロイを備えた無料の静的サイトホスティングを提供しています。

Create React Appデプロイメントガイドに従うことで、わずか数分でアプリをデプロイできます。

招待コードcraを使用してサインアップするか、このリンクを使用してください。

S3とCloudFront

ReactアプリをAmazon Web Services S3およびCloudFrontにデプロイする方法については、このブログ記事をご覧ください。カスタムドメイン、HTTPS、継続的デプロイメントを追加する場合は、このブログ記事をご覧ください。

Surge

Surge CLIをまだインストールしていない場合は、npm install -g surgeを実行してインストールしてください。surgeコマンドを実行してログインするか、新しいアカウントを作成してください。

プロジェクトパスを聞かれたら、必ずbuildフォルダを指定してください。例：

       project path: /path/to/project/build

HTML5 pushState APIを使用するルーターをサポートするには、Surgeにデプロイする前に、ビルドフォルダ内のindex.htmlの名前を200.htmlに変更することをお勧めします。これは、すべてのURLがそのファイルにフォールバックされることを保証します。

npmへのコンポーネントの公開

Create React Appは、コンポーネントをnpmに公開するための組み込み機能を提供していません。他のユーザーが使用できるようにプロジェクトからコンポーネントを抽出する準備ができている場合は、プロジェクト外の別のディレクトリに移動してから、nwbなどのツールを使用して公開の準備をすることをお勧めします。