はじめに

AzureのWebAppsを使って発行する機会がありました。
WebAppsをAPIサーバー側とクライアントサーバー側と2つ立てて発行する方法を今回学んだので備忘録。(仕事で作成したものの備忘録なので、キャプチャと説明が少なくわかりにくいところがあるかもしれませんが、あくまで備忘録なのでご了承ください。。)

環境

windows10
Visual Studio2019 (サーバーサイドの開発に使用。.net core3.1で開発)
Visual Studio Code(クライアントサイドの開発に使用。Angular8で開発)

APIサーバーを作る

AzureポータルからWebApps作成

VisualStudioから直接作成することもできるのですが、今回はAzureポータルで先に作成してからVisual Studioを使って発行したいと思います。

名前などを適当に入力。
今回私はAPIサーバー側に.NET Core 3.1を採用していましたが、ランタイムストックは「ASP.NET4.7」を選択。

タグとかApplication Insightsを付けたい人とかは別タブがあると思うので、そちらで選択したら、最後に作成ボタンを押して作成。

作成が終わったら必要な部分の設定をしていきます。

ここでDBの接続文字列の設定をしています。
なお、AzureSQLDatabaseののせ方は本記事に記載していないため、ご了承ください。

また、↑これを設定することで標準時刻を日本時刻にすることができます。
これを設定しないとDBに落ちる時刻が日本時刻にならないといったトラブルがありました。

スタックは.NET Coreに

赤枠のは消してもいいみたい

↑ここにこの後作成するクライアントサイドのAppServiceのURLを記述します。

設定が終わったら、Visual Studio2019を使用して発行します。

ユーザー名とPWはここを見るとあります。↓

クライアントサーバーを作る

Visual Studio Codeの拡張機能を使う方法と、FTPツールを使う方法2つ試しました。
兎にも角にもまず最初にクライアントサイドのAppServiceを作成。
作成方法はサーバーサイドと同じです。
(ランタイムストックはASP.NETを選択したようなNodeを選択したような記憶があります。。曖昧で申しわけない。。)
先輩メモによるとWindowsでないとweb.configの設定見たりとかIIS的なことができないためにwindowsを選択できるランタイムストックにする必要があったようです。

設定値はサーバーサイドと基本的に同じですが、違う部分だけ載せます。

クライアントサイドにはDBの接続文字列情報を記載する必要はなし！

CORSの設定は必要なし。

※作成したクライアントサイドのURLをサーバーサイドのCORSに設定するのは忘れずに。

Angular(クライアント)側のコードをビルド

Angularのドキュメントに従って、ビルドします。
ここで、environment.prod.tsの「apiUrl」にサーバーサイドのURLを設定します。

web.configの追加

<configuration>
    <system.webServer>
        <rewrite>
          <rules>
                <rule name="Index Rule" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Redirect" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

上のは例です。こんな感じのweb.configを追加します。windowsでは必須みたいです。

Visual Studio Codeの拡張機能を使用して発行

これを使います。

インストールすると、Azureマークが右端にできて、vscodeから簡単にDeployできちゃいます。

FTPツールを使用して発行

FileZillaというのを使いました。クライアントの方です。

インストールできたら、FileZillaを起動。

サイトマネージャーをクリック

ホスト、ユーザー名、PWはクライアント側のWebAppsのここを参考に↓

※FileZillaのホスト＝FTPSエンドポイント

ローカルサイトの先ほどビルドしたファイルをリモートサイトにアップロードすれば完了です。
ファイルを全選択して右クリックをするとアップロードを選択できます。

さいごに

やっぱりPaaSは楽でいいですね