システムデザイン

Microsoft AzureでWeb サイトを作成する

*本記事は旧TechblogからCOLORSに統合した記事です。

我々 m-filedでは IT未経験者が様々な 次世代技術にも対応できる人間を育成する為に、
ST&Company IT Training Centerを2019年に立ち上げました。
その中での取り組みの一つとして、Cloudエンジニアの育成を積極的におこなっております。
今回はMicrosoft社が提供しているAzure をチュートリアルに沿って、WEBサイトの構築を行っていきたいと思います。
コンテンツとしては以下の2回に分けて実践していきます。

◆1回目 Microsoft Azure でホストされる Web サイトを作成する。
チュートリアル:

https://docs.microsoft.com/ja-jp/learn/modules/welcome-to-azure/4-exercise-create-website/

◆2回目 Azure App Service を使用して Web サイトを Azure にデプロイする。
チュートリアル:

https://docs.microsoft.com/ja-jp/learn/paths/deploy-a-website-with-azure-app-service/

今回は1回目 Microsoft Azure でホストされる Web サイトを作成するを記載していきます。

目次

  1. Microsoft Learn のサンドボックスを利用しAzure リソースを作成。

  2. 作成したWeb サイトがにアクセス 。

  3. TLS/SSL の設定を行いHTTPSアクセスのみとする。

  4. WordPressログインにGoogle認証を利用してみる

  5. まとめ

<<1. Microsoft Learn のサンドボックスを利用しAzure リソースを作成>>

先にお伝えした通り、本ページでは、Azureが提供している下記のチュートリアルに沿って、
Azure環境にWeb サイトをデプロイしていきます。

Core Cloud Services – Azure の概要

https://docs.microsoft.com/ja-jp/learn/modules/welcome-to-azure//

演習 – Azure でホストされる Web サイトを作成する


上記の「演習 – Azure でホストされる Web サイトを作成する」では
アカウント作成が完了している状態でアクセスした際に、下記の様な、サンドボックスのアクティブ化が出来ます。
これを利用する事により、時限制限がされた使い捨ての環境が構築出来ます。


◆サンドボックス

サンドボックスをアクティブ化を押下すると、下記のようにアクセス許可の確認が出てきます。

アクセス許可の承諾を行うと、Azure環境にlearn リソースが作成されます。
その後、Azure portal にログインした後にリソースの作成を行います。

Azure Marketplaceに移動した後、[Marketplace を検索] に、「WordPress」と入力します。

WordPressを選択すると下記の画面が表示されますので、「作成」を押下して下さい。

作成ボタン押下後、下記のプロパティの入力が出てきますので、 下記項目を入力していきます。


●アプリ名
 任意のアプリ名を入力、発行される、DNS名の一部に入力したアプリ名が使用されます。


●リソース グループ
 既存のものを使用をマークし、learnから始まるリソースグループを選択すると、
  先程作成した、サンドボックスのリソースグループが利用できます。


●データベース プロバイダー
  今回はMySQL in Appを選択


●App Service プラン/場所
  利用に適したプランを選択。 今回は、開発 / テストのF1がチュートリアで指定されているので、
そちらを選択しました。LocationはUSが指定されています。

<< 2. 作成したWeb サイトにアクセス >>

上記の設定を行い、作成ボタンを押下後、 ポータルの上部にある通知ベル アイコンを選択すると、
下記のデプロイされたリソースが表示されます。


リソースに移動を押下すると、下記の画面に遷移し、
作成したリソース情報が確認出来ます。

URLリンクを押下すると、Wordpressが表示されます。

ここではWordpressの設定の説明は省略致しますが、
これでWordPress Web サイトを構成し、コンテンツを追加できるようになりました。

<< 3. TLS/SSLの設定を行いHTTPSアクセスのみとする>>

上記でWeb サイトの構築が出来ました。
せっかくなので、HTTPSのみのアクセスに変更してみましょう。
Azureの場合、WordPress立ち上げ時からHTTPSの通信になっていますが、
デフォルトではHTTPのアクセスも許可しています。


先程のApp Serviceのリソースグループのサイドバーに表示されている、
TLS/SSLを押下すると下記の画面が表示されます。



表示されたプロトコル設定のHTTPSのみを「オン」にします。
たったこれだけで、HTTPSだけのアクセスに変更されます。



AWSなどで、WordpressをHTTPSにするには、サーバーに証明書をインストールするなど、結構煩雑な作業が要求されます。
それがボタン一つで一瞬にしてHTTPSでのアクセスのみに変更されてしまいました。

<< 5. WordPressログインにGoogle認証を利用してみる >>

今度は、Google認証を利用してみたいと思います。
ここでいうGoogle認証はGoogle OAuth認証となり、
WordPress上でユーザ作成を行わず、既存のGoogleのアカウントを利用し、
WordPressにログインしてもらうものになります。


またGoogle OAuth認証は特定ドメインのみのログインが出来るようにも設定出来ますので、
自社のアカウントのみがログイン出来るように制御する事も可能です。
今回は会社のアカウントを利用し、自社の人間(m-fieldアカウント) のみ がアクセス出来るように設定してみます。


まず、App Serviceのリソースグループのサイドバーに表示されている、
認証/承認を押下すると下記の画面が表示されます。


App Service認証を「オン」に設定し、要求が認証されない場合に実行する
アクション欄の「Googleでログイン」を選択します。
その後、Google認証を押下して下さい。

押下後、下記のGoogleの認証設定が表示されます。
ここではクライアントID、クライアント シークレットの設定は説明いたしませんが、
下記のGoogle コンソールから設定が出来ます。

https://console.developers.google.com/


Googleコンソールで発行したクライアントID、クライアント シークレットを 以下の画面の様に設定します。


設定後、自身の構築したサイトのURLにアクセスすると
下記のように、Google認証が行われ、指定されたドメインのみでのアクセスが可能となります。


<< まとめ >>

上記の通り、WebサイトのデプロイがAWSに比べ、かなり簡単に構築でき、
なおかつ、Deployだけでなく、HTTPS化、OAuthの利用なども、殆ど知識もなく構築できるようになっています。
まだまだAzureの一部分だけしか触れておりません、
今後、引継ぎAzureの学習を進めていきたいと思います。