ASP.NET Core + Reactのアプリケーションを作成してAzure App Serviceにデプロイする

ASP.NET Core

バックエンドにASP.NET Core Web API、フロントエンドにReact+TypeScriptを使ったプロジェクトを作成して、デプロイするまでの手順をまとめてみました。

スポンサーリンク

対象読者

  • ASP.NET CoreとReactでWebアプリケーションを作成してみたい人
  • C#やASP.NET Core、JavaScriptの基本的な知識がある人(Reactの知識はなくても大丈夫です)

環境

  • Windows 10(Macでも可)
  • Visual Studio Code 1.67
  • .NET 6.0 SDK (v6.0.202)
  • Node.js 16.13

※C#の開発ではVisual Studioを使うことが多いですが、Reactの開発ではVisual Studio Codeの方が何かと便利なので、本記事ではVisual Studio Codeを用いて解説します。

環境構築

まずは環境構築として、必要なツールのインストールやプロジェクトの作成を行います。

.NET SDKのインストール

Visual Studio Codeで.NETの開発をする場合は.NET SDKが必要になります。
コマンドプロンプトやターミナルを開いて以下のコマンドを実行してください。

dotnet --version

バージョンが表示されない場合はSDKがPCにインストールされていないので、以下のページからSDKをインストールしてください。

.NET のダウンロード (Linux、macOS、Windows)
Linux、macOS、および Windows で .NET アプリケーションを構築し、実行するための無料ダウンロード。.NET Framework、.NET、および ASP.NET 用のランタイム、SDK、および開発者パック。

Node.jsのインストール

Reactの開発にはJavaScript実行環境であるNode.jsも必要になります。
先ほどと同様にターミナル等で以下のコマンドを実行してください。

node -v

バージョンが表示されない場合は、以下のページからNode.jsをインストールしてください。

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

プロジェクトの作成とデバッグ実行

必要な環境が整ったら、ターミナル等でデスクトップなどのプロジェクトを作成したい任意のフォルダに移動し、以下のコマンドを実行してください。

dotnet new react -n <任意のプロジェクト名>

実行すると、デフォルトで用意されている「ASP.NET Core with React.js」テンプレートを使用したプロジェクトが作成されます。

作成されたフォルダをVisual Studio Codeで開くと以下のような構成になっているはずです。
(今回はtodo-react-appという名前でプロジェクトを作成しています。)

それでは「F5」でデバッグ実行してみましょう。

初回は少し時間がかかると思いますが、Hello Worldの画面が表示されれば成功です。

プロジェクトの構成

プロジェクト作成時に自動で作成されたファイルを確認してみます。

ClientApp内のファイル

React関係のファイルは全てClientAppフォルダ内に格納されています。

主要なファイルの役割等を上から順番に説明します。

  • /public/index.html:最初に読み込まれるhtmlファイル。
  • /src/components:各画面で使用するコンポーネント(部品)を格納するフォルダ。
  • /src/components/Counter.js:Counterページ用のコンポーネント。ボタンを押すたびに数値がカウントアップする。
  • /src/components/FetchData.js:FetchDataページ用のコンポーネント。ASP.NET Core Web API側からデータを取得して、その内容を画面に表示する。
  • /src/components/Home.js:トップページ用のコンポーネント。
  • /src/components/Layout.js:各ページの共通レイアウトを定義するコンポーネント。
  • /src/components/NavMenu.js:各ページの共通ヘッダ部分を定義するコンポーネント。
  • /src/App.js:index.jsから呼び出される中核となるコンポーネント。LayoutやHomeといった主要なコンポーネントを呼び出す。
  • /src/index.js:App.jsの内容をindex.html内のid=”root”部分に描画する。
  • package.json:npm(パッケージ管理ツール)で利用されるファイル。インストールするべきパッケージを定義したもの。

ASP.NET Core Web API関係のファイル

ClientAppフォルダ以外には通常のASP.NET Core Web APIプロジェクトに関するファイルがありますが、こちらの詳しい説明は割愛します。

サンプルとして用意されている「WeatherForecastController.cs」では、「FetchData.js」からのGETリクエストを受け付けて天気予報の値(固定値)を返しています。

TypeScriptの適用

デフォルトのテンプレートにはTypeScriptが適用されていないため、以下の手順を実行します。

※TypeScript化が不要な場合は飛ばしてください。

型定義ファイルのインストール

TypeScript本体はプロジェクト作成時にインストールされていますが、型定義ファイル (.d.ts)が存在しないため以下のコマンドを実行してインストールを行います。

cd ClientApp
npm install -D @types/react @types/react-dom @types/react-router-dom

実行するとpackage.jsonのdevDependencies(開発時のみ使用するパッケージ)に追加されます。

型定義ファイル自体はClientApp/node_modules/@types内にインストールされます。

tsconfig.jsonの作成と設定

次にTypeScriptの設定ファイルであるtsconfigを作成します。
以下のコマンドを実行してください。

.\node_modules\.bin\tsc --init

実行するとClientAppフォルダ直下にtsconfig.jsonが作成されるので、中身を以下のように書き換えます。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "custom.d.ts"
  ]
}

これでTypeScriptを使うための準備が整いました。

TypeScript化

試しにcomponentsフォルダ内のCounter.jsをTypeScript化してみたいと思いますが、その前にまずクラスコンポーネントでの書き方を現在の主流である関数コンポーネントに書き換えてみます。

こちらが変更前のCounter.jsです。

import React, { Component } from 'react';

export class Counter extends Component {
  static displayName = Counter.name;

  constructor(props) {
    super(props);
    this.state = { currentCount: 0 };
    this.incrementCounter = this.incrementCounter.bind(this);
  }

  incrementCounter() {
    this.setState({
      currentCount: this.state.currentCount + 1
    });
  }

  render() {
    return (
      <div>
        <h1>Counter</h1>

        <p>This is a simple example of a React component.</p>

        <p aria-live="polite">Current count: <strong>{this.state.currentCount}</strong></p>

        <button className="btn btn-primary" onClick={this.incrementCounter}>Increment</button>
      </div>
    );
  }
}

関数コンポーネントに書き換えると以下のようになります。だいぶスッキリしましたね。

import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter</h1>

      <p>This is a simple example of a React component.</p>

      <p aria-live="polite">
        Current count: <strong>{count}</strong>
      </p>

      <button className="btn btn-primary" onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

それでは次にTypeScript化ですが、Counter.jsの場合は拡張子をtsxに変更するだけでOKです。

余力のある方は他のjsファイルもTypeScript化(+関数コンポーネントへ書き換え)をしてみてください。

Azure App Serviceへのデプロイ

ここからはAzureのPaaSサービスであるApp Serviceにアプリを公開する手順について説明します。

Visual Studio Codeの拡張機能を使えば、リソースの作成からデプロイまでを簡単に行うことができます。

※Azureのアカウントを持っていない場合は以下から作成しておいてください。
今回作成するApp Serviceは無料プランのものを使用するため、料金は発生しません。

Azure の無料アカウントを今すぐ作成 | Microsoft Azure
12 か月間無料のサービス、いつでも無料の 25 個以上のサービス、200 米国ドルのクレジットを利用して始めましょう。Microsoft Azure の無料アカウントを今すぐ作成しましょう。

まずVisual Studio Codeで拡張機能の「Azure App Service」をインストールします。

インストールが完了すると左タブにAzureボタンが表示されます。
ここからAzure Explorerを開き、Azureにサインインしてください。

App Service内にサブスクリプション名が表示されたら、「+」ボタン(Create New Web App)をクリックします。

まずApp Serviceの名前を設定します。名前はAzure全体で一意となる必要があります。

ランタイムには.NET 6 (LTS)を選択します。

最後にApp Service プランを選択します。Free (F1)を選べば料金が発生することはないので今回はこれを選択します。

App Serviceの作成が完了するとこのようなメッセージが表示されます。
続けてアプリのデプロイを行いたいので「Deploy」をクリックします。

デプロイするフォルダを選択するように言われるので、デプロイしたいプロジェクトがあるフォルダを選択します。

以下のようなメッセージが表示された場合は「Add Config」をクリックしてください。
デプロイが始まります。

以下のようにメッセージが表示されればデプロイ成功です。「Browse Website」から表示を確認してみましょう。

正常に表示されました。URLが先ほど作成したApp Serviceの名前になっていることも確認できます。

まとめ

ASP.NET Core + React構成のプロジェクトを作成して、App Serviceにデプロイするまでを解説しました。

次回はこの構成でToDoアプリの作成にチャレンジしてみたいと思います。

参考記事

ASP.NET CoreとReactに関する日本語の記事が少なかったので、これらの記事はとても参考になりました。

【令和三年版】ASP.NET CoreでReact開発を行う
ASP.NET Core の React テンプレート使いにくい問題

おすすめ教材

これからReactを学ぶならこちらのUdemy講座がおすすめ。

モダンJavaScriptの基礎から始める挫折しないためのReact入門

TypeScriptも同時に学びたいならこちらもおすすめです。

コメント

タイトルとURLをコピーしました