Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kerobot(MANABU KIKUCHI)

ASP.NET Core Web API + React で作成したホロジュール Web アプリを Azure App Service へデプロイした

Posted at

はじめに

前回作成した、ホロライブの配信スケジュールを表示する Web アプリを Azure App Service へデプロイしてみました。
思っていた以上に簡単にデプロイできたのでまとめておきます。

今回のプログラムは、Visual Studio で「React.js での ASP.Net Core」テンプレートを利用して作成し、フロントエンドを React、バックエンドを ASP.NET Core Web API という構成にしています。
バックエンドとフロントエンドのプロジェクトをあわせてホストすることになります。

Azure App Service とは

いわゆる PaaS に該当し、OS やミドルウェア（Webサーバーやアプリケーションサーバーなど）のインストールや管理をすることなく、ビルド済みのアプリケーションをデプロイして公開できる仕組みです。

App Service の概要

OS やミドルウェアの管理を Azure 側に任せ、開発者はそれより上位のランタイムやフレームワークやアプリに関わることになります。
Azure App Service のプランによりますが、自動スケールや高可用性の対応、Windows や Linux のサポート、GitHub、Azure DevOps、任意の Git リポジトリからの自動デプロイも可能です。

振り返り

これまで、このような順序で開発を行ってきました。

  1. ホロライブの配信スケジュール「ホロジュール」をスクレイピングして MongoDB へ蓄積する Python プログラム

  2. MongoDB へ蓄積した配信スケジュールを参照する Python Flask Web API

  3. Python Flask Web API を用いて配信スケジュールを表示する Android アプリ

  4. Python Flask Web API を用いて配信スケジュールを表示する ASP.NET Core Web API + React Web アプリ

今回は 4 で作成した、ASP.NET Core Web API + React Web アプリを、Azure App Service へデプロイしてみます。

開発環境

  • フロントエンド React
    • node v14.18.2 / npm 6.14.15 (nvm)
    • React 16.12.0
    • ECMAScript 5
  • バックエンド ASP.NET Core Web API
    • .NET 5 (Visual Studio 2022 v17.0.3)
    • ASP.NET Core 5.0
    • C# 9

プログラムの変更

Azure App Service へデプロイするため、プログラムを少し修正しました。

  1. シークレット情報の取得方法

    バックエンドの ASP.NET Core Web API で利用するシークレット情報を UserSecrets ではなく環境変数から取得するように変更しました。

    Azure Key Vault について

    Azure App Service へデプロイするにあたり、シークレット情報を Azure Key Vault で管理し、アプリケーション設定から参照するためです。

    public void ConfigureServices(IServiceCollection services)
{
    var userName = Environment.GetEnvironmentVariable("API_USERNAME");
    var password = Environment.GetEnvironmentVariable("API_PASSWORD");
    var baseUrl = Environment.GetEnvironmentVariable("API_URL");
    services.AddTransient<IDataService>(_ => new DataService(userName, password, baseUrl));
    services.AddControllersWithViews();
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/build";
    });
}

  2. Web API のルーティングの指定

    他のルーティングとの競合を避けるため、ルーティングパターンを変更しました。

    ASP.NET Web API 2 での属性ルーティング

    規則ルーティング（Conventional routing）から、Web API 2 の属性ルーティング （Attribute routing）へ変更しています。

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...
    app.UseSpaStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
    ...
}

    [Route("api/[controller]")]
[ApiController]
public class AccessTokenController : ControllerBase
{
    ...
}

プログラムのデプロイ

ここから、 Azure App Service へのデプロイ手順となります。

Azure Portal にログインしてから作業を行います。（ここまでの手順は割愛）

リソースグループ

まずは、今回のデプロイのためのリソースグループを作成します。
01_リソースグループ.jpg

サブスクリプションとリージョン（地域）を選択し、リソースグループ名を入力して、リソースグループを作成します。
02_リソースグループ作成.jpg

App Service プラン

つぎに、App Service プランを作成します。
03_AppServiceプラン.jpg

今回は、F1プラン＝無料プランを選択しました。

F1プランは無料ですが、RAM 1GB、ストレージ 1GB、共有環境 (60 CPU 分/日) などの制限があります。
04_AppServiceプラン_スペック選択.jpg

サブスクリプションと作成したリソースグループを選択し、プランの名前とリージョン（地域）とサイズを指定します。
05_AppServiceプラン作成.jpg

キーコンテナ（KeyVault）

キーコンテナを作成してシークレットを管理します。

ここだけ Azure Cloud Shell を利用してコマンドを実行しました。

キーコンテナを作成します。

> az keyvault create --name "holodulekv" --resource-group "holoresource" --location "Japan East"

シークレットを登録します。

> az keyvault secret set --vault-name "holodulekv" --name "API-USERNAME" --value "********"
> az keyvault secret set --vault-name "holodulekv" --name "API-PASSWORD" --value "********"
> az keyvault secret set --vault-name "holodulekv" --name "API-ENDPOINT" --value "********"

登録したシークレットはこんな感じで確認します。

> az keyvault secret show --vault-name "holodulekv" --name "API-USERNAME"
> az keyvault secret show --vault-name "holodulekv" --name "API-PASSWORD"
> az keyvault secret show --vault-name "holodulekv" --name "API-ENDPOINT"

このように登録されます。
06_KeyVaultコンテナ.jpg

デプロイ

Visual Studio から Azure App Service へのデプロイを行います。

デプロイするプロジェクトの発行をクリックし、ターゲットとして Azure を選択します。
07_web.jpg

特定のターゲットとして Azure App Service (Windows) を選択します。
08_web.jpg

名前を指定し、サブスクリプションとリソースグループとホスティングプランを選択して、 Azure App Service インスタンスを新規作成します。
09_appservice作成.jpg

作成した Azure App Service インスタンスを選択して完了をクリックします。
10_web.jpg

デプロイの準備が完了しました。
11_発行.jpg

発行をクリックしてデプロイを行います。

ブラウザが自動で表示されますが、この時点ではまだ Webアプリを利用することができません。
引き続き、環境変数とシークレットを接続するための、KeyVault へのアクセスポリシーやアプリケーション設定を行います。

デプロイが完了した時点で、リソースグループは下記のようになります。
12_リソースグループ.jpg

アクセスポリシー（KeyVault）

キーコンテナのアクセスポリシーを開きます。
13_アクセスポリシー.jpg

Web アプリに対して、シークレットの取得を許可します。
14_アクセスポリシーの追加.jpg

このようになります。
15_アクセスポリシー.jpg

シークレット識別子（KeyVault）

シークレットとアプリケーションを接続するため、シークレットの識別子をメモしておきます。

登録されているシークレットを選択します。
16_シークレット.jpg

現在のバージョンのシークレットを選択します。
17_シークレット.jpg

アプリケーション設定で利用するため、シークレット識別子をメモしておきます。
18_シークレット.jpg

アプリケーション設定

Web アプリの構成でアプリケーション設定を追加してシークレットと紐づけます。
19_構成.jpg

名前をプログラムから参照する環境変数名、値にKeyVault参照を設定します。
KeyVault参照は以下のいずれかのパターンで設定します。

@Microsoft.KeyVault(SecretUri={シークレット識別子})
@Microsoft.KeyVault(VaultName={KeyVault名};SecretName={シークレット名};SecretVersion={シークレットバージョン})

20_アプリケーション設定追加.jpg

アプリケーション設定の保存後、下記のように「キーコンテナの参照」が成功していればOKです。
21_構成保存.jpg

ここまででデプロイは完了です。OSやミドルウェアのインストールが不要であることが実感できると思います。

動作確認

Azure Web Service へデプロイした Web アプリにアクセスできました。
22_動作確認.jpg

おわりに

プログラムのアプリケーション設定とKeyVaultのシークレットを接続するのにハマってしまい、実現するまでにかなり遠回りしましたが、Azure App Service へのデプロイについては、拍子抜けするほど簡単に行うことができました。
今回はフリープランを利用していますので、フリープラン以外で利用できる機能などの確認や、これまでに Python で作成したアプリのデプロイなども試してみようと思います。

11
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?