4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【第0回】Azureで社内webシステムを再現|構成図と動作の流れ

Last updated at Posted at 2025-04-11

はじめに

初めまして、サバインフラと申します。
インフラエンジニアとしてSIerで3年間勤務し、Windows ServerやAzureの設計・構築を担当してきました。

業務はインフラ部分の構築や移行作業がメインで、フロントエンドやバックエンドの処理については曖昧な理解に留まっていました。
仕組みを正しく把握するために、実際にアプリケーションとインフラの両方を自分で構築してみることにしました。

題材として、以前の勤務先で使用されていた「社員番号から社員情報を検索する社内アプリ」の簡易版を選び、
Azureの無料クレジットを利用して、仮想的な社内システムを構成しました。

今回は作成したシステムの構成と動作フローに絞って説明します。
具体的な作成手順は次回移行の記事で説明します。

システム構成について

azure_onpre_joutai (1).png

上図は、今回構築したシステムの構成図です。

すべての仮想マシンは「East US 2」リージョンに配置し、OSには「Windows Server 2022」を使用しました。
VMのサイズは Standard DC1s v3(vCPU 1 / RAM 8 GiB)で統一しています。

Azureの無料クレジット期間中は、リージョンごとにvCPUの上限(通常は4コア)があります。
今回は仮想マシンを4台使いたかったので、1台あたりvCPU 1コアにしました。

構成要素の説明

  • AD-VM1
    ドメインコントローラー(AD DS)と証明機関(AD CS)を担当。
    発行した証明書はWEBサーバーやADFSサーバーに適用しています。
    また、タスクスケジューラを用いて定時にActive Directoryから社員情報を抽出し、
    DBサーバー(SQL Server)へ送信する自動処理もこのVM上で実行しています。

  • AD-VM2
    セカンダリのドメインコントローラーとして動作し、ADFS(Active Directory Federation Services)によるSSO認証を処理します。

  • WEB-VM1
    IIS上でWebアプリケーションを提供します。アプリ本体はAzure Files上のHTML / JavaScript / PHPファイルを参照しています。

  • DB-VM1
    SQL Serverをインストールし、社員情報(社員番号・名前)を格納。Webアプリケーションからの検索要求に応答します。

  • Azure Files
    Webアプリケーションの静的ファイル(HTML / JS / PHP)を格納。WEBサーバーからマウントして参照されます。

処理の流れ

ここでは、社内ユーザーがWebアプリにアクセスしてから検索結果を得るまでの一連の処理を、2つのフェーズに分けて説明します。

  • フェーズ1:SSO認証が完了し、アプリ画面が表示されるまで
  • フェーズ2:検索処理が実行され、結果が表示されるまで

フェーズ1:SSO認証によるログイン処理

azure_onpre_dousa (5).png

1 ユーザーがWebアプリにアクセス
ブラウザでWebアプリのURLにアクセスします。

2️ WebサーバーがADFSへのリダイレクトを指示
Webサーバー(IIS)がSSO構成になっており、ADFSのログインページへリダイレクトを返します。

3️ ユーザーがADFSに認証情報を入力
ADFSのログイン画面にユーザー名とパスワードを入力します。

スクリーンショット 2025-04-11 17.19.50.png

4️ ADFSが認証し、SAMLアサーションを発行
入力された情報をADと照合し、認証が成功するとSAMLトークン(アサーション)を発行します。

5️ ユーザーがSAMLトークンを持ってWebサーバーへ戻る
トークンを持って再度Webアプリへアクセスします。

6️ Webサーバーがトークンを検証し、アプリ画面を表示
SAMLトークンを受け取り、署名などを検証した後にWebアプリの画面を表示します。

スクリーンショット 2025-04-11 17.20.38.png


フェーズ2:検索処理の実行と結果表示

azure_onpre_dousa2.png

7️ ユーザーが社員番号を入力し検索を実行
アプリ画面の入力フォームに社員番号を入力し、検索ボタンを押します。

8️ WebサーバーがSQL Serverに対してクエリを実行
バックエンドはPHPで構成しており、指定された社員番号に一致する名前をSQL Serverに問い合わせます。

9️ SQL Serverが該当データを返す
該当するレコードをWebサーバーに返します。

10 Webサーバーが結果をユーザーに表示
取得した名前をHTMLとして組み立て、ユーザーのブラウザに表示します。
スクリーンショット 2025-04-11 17.21.33.png


4
3
0

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
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?