普段デスクトップアプリや組み込み系を仕事にしているため、
個人でWEBアプリを開発する際、いつもデプロイに苦戦します。
ASP.NETを使ってみたところ、余りにも簡単にデプロイできて感動しました。
作成からデプロイまでの流れをまとめます。
環境
Windows10
VisualStudio2022
C#（ASP.NET Core）
Azure
※Azureアカウントを作成していること前提です。
無料アカウントの作成方法は下記の記事を参照。
アプリを作成する
VisualStudioを起動し、React と入力
「React.jsでのASP.NET Core1」を選択します。
適当なプロジェクト名（ここでは「ReactASP」）を入力した後、デフォルト設定のまま作成までを行います。フレームワークは「.NET 6」とします。
プロジェクト作成完了。
F5 もしくは 再生ボタンで起動できることを確認します。
Home画面
Counter画面
Fetch data画面
アプリがlocalhostで起動することを確認しました。
ここからいよいよデプロイです。
Azureにデプロイする
AzureにWebアプリをホストする先を用意します。
※ Azureアカウント（≠Microsoftアカウント）がないと、Azureにはアクセスできるものの、サービスが使用できません。必ずAzureアカウントを作成してください。
まずはAzureにアクセスします。
「App Service」を選択し、「＋作成」を行っていきます。
Webアプリの作成 という画面が表示されたら、下記画像のように入力します。
- リソースグループ：名前（なんでもOK。ここでは「ASPGroup」）で新規作成。作成済の場合は既存のグループを選択。
- 名前：名前（なんでもOK。ここでは「ASPTestAPP」）を入力。この名前でURLが作られる。
- ランタイムスタック：.NET 6(LTS)を選択する。
- 地域：Japan Eastを選択
- 価格プラン：Free F1 ※デフォルトで有料プランが選択されていることがあるので注意！
他の項目はデフォルトのままで「確認および作成」を実行します。
作成事項がまとめて表示されるので「作成」を選択します。
デプロイが完了しました という画面が表示されれば成功です。
VisualStudioで先ほと作成したプロジェクトを開きます。
プロジェクト（ここでは「ReactASP」）を右クリックし、「発行」を選択します。
ターゲットというメニューが表示されるので「Azure」を選択。
特定のターゲットから「Azure App Service(Windows)」を選択。
AzureアカウントでVisualStudioにサインインしていない場合、下記のような画面が出るので「サインイン」を行います。
※サインインした後、何故かページが切り替わらないバグが発生することがあるので、数回サインインしてみてダメだったらVisualStudioを再起動してください。
サインインが成功すると、Azureで作成したリソースとアプリが一覧表示されます。先ほど作成したアプリ（ここでは「ASPTestAPP」）を選択し「完了」をクリックします。
※ここで「新規作成」ボタンを押すと、リソースとAppServiceをここで作成することができます。もはやAzureすら必要なし！
発行プロファイルが作成されました と表示されるので「閉じる」を選択します。
VisualStudioのタブに戻るので「発行」を選択します。
デプロイが完了すると下記のような画面が表示されます。「サイトを開く」で公開したサイトを開きます。
デプロイ成功！
Fetch data画面に移動し、バックエンド（ASP.NET CORE）とフロントエンド（React.js）の連携が出来ていることも確認します。
最後に
Web系エンジニアでない人間にとって、マウスクリックだけで簡単にデプロイ出来るのはとても有難いです。作ったものの、デプロイ方法が分からないor面倒くさくて公開を諦めることが多かったですが、この方法ならストレスなく開発出来そうな気がします。これもC#、Azure、VisualStudioという異なる要素をすべて牛耳っているお陰なのだと思うと、やはり帝国だなあと感じますね。
-
Reactを使ってみたいから選んだだけで、Vue.jsや空のASP.NET Coreでも問題ありません。 ↩