自分が撮った写真を、多くの人に公開したいと思ったことはありませんか。
ブログサービスで大量の写真を扱うのは面倒ですし、そもそも写真枚数に制限のあるサービスも多いようです。
かといって、自分で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を指定します。
[保存]をクリックすると、静的Webサイトが完成です。
 |
| ▲Blobの静的Webサイトが完成 |
この時、ストレージアカウントに$webというコンテナが作成されます。ここにWebサイトを構成するファイルを置きます。
Step 2: コンテンツファイルのコピー
ストレージアカウントに作成された$webにファイルをコピーします。今回は手軽に使えるazcopyコマンドを使いました。マイクロソフトのWebサイトからダウンロードしてください。
azcopyはAzure ADを使ったロールベースアクセス制御(RBAC)に対応しているので、Blob内の$webコンテナ対してRBACアクセス許可を与えます。それには最初に認証方法を「Azure ADのユーザーアカウント」に切り換えます。この切り替えには少し時間がかかるため、一時的にエラーが表示されます。気にせず、数分から十数分待ってください。
▲
「Azure ADのユーザーアカウント」変更後のエラーは時間が解決するそのあとで、RBACの役割を割り当てます(先に割り当てても構いません)。ここでは「ストレージBLOB共同作成者」を選択し、変更の権利を追加しました。
 |
▲「ストレージBLOBデータ共同作成者」役割を追加
|
準備ができたら、以下のコマンドを実行してAzure ADにサインインします。
azcopy login --tenant-id テナントID
多要素認証を構成している場合はAzure ADのテナントIDを指定する必要があります(詳しい手順は省略します)。
サインインしたら、以下のコマンドでファイルをコピーします(1行です)。階層ごとコピーするオプションが –-recursive です。前述の通り、コピー先(Azure Blob)は実際には階層ではありませんが、階層のように見えます。
azcopy copy --recursive * 'https://mls202112152.blob.core.windows.net/$web'
以上で、静的Webサイトが構成されました。静的Webサイトの構成画面に表示された「プライマリエンドポイント」のURLにアクセスしてください。
既定の構成ではhttps(SSL)アクセスのみ有効です。http(非SSL)アクセスを許可するには、ストレージアカウントの[構成]で、[安全な転送が必須]を無効にして、[保存]をクリックします。
 |
| ▲非暗号化通信を許可してhttps(非SSL)アクセスを許可 |
これにより、httpsだけでなくhttpでもアクセスができるようになりました。
この時点で、DNSドメインサフィックスはweb.core.windows.netです。これではちょっと寂しいです。やはり独自ドメインを設定したいところです。
Step 3: ドメイン(SSL化しない場合)
独自ドメインの構成を「カスタムドメイン」と呼びます。SSLを使わない場合、DNSドメインの管理さえできれば簡単に追加できます。
まず、アクセスしたいDNSドメイン名に対して、静的Webサイトのプライマリエンドポイントのホスト名をCNAMEとして割り当てます。ここでは以下のように割り当てました。
- 新規に作成するDNS名: noellil20230315-2.nwtraders.net
- Azure静的Webサイト: noellil202303152.z11.web.core.windows.net
次に、ストレージアカウントの[ネットワーク]から[カスタムドメイン]タブを選び、設定したいドメイン名を指定して、[保存]をクリックします。ここで、新規に作成するDNS名「noellil20230315.nwtraders.net」を指定しました。
 |
| ▲カスタムドメインの追加(事前にDNSを構成しておくこと) |
以上の操作で以下に対するアクセスができるようになりました。
ただし、カスタムドメインに対する適切な証明書がないため、httpsを使うと警告が表示されます。SSLの目的は、暗号化通信とサーバー確認です。これでは暗号化はできるものの、身元確認ができません。ストレージBlobを使った構成の限界です。
 |
| ▲適切な証明書がない場合のhttpsアクセス(アドレスバー部分) |
次回予告:カスタムドメインのSSL化
以上で、Webサイトとして公開できるようになりました。しかし、どうせならSSL化してhttpsでアクセスしたいものです。最近は、素生のわからないWebサイトはhttps接続が必須という会社もあるようです。
そこで次回は、ここで作成した静的WebサイトをSSL化する方法を紹介します。
ヨコヤマ企画: 【Azure】ストレージBlobで静的Webサイトを作成する(SSL独自ドメインの場合)
