ヨコヤマ企画: 3月 2023

2023年3月26日日曜日

用意した写真は、アイドルユニット「NoelliL(ノエリル)」が、2023年3月15日に川崎クラブチッタで行なったライブの様子です。

ストレージBlobの機能だけでは、独自ドメインを使った場合はSSLに対応できません。そこで、今回は、CDN(Content Delivery Network)を使ってSSL対応する方法を紹介します。

CDNの提供者は、高速なネットワークとストレージを備えたデータセンターを世界各地に持っています。画像や動画データを、CDNサイトに一時的に保存する(キャッシュする)ことで、応答性を高めるのがCDNの大事な役割です。また、多くの場合はSSL通信に必要な証明書を割り当てる仕組みも備えています。

▲CDNの利用

今回は、それほど多くのアクセスも、世界中に分散したクライアントも想定していませんが、SSL化するためにCDNを利用します。

Azure上で提供されるCDNは複数ありますが、今回はVerizon社がAzure上で展開しているサービス(Verizon Standard)を使いました。この場合の費用は、最初の10TBまでは1GBあたり約18円です。AzureからCDNへの通信料金はかかりませんが、CDNに無料枠はないのでCDNを使わない場合と比べて、若干のコストが追加されます。

なお、ストレージアカウントからCDNにコピーするためのネットワーク帯域には課金されません。

それでは構成してみましょう。前回の続きで、2つのサイトを構成します。

Step 1: CDNプロファイルとエンドポイントの作成

最初に、Azureから「Front DoorとCDN プロファイル」の管理ツールを開き、新規作成します。今回は、[その他のオファリングの探索]から[Azure CDN Standard from Verizon]を選択しました。

CDNは、すでにAzureのデータセンターまたはAzureと契約したCDNベンダーのデータセンターに展開されているため、「構築」の必要はありません。作業としては新規作成と同じですが、実際には「プロファイル(構成情報)」が定義されるだけなので、管理ツールには「CDNのプロファイル」と表示されます。

CDNプロファイルを作成するとき、同時に「エンドポイント」も指定できます(あとから追加することもできます)。エンドポイントは、キャッシュするWebサイトの代わりに指定するURLです。

▲CDNプロファイルとエンドポイントの作成

ここでは[新しいCDNエンドポイントを作成する]をチェックして、エンドポイントも同時に作成しました。画面ではnoellil20230315-2となっています。これにAzur CDNのDNSサフィックスであるazureedge.netを追加して http://noellil20230315-2.azureedge.net/ ができました。同様にもう1つのサイトも構成し、最終的に以下の2つのサイトを作成しました。

エンドポイントを作成するときは、元となるデータ(ソース)の場所と種類を指定します。今回はAzureストレージBlobの静的Webサイトを使うので[ストレージの静的Webサイト]を選びました。

しばらく待つとエンドポイントが構築されます。

▲作成されたエンドポイント

この状態で、初回アクセスは大元のストレージBlobから情報を取得するようになるのですが、少々時間がかかるようです。アクセスしても、しばらくは以下のような状態が続きます。

▲エンドポイント作成直後(まだコンテンツが複製されていない)

しばらく待つとCDNにファイルが複製されます。エンドポイントにアクセスすると目的の画像が表示されるはずです。

1つのCDNプロファイルで、複数のエンドポイントを作成できます。CDNプロファイル作成後に、エンドポイントを追加してください。今回は、2つのWebサイトを作成したので、エンドポイントも2つ用意しました。

Step 2: カスタムドメインの追加

このままではAzure CDNのDNSドメインサフィックスが使われてしまうので、カスタムドメインを追加します。

前回は、ストレージBlobにカスタムドメインを割り当てたのですが、その設定(DNSのCNAMEレコード)は削除してください。同じ名前を、今度はCDNに割り当てます。

登録するカスタムドメイン名: noellil20230315.nwtraders.net
Azure CDNのドメイン名: noellil20230315.azureedge.net

Webサイトを2つ作っているので、同様にもう1つのサイトのDNS名も割り当てます。

登録するカスタムドメイン名: noellil20230315-2.nwtraders.net
Azure CDNのドメイン名: noellil202303152.azureedge.net

DNSへの登録が完了したら、Azure CDNの[エンドポイント]の管理画面で、カスタムドメインを追加します。

Step 3: SSL用証明書(マネージド証明書)の割り当て

最後に、CDNにSSL用証明書を追加します。証明書は自分で作成したものを持ち込むこともできますが、Azure CDNから作成することもできます。Azure CDNで作成した証明書は「マネージド証明書」と呼ばれ、有効期間が来た場合の更新など、管理作業をすべてAzureが代行してくれます。しかも、料金はかかりません。

「厳密な審査を経た証明書を使いたい」といった要望でもない限り、ほとんどの場合はこれで十分でしょう。

作成したカスタムドメイン名をクリックすると、SSLの構成画面に切り替わります。ここで[カスタムドメインHTTPS]を[オン]にし、[CDNマネージド]を選択して、[保存]をクリックします。

▲マネージド証明書の作成

その後の処理はすべて自動的に進行します。完了するまでは6時間ほどかかるので、気長に待っていてください。Azureの管理ツールを終了しても問題ありません。バックグラウンドで処理は継続します。

▲マネージド証明書の作成(約6時間かかる)

処理が完了しても、実際に有効になるまではさらに時間がかかります。以下は、構成が完全に完了する前にアクセスし、証明書情報を表示した例です。

▲マネージド証明書が完全に構成される前にアクセスした場合

以上で、Azure CDNを使ったSSL化が完了し、以下のサイトができました。

写真はアイドルグループ「NoelliL(ノエリル)」

2023年3月25日土曜日

【Azure】ストレージBlobで静的Webサイトを作成する(非SSL独自ドメインの場合)

自分が撮った写真を、多くの人に公開したいと思ったことはありませんか。

ブログサービスで大量の写真を扱うのは面倒ですし、そもそも写真枚数に制限のあるサービスも多いようです。

かといって、自分でWebサイトを作るのはもっと大変ですし、安くても月額数百円から数千円の費用がかかります。

そこで、Microsoft AzureのストレージBlob(AWSのS3的なもの)で、静的Webサイトを作成し、カスタムドメインを設定してSSL化します。

必要な費用はストレージアカウントのコストとストレージからインターネットへ出ていく費用のみです。厳密な価格予測は難しいのですが、ざっと以下のとおりです。

ストレージ費用…1GBあたり1ヶ月約2.7円(ブログ執筆時点での東日本)
ネットワーク費用…最初の100GB無料

その他にストレージアクセスの回数による加算などもありますが、どうせアクセス数も少ないでしょうから無視します。ネットワーク費用も、100GBを超えると1GBあたり十数円が加算されますが、無視します。以前は5GBしか無料枠がなかったのですが、現在は100GBに増えています。

今回作成したWebサイトは2つありますが、あわせても1GB未満です。つまり、1ヶ月3円くらいのコストでWebサイトが作成できます。

それでは設定していきましょう。なお、Azureの契約や基本的な操作手順などは省略します。詳しく知りたい方は拙著「ひと目でわかるAzure」の第1章を参照してください。必要なストレージ操作などもこの章に書いてあります。

ひと目でわかるAzure基本から学ぶサーバー＆ネットワーク構築第4版

Step 0: 準備

Webサイトを作ります。用意したのは、アイドルユニット「NoelliL(ノエリル)」が、2023年3月15日に川崎クラブチッタで行なったライブの写真です。

Webサイトの作成には、Adobe LightroomのWeb作成機能を使いました。数クリックでWebアルバムができます。本題ではないので詳しくは説明しませんが、こんな感じのファイルができました。階層構造があります。

▲Webアルバムのファイル

Step 1: 汎用ストレージアカウントの作成

Azureで汎用ストレージアカウントを作成します。速度はそれほど要求されないのでStandard (HDDタイプ)で十分です。

パラメーターはすべて既定値で問題ありませんが、ここではローカル冗長を指定しました。ローカル冗長はAzureのデータンセンター内で3重化します。Webアルバムに使用したファイルは別途バックアップがあるので、ローカル冗長で十分です。

「階層構造があるのに大丈夫?」と思った方、Azureに詳しいですね。既定値で作成したBlobは階層構造を持ちません。ストレージアカウントの下にコンテナがあって、それで終わりなので、1階層です。ですが、ファイル名にスラッシュ(/)があると、階層のように見せることができます。Blobを扱うツールの多くは、ローカルファイルの階層構造をスラッシュを含むファイル名に自動変換する機能を持っています。あとで実際にやってみましょう。

ストレージアカウントができたら、静的Webサイトを有効にします。この時、インデックスドキュメントとして、Adobe Lightroomが作成したファイル名index.htmlを指定します。

▲Blobの静的Webサイトを有効化

[保存]をクリックすると、静的Webサイトが完成です。

▲Blobの静的Webサイトが完成

この時、ストレージアカウントに$webというコンテナが作成されます。ここにWebサイトを構成するファイルを置きます。

Step 2: コンテンツファイルのコピー

ストレージアカウントに作成された$webにファイルをコピーします。今回は手軽に使えるazcopyコマンドを使いました。マイクロソフトのWebサイトからダウンロードしてください。

azcopyはAzure ADを使ったロールベースアクセス制御(RBAC)に対応しているので、Blob内の$webコンテナ対してRBACアクセス許可を与えます。それには最初に認証方法を「Azure ADのユーザーアカウント」に切り換えます。この切り替えには少し時間がかかるため、一時的にエラーが表示されます。気にせず、数分から十数分待ってください。