WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

React 開発用サーバー証明書の更新

by WebSurfer 28. January 2023 18:05

Visual Studio 2022 のテンプレートで作成する .NET 6.0 の React アプリは、Viusal Studio から実行すると React フロント側は Node.js 開発サーバーでホストされます。その Node.js 開発サーバーが HTTPS 通信で使用するサーバー証明書を更新する方法を書きます。

サーバー証明書エラー

この記事は React フロント側が Node.js 開発サーバーで実行される場合の話で、フロント側も IIS Express や Kestrel 上で実行される .NET Core 3.1 や .NET 5.0 のアプリでは関係ないので注意してください。

前置きが少々長くなりますが、まずどのような仕組みになっているかを書きます。

Visual Studio 2022 が ASP.NET Core アプリを実行して HTTPS 通信を行う際に使うサーバー証明書は、dotnet コマンドを使って発行するフレンドリ名が ASP.NET Core HTTPS development certificate という自己署名証明書を使います。

(注: ASP.NET Core アプリでも IIS Express でホストする場合は IIS Express Development Certificate が使用されます。下の画像の青枠の下のものです)

その有効期限は発効後 1 年で、それを過ぎると上の画像のようにサーバー証明書の期限切れエラーとなります。

Windows OS にインストールされている開発用サーバー証明書を更新することは dotnet コマンドを使うなどして可能です。下の画像の青枠の証明書が新たに発行して OS にインストールされた証明書です。

開発用サーバー証明書

ASP.NET Core アプリですとそれだけでサーバー証明書の期限れの問題は解決できるはずです。

しかしながら、.NET 6.0 の React アプリの場合はそれではエラーは解決しません。なぜかと言うと、Node.js 開発サーバーは独自に作成した証明書ファイルと秘密鍵ファイルを使っているからです。なので、それらが更新されない限りエラーは解決しません。

Visual Studio 2022 で作成する .NET 6.0 の React アプリで、HTTPS 通信のためにどのような設定が行われるかを以下に簡単に説明します。

まず、プロジェクトに含まれる Node.js のスクリプト aspnetcore-https.js が dotnet コマンドを使って自己署名証明書を発行し、証明書ファイルと秘密鍵ファイルを以下のフォルダに保存します。なお、ファイルが既に存在する場合はその操作はスキップされます。

%USERPROFILE%\AppData\Roaming\ASP.NET\https

ファイル名はデフォルトで証明書ファイルが <プロジェクト名>.pem、秘密鍵ファイルが <プロジェクト名>.key となります。

次に、aspnetcore-react.js がその証明書ファイルと秘密鍵ファイルを Node.js 開発サーバーがサーバー証明書として使うように設定します。

証明書ファイルと秘密鍵ファイルの場所の情報は、以下のように .env.development.local ファイルに含まれます。.env.development ファイルには PORT=44453 HTTPS=true という設定されていて、Node.js 開発サーバーが指定されたポートで HTTPS でリッスンするように指定されます。

.env.development.local

それらの設定により、Visual Studio 2022 から React アプリのプロジェクトを実行すると、Node.js 開発サーバーは .env.development.local に指定のパスにある証明書ファイルと秘密鍵ファイルを使用して HTTPS 通信を行うようになります。

そのあたりの仕組みはネットで見つけた記事「"React での ASP.NET Core" テンプレートで生成されるプロジェクトの仕組みを調べてみた」が参考になりました。詳しく知りたい方はその記事を読むことをお勧めします。

以上のようなわけで、Node.js 開発サーバーが使用する開発用サーバー証明書を更新するには、.env.development.local 指定のパスにある証明書ファイルと秘密鍵ファイルを新しいものに書き換えるということになります。

それには、ちょっとプリミティブなやり方ですが、既存の証明書ファイルと秘密鍵ファイルを削除するか名前を変えてから Visual Studio 2022 からプロジェクトを実行してやります。それにより、上に述べた Node.js のスクリプト aspnetcore-https.js が新しい証明書ファイルと秘密鍵ファイルを作成してくれます。

下の画像は、既存の reactnet6.pem と reactnet6.key をそれぞれ reactnet6_old.pem と reactnet6_old.key にリネームした後で (赤枠のファイル)、Visual Studio 2022 でプロジェクトを実行し、新たに reactnet6.pem と reactnet6.key を生成させた (青枠のファイル) 結果です。

証明書ファイルと秘密鍵ファイル

他にやり方は無いか探してみたのですが上記の方法以外見つかりませんでした。もっとスマートな方法がありそうな気がします。見つけたら追記します。

Tags: , , ,

React

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  March 2024  >>
MoTuWeThFrSaSu
26272829123
45678910
11121314151617
18192021222324
25262728293031
1234567

View posts in large calendar