OSSを利用した静的Webサイト構築(CDNとDNSの併用)

こんにちは、SBクラウドのKSです。
前回はNASのご紹介をしましたが、今回もストレージ関連の記事を投稿します。
Alibaba CloudのObject Storage Service(以下OSSと表記)を利用して、ECSを使わず(サーバーレス)に静的なWebサイトを公開する方法をご紹介します。

はじめに

ECSをWebサーバーとして利用することでももちろんWebサイトを公開することはできますが、代わりにOSSを用いることで下記のようなメリットが考えられます。

  • Webサイト構築が簡単(サーバーではインストールなどが必要だが、OSSにファイルを置くだけで構築可能)
  • 簡単にWebサイトの高可用性を実現(OSSはマネージドサービスのため)
  • 拡張の必要無し(OSSは容量無制限のため、データ量が増えても容量を気にする必要無し)
  • 価格メリット(ECSでWebサーバーを構築するよりも、ストレージ費用を抑えることが可能)

そして今回はAlibaba CloudのDNSとCDNも併用してWebサイトを作成したいと思います。
注意点としては静的Webサイトの作成ということです。OSSは動的Webサイト(ログイン、最新記事の投稿などによってWebサイトの内容が変化するもの)には対応していません。

構成

今回の構成です。

作業ステップとしては以下のようになります。

  • OSSの設定
  • CDNの設定
  • DNSの設定
  • ブラウザからの接続確認

それぞれ順番に説明して行きます。
※ドメインは外部サイトで事前に取得し、サンプルのhtmlファイルも事前に準備しています

OSSの設定

OSSの管理画面より、「バケット作成」ボタンをクリックします。

バケット名を入力し、リージョンを選択します。ACLは「公開読み取り」を選択しますがポップアップが表示されるので、「変更する」をクリックします。


作成したバケットにテストページをアップロードします。
アップロードウィンドウが開くので、HTMLファイルをドラックします。
(ディレクトリごとアップすることもできます)

次に基本設定画面でデフォルトのホームページをアップロードしたHTMLファイル名に設定します。

サイトがブラウザで見られるか確認するには、Bucketドメイン名でアクセスすることで確認できます。

今回はここまででOSSの設定としては一旦完了としますが、その他にも下記のような設定をすることができます。

  • ログ(アクセスログ機能の有効化や保存場所の指定など)
  • エラーページ(404ページの設定など)
  • ライフサイクル(日時指定でファイルの削除や移行など)
  • イメージ処理(サムネイル作成など)

詳細はOSSのドキュメントを参照してください。

CDNの設定

次にCDNを設定しますので、CDNの管理コンソールから「ドメイン名の追加」をクリックします。

ドメイン名の追加画面で各項目を設定して「次へ」をクリックします。
※「加速リージョン」で「海外の加速(中国以外の全世界)」を選択すると次の画面へ進みますが、「中国本土」か「グローバル加速(中国を含む全世界)」を選択するとICPライセンスの警告が表示されます。
中国で配信するためには事前にICPライセンスの取得が必要です。詳細は下記のリンクを参照してください。
ICPについて

作成完了画面が表示されます。

CDNも設定としては一旦完了としますが、その他にも下記のような設定をすることができます。

  • キャッシュ有効期限やHTTPヘッダー設定、エラーページの設定
  • HTTPS通信の有効化やHTTP/2通信の有効化
  • ファイル圧縮などでCDNの応答パフォーマンス向上

詳細はCDNのドキュメントを参照してください。

DNSの設定

次に外部で取得したドメイン「***ko.info(例)」をAlibabaCloud DNSに登録します

登録されると、ドメインリストに表示されます。

CDNの一覧画面に一旦戻り、設定する情報(ドメイン名、CNAME)を確認します。CNAMEはクリックすることでコピーできます。

DNSの画面に戻り、登録したドメイン名の「設定」をクリックします。

CDNの一覧画面でコピーしたCNAMEを登録します。

コンテンツの更新とCDNのキャッシュを自動更新させる場合は、OSSのバケット管理画面より、「CDNキャッシュの自動更新」をクリックします。

確認

DNSに登録したドメインで接続確認をします。

さいごに

このようにOSSを用いてWebサイトを公開できました。
Webサーバーを立てることなくAlibaba Cloudのコンソール操作のみで、高可用性で拡張性も考慮する必要がないWebサイトを簡単に構築できます。
今回は省略しましましたが、機会がありましたらOSSやCDNの詳細な設定をご紹介させていただきます。

この記事をシェアする