【Azure】App Service の構築【開発メモ】

Cloud

※本サイトではアフィリエイト広告を利用しております。

※本サイトではアフィリエイト広告を利用しております。

Azure App Service の構築

昨今、システム開発の仕事に従事していると、クラウド化の波がどんどん大きくなってきているのを感じます。

そこで、今回は、3大クラウドベンダーの1つ、Microsoft が提供しているクラウドサービス「Azure」を使って簡単な Web サービスを構築する手順を解説いたします。

また、PaaS(App Service)を使っての Web サービスの構築となるため、IaaS(仮想マシン)の構築は対象外となります。

<この記事で学べる事>

·App Service の無料プランを使った App Service の構築方法



なお、Microsoft Azure を利用するため、Microsoft アカウントを持っていることが前提となります。


スポンサーリンク

スポンサーリンク

スポンサーリンク

App Service の無料プラン

以下は、Microsoft Azure の App Service を無料で使用する場合の制約となります。

Azure App Service で、Web、モバイル、または API のアプリ 10 個と 1 GB のストレージ

Azure 無料アカウント FAQ より引用



無料枠では、1番下のプランの App Service を10個まで使用できます。1番下のプランなので性能は期待できません。
無料プラン(F1)と Basic プラン(B1)を比較してみます。

画像クリックで拡大画像を表示します


やはり、無料プラン(F1)だと性能は期待できません。また、カスタムドメインを使うことができないため、ドメインに既定のドメイン「azurewebsites.net」が付与されます。

また、既定のドメインの「azurewebsites.net」を使う場合は、追加料金なしで SSL 接続を提供しています。

性能やドメインに関しては残念な気もしますが、検証目的のため、無料プラン(F1)を利用することにします。


App Service プランの作成

App Service 作成する前に、App Service 作成時に必要な App Service プランの作成手順を解説いたします。



Azure ポータルサイトにログインします。

画像クリックで拡大画像を表示します

[すべてのサービス] の検索ボックスに「App Service」を入力します。

[App Service プラン] が表示されます。[App Service プラン] をクリックします。




次に、「App Service プラン」画面が表示されます。

画像クリックで拡大画像を表示します

[App Service プランの作成] をクリックします。




次に、「App Service プランの作成」画面が表示されます。

画像クリックで拡大画像を表示します

[プロジェクトの詳細] の [サブスクリプション]、[リソースグループ] を設定します。

また、[App Service プランの詳細] の [名前]、[オペレーティング システム]、[地域] を設定し [確認および作成]をクリックします。

なお、[価格レベル] の [SKUとサイズ] は無料プランを使うため [Free F1] を指定します。




次に、「App Service プランの作成」(確認および作成)画面まで進めます。

画像クリックで拡大画像を表示します

設定内容を確認し誤りがなければ [作成] をクリックします。




App Service プランが作成されました。

画像クリックで拡大画像を表示します

App Service プラン名は「TMAppServiceFreePlan」としています。



App Service の作成

App Service プランが作成できましたので、続いては、App Service の作成手順を解説いたします。



[すべてのサービス] の検索ボックスに「App Service」を入力します。

画像クリックで拡大画像を表示します

[App Service] が表示されます。[App Service] をクリックします。




次に、「App Service」画面が表示されます。

画像クリックで拡大画像を表示します

[App Service の作成] をクリックします。




次に、「Web アプリの作成」画面が表示されます。

画像クリックで拡大画像を表示します

[プロジェクトの詳細] の [サブスクリプション]、[リソースグループ] を設定します。

また、[インスタンスの詳細] の [名前]、[公開]、[ランタイム スタック]、[地域] を設定し、[App Service プラン] の [Windows プラン(Japan East)] に「App Service プランの作成」で作成した App Service プランを設定し [確認および作成] をクリックします。


本稿の例では、[インスタンスの詳細] の [公開] に [コード] を設定し、[ランタイム スタック] に [ASP.NET V4.8] を設定しています。





次に、「Web アプリの作成」(確認および作成)画面まで進めます。

画像クリックで拡大画像を表示します

設定内容を確認し誤りがなければ [作成] をクリックします。




App Service が作成されました。

画像クリックで拡大画像を表示します

App Service 名は「tmwebapp01」としています。



App Service の動作確認

App Service が作成できたため、続いては、App Service の動作を確認したいと思います。



作成した App Service の画面を開きます。

画像クリックで拡大画像を表示します

[開発ツール] → [コンソール] をクリックすると App Service 内を確認することができます。

App Service を作成すると wwwroot 直下に「hostingstart.html」が自動的に配置されます。




Web サイトの確認として、Web ブラウザから App Service 作成時に自動的に配置された「hostingstart.html」にアクセスします。

画像クリックで拡大画像を表示します

「hostingstart.html」が表示されました。Web サイトは正しく機能しています。




次に、「.Net Framework」のアプリケーションを配置し、App Service の画面を開きます。

画像クリックで拡大画像を表示します

コンソールから配置した「.Net Framework」のアプリケーションが確認できました。




Web ブラウザから「.Net Framework」のアプリケーションにアクセスします。

画像クリックで拡大画像を表示します

「.Net Framework」のアプリケーションが表示されました。

App Service も正しく設定されています。



SSL 接続設定

App Service のデフォルト設定では SSL 接続に対応していないため、App Service のプロトコル設定を変更します。



以下は、App Service のプロトコル設定で http 接続が許可されている場合です。

画像クリックで拡大画像を表示します

ブラウザのアドレスバーに「保護されていない通信」と表示されます。

既定のドメインの「azurewebsites.net」を SSL 接続のみに設定を変更します。




作成した App Service の画面を開きます。

画像クリックで拡大画像を表示します

[設定] → [TLS/SSL の設定] をクリックします。

なお、[プロトコル設定] の [HTTPSのみ] がデフォルトでは [オフ] になっています。




次に、プロトコル設定を変更します。

画像クリックで拡大画像を表示します

[プロトコル設定] の [HTTPSのみ] を [オン] に変更します。

プロトコル設定の変更後、http 接続で Web サイトにアクセスします。

画像クリックで拡大画像を表示します

鍵アイコンが表示され「保護されていない通信」が消えました。

https にリダイレクトされ SSL 接続のみのアクセスに変更されました。



まとめ

以上が、無料プランを使った App Service の構築手順となります。

いかがでしたでしょうか?

無料で利用することができるため、これから App Service を学習したい場合や簡単なアプリケーションを検証する場合など多岐にわたって活用することができると思います。
また、Docker コンテナも使えるためコンテナを学習した場合などにも向いているのではないでしょうか。

なんと言っても無料です。一度、試してみてはいかがでしょうか。

なお、本ブログでは App Service へ Azure DevOps の Pipeline を使ったビルドからデプロイを実行する手順も解説しています。よろしければご覧ください。



また、本ブログでは App Service の監視手順も解説しています。よろしければご覧ください。








最後までお読みいただきありがとうございます。



では。


スポンサーリンク

スポンサーリンク

Cloud
スポンサーリンク
たまおをフォローする
スポンサーリンク
タイトルとURLをコピーしました