ASP.NET Core で React プロジェクト テンプレートを使用するUse the React project template with ASP.NET Core

更新された React プロジェクト テンプレートは、React および create-react-app (CRA) 規則を使用してリッチなクライアント側ユーザー インターフェイス (UI) を実装する ASP.NET Core アプリを開発する場合に、便利な開始点として利用できます。The updated React project template provides a convenient starting point for ASP.NET Core apps using React and create-react-app (CRA) conventions to implement a rich, client-side user interface (UI).

このテンプレートには、API バックエンドとして機能する ASP.NET Core プロジェクトと、UI として機能する標準の CRA React プロジェクトの両方を作成する場合と同等の機能がありますが、単一のユニットとしてビルドと発行が可能な単一のアプリ プロジェクトで両方をホストできるので便利です。The template is equivalent to creating both an ASP.NET Core project to act as an API backend, and a standard CRA React project to act as a UI, but with the convenience of hosting both in a single app project that can be built and published as a single unit.

React プロジェクト テンプレートは、サーバー側のレンダリング (SSR) 用ではありません。The React project template isn't meant for server-side rendering (SSR). React および Node.js を使用して SSR を行うには、Next.js または Razzle を検討してください。For SSR with React and Node.js, consider Next.js or Razzle.

新しいアプリを作成するCreate a new app

ASP.NET Core 2.1 がインストールされている場合は、React プロジェクト テンプレートをインストールする必要はありません。If you have ASP.NET Core 2.1 installed, there's no need to install the React project template.

コマンド プロンプトで dotnet new react コマンドを使用して、空のディレクトリの中に新しいプロジェクトを作成します。Create a new project from a command prompt using the command dotnet new react in an empty directory. たとえば、次のコマンドは、my-new-app ディレクトリにアプリを作成し、そのディレクトリに切り替えます。For example, the following commands create the app in a my-new-app directory and switch to that directory:

dotnet new react -o my-new-app
cd my-new-app

Visual Studio または .NET Core CLI からアプリを実行します。Run the app from either Visual Studio or the .NET Core CLI:

生成された .csproj ファイルを開き、そこから通常の方法でアプリを実行します。Open the generated .csproj file, and run the app as normal from there.

ビルド プロセスは、初回の実行で npm の依存関係を復元します。これには数分かかる可能性があります。The build process restores npm dependencies on the first run, which can take several minutes. 以降のビルドは非常に高速になります。Subsequent builds are much faster.

プロジェクト テンプレートは、ASP.NET Core アプリと React アプリを作成します。The project template creates an ASP.NET Core app and a React app. ASP.NET Core アプリは、データ アクセス、承認、およびその他のサーバー側の操作で使用することを目的としています。The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. ClientApp サブディレクトリ内の React アプリは、UI に関するすべての 操作で使用することを目的としています。The React app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

ページ、画像、スタイル、モジュールなどを追加するAdd pages, images, styles, modules, etc.

ClientApp ディレクトリは標準の CRA React アプリです。The ClientApp directory is a standard CRA React app. 詳細については、公式の CRA ドキュメントを参照してください。See the official CRA documentation for more information.

このテンプレートによって作成される React アプリと CRA 自体によって作成されるアプリにはわずかな違いがありますが、アプリの機能は変わりません。There are slight differences between the React app created by this template and the one created by CRA itself; however, the app's capabilities are unchanged. テンプレートによって作成されるアプリには、ブートストラップベースのレイアウトと基本的なルーティングの例が含まれます。The app created by the template contains a Bootstrap-based layout and a basic routing example.

npm パッケージをインストールするInstall npm packages

サードパーティ製の npm パッケージをインストールするには、ClientApp サブディレクトリでコマンド プロンプトを使用します。To install third-party npm packages, use a command prompt in the ClientApp subdirectory. 次に例を示します。For example:

cd ClientApp
npm install --save <package_name>

発行と配置Publish and deploy

開発中、アプリは、開発者に便利なように最適化されたモードで実行されます。In development, the app runs in a mode optimized for developer convenience. たとえば、JavaScript バンドルには、ソース マップが含まれます (デバッグ時に元のソース コードを確認できるようにするためです)。For example, JavaScript bundles include source maps (so that when debugging, you can see your original source code). アプリは、ディスク上の JavaScript、HTML および CSS ファイルの変更を監視し、これらのファイルの変更が発生した場合は、再コンパイルと再読み込みを自動的に実行します。The app watches JavaScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.

運用時は、パフォーマンスが最適化されたバージョンのアプリが提供されます。In production, serve a version of your app that's optimized for performance. これは、自動的に実行されるように構成されています。This is configured to happen automatically. 発行すると、ビルド構成によって、クライアント側コードの縮小され、トランスパイルされたビルドが生成されます。When you publish, the build configuration emits a minified, transpiled build of your client-side code. 開発ビルドとは異なり、運用ビルドは、サーバーへの Node.js のインストールを必要としません。Unlike the development build, the production build doesn't require Node.js to be installed on the server.

標準的な ASP.NET Core のホストと展開方法を使用できます。You can use standard ASP.NET Core hosting and deployment methods.

CRA サーバーを個別に実行するRun the CRA server independently

ASP.NET Core アプリが開発モードで起動された場合、プロジェクトは、CRA 開発サーバーの独自のインスタンスをバックグラウンドで開始するように構成されます。The project is configured to start its own instance of the CRA development server in the background when the ASP.NET Core app starts in development mode. これが便利なのは、別のサーバーを手動で実行する必要がないためです。This is convenient because it means you don't have to run a separate server manually.

この既定の設定には欠点があります。There's a drawback to this default setup. C# コードを変更し、ASP.NET Core アプリを再起動する必要がある場合、CRA サーバーが毎回再起動します。Each time you modify your C# code and your ASP.NET Core app needs to restart, the CRA server restarts. 再起動には数秒かかります。A few seconds are required to start back up. C# コードを何度も編集するが、CRA サーバーが再起動するまで待ちたくない場合は、ASP.NET Core プロセスから独立した CRA サーバーを外部で実行します。If you're making frequent C# code edits and don't want to wait for the CRA server to restart, run the CRA server externally, independently of the ASP.NET Core process. 次の手順に従います。To do so:

  1. 次の設定を使用して、 .env ファイルを ClientApp サブディレクトリに追加します。Add a .env file to the ClientApp subdirectory with the following setting:

    BROWSER=none
    

    これにより、CRA サーバーを外部で起動するときに、Web ブラウザーが開かなくなります。This will prevent your web browser from opening when starting the CRA server externally.

  2. コマンド プロンプトで、ClientApp サブディレクトリに切り替え、CRA 開発サーバーを起動します。In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server:

    cd ClientApp
    npm start
    
  3. 独自のインスタンスを起動する代わりに外部の CRA サーバー インスタンスを使用するように ASP.NET Core アプリケーションを変更します。Modify your ASP.NET Core app to use the external CRA server instance instead of launching one of its own. Startup クラスで、spa.UseReactDevelopmentServer の呼び出しを以下に置き換えます。In your Startup class, replace the spa.UseReactDevelopmentServer invocation with the following:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
    

ASP.NET Core アプリの起動時に CRA サーバーが起動されなくなります。When you start your ASP.NET Core app, it won't launch a CRA server. 代わりに、手動で開始したインスタンスが使用されます。The instance you started manually is used instead. これにより、起動と再起動を高速化できます。This enables it to start and restart faster. React アプリが毎回リビルドされるまで待つ必要がなくなります。It's no longer waiting for your React app to rebuild each time.

重要

"サーバー側のレンダリング" は、このテンプレートではサポートされていません。"Server-side rendering" is not a supported feature of this template. このテンプレートの目標は、"create-react-app" と同等のものを提供することです。Our goal with this template is to meet parity with "create-react-app". そのため、"create-react-app" プロジェクトに含まれていないシナリオや機能 (SSR など) はサポートされておらず、ユーザーのための演習として残されています。As such, scenarios and features not included in a "create-react-app" project (such as SSR) are not supported and are left as an exercise for the user.

その他の技術情報Additional resources