普段Azureを使っている方であれば、デプロイ作業について何通りかのイメージが沸いたりする方もいらっしゃるかと思いますが、実際に興味はあるけれど、どう手順を踏んでいけばよいかわからないという方も多いと思います。
ここでは、Azure App Serviceでサーバーを立ち上げ、Reactの簡単なソースをKudu上にアップをしてみたいと思います。ソースがそのまま画面上に表示／反映されるところまで、実際に手を動かして考える機会にして頂ければ幸いです。
前編：Viteを使ったReactのTodoリスト作成
後編：Kuduで、Todoリストをデプロイ
として、今回はAzure App Serviceを使って、Kudu上で「ReactのTodoリストを表示してみよう」をテーマに基本事項から確認していきたいと思います。
まずは、Visual Studio Codeで、高速ビルドツールのViteを使って、ReactのTodoリストを作成し、デプロイする資産を準備するところまで確認していきたいと思います。
Viteとは？
Viteのコマンド1つでReactのプロジェクト作成ができますが、実際に習うより慣れろという面が強いのかもしれません。ここでは、Visual Studio Codeのターミナルからコマンドを実行していきます。
実際に、「npm create vite@latest vite-project — –template react」コマンドを実行して、Reactのプロジェクトを作成してみましょう。コマンドを実行すると、「vite-project」フォルダが作成されます。実際に、「vite-project」フォルダの中身を確認できると思います。
srcフォルダ内のファイルを、配布ZIPファイル内の（Todoリストの）ファイルに差し替えます。
>>配布Zipファイル
[SampleReactTodo.zip]
↓のコマンドで開発サーバーを起動してみましょう。
「npm run dev」コマンドを実行後、↓のようにリンクが表示されると思います。
このリンクにアクセスすると、ブラウザ上にTodoリストが表示されることを確認できると思います。
デプロイ用資産の作成
実際にブラウザ上で動作確認ができましたら、デプロイ用の成果物を作成していきましょう。
「npm run build」コマンドを実行すると、distフォルダが作成されます。
このdistフォルダの中身を、デプロイ用の資産としてKuduを使ってアップロードしていきます。
それでは、「App Service」を作成していきたいと思います。
Azure App Serviceとは？
App Serviceのリソース構成について、実行環境となるWeb Serviceと、土台となるApp Serviceプランの２つを指定する必要があることを押さえておきましょう。
作成後に、プランをスケールアップできるよう変更することもできますので、ここではFreeプランでApp Serviceを作成していきたいと思います。
それでは、Web Appsを作成していきましょう。
[App Service]>>[作成] から開いた[Webアプリの作成]画面にて、内容を入力していきます。
デプロイが完了した後に、作成したApp ServiceのKudu管理画面を開いてみましょう。
Web AppsのURL： 「アプリ名.azurewebsites.net」
KuduにてTodoリストを配置
Web Appsに先ほど、Viteで作成したTodoリストのdistフォルダを配置して、デプロイしていきたいと思います。App Serviceには、管理用のツールとして、「Kudu」と呼ばれるツールが提供されています。
Kudu管理画面を開くには、
「https://
FileManagerメニューのwwwrootフォルダ配下にdistフォルダの中身をアップロードします。
ここで1点注意することがあります。dist フォルダが生成された場合でも、
ReactアプリをAzure App Serviceにデプロイする際には web.config の設定が重要です。
特に、ReactのようなSPA（Single Page Application）では、URLルーティングを正しく処理するために web.config を使ってリライト設定を行う必要があります。
↓に記載した「web.config」ファイルもwwwrootフォルダ配下にアップロードしましょう
[画像]►「web.config」
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".webp" mimeType="image/webp" />
</staticContent>
</system.webServer>
</configuration>
今回の内容はいかがだったでしょうか。App Serviceを作成後、実際にアプリが表示されるのを確認できると、こういった感じでアプリを作成するものなのかな、といった具合にアプリ作成からデプロイまでの流れについて理解いただけたのではないでしょうか。自分にできる範囲のものから少しずつAzureにも挑戦してみようかなと思っていただければ幸いです。
以上となります。
参考文献：
・岡田 拓巳『モダンJavaScriptの基本から始める React実践の教科書 』Informatics&IDEA（2021年）