【AWS】静的webホスティング
はじめに
こんにちは、AWSクラウドプラクティショナー資格試験に向けて勉強中の筆者です。
今回も勉強から少し脱線して、AWSの機能であるS3を用いてwebページを配信する方法（静的webホスティング）を調べてみました。
自分はweb専門のエンジニアではないのですが、この静的webホスティングの機能をうまく使えば、アプリのAPIリファレンスなどを自動（別のサービスと組み合わせた上で）で配信するといったこともできるのではないか？
と考え、ちょいと調べてみたいと思いました。
今回の記事では、以下二つについてまとめます。
- Webを配信する形態の基礎的な概要 - AWSの機能であるS3とRoute53を用いた静的webホスティングの方法
静的コンテンツと動的コンテンツについて
特徴
静的コンテンツ、動的コンテンツは、webブラウザを通じて、html, css, javasctiptなどの情報を取得する仕組みのことを指します。
違い
webサーバーソフトウェアがあるかないかが、一番大きな違いかなと思います。
webサーバーソフトウェアとは、webブラウザからのhttpリクエストに対してhtmlファイルや画像などを返す機能の持つソフトを指します。
代表的なwebサーバーソフトとしてapatch、nginxなどがあります。
webサーバーソフト上では、html, css, javascriptといったブラウザで動作する言語ではなく、python, java, などのプログラムによって動作します。
動的コンテンツではこのwebサーバーソフトが存在する一方で、静的コンテンツではwebサーバーソフトは存在しません。
動的コンテンツではサーバー側でプログラムを動作できるため、別途データベースサーバーやAPIサーバーなどと連携するといった柔軟な構築も可能です。
webアプリ開発経験の乏しい筆者は、webアプリといったら動的コンテンツを指すものだと思ってましたが、これでちゃんと覚えました！笑
静的webホスティングとは？
AWSのS3を用いて、静的コンテンツを配信するための仕組みです。
html, javasctipなどのファイルをS3に配置しておけば、ブラウザ経由で、静的コンテンツを表示することができます。
Amazon S3 を使用して静的ウェブサイトをホスティングする - Amazon Simple Storage Service
今回作るもの
概要
S3へのアクセスには、AWSのRoute53の機能を使用して独自のドメインでのアクセスを試みます。 なお、AWSでもドメイン取得は可能ですが、今回はfreenomというドメイン取得サービスを用います。
作業
作業概要
ドメイン取得
freenomでドメインを取得します。
S3の設定
S3を用いて、静的webホスティングの設定を行います。
Route53の設定
以下を実施します。
作業詳細
ドメイン取得
長いので折り畳みます！
以下、freenomのサイトにアクセスすると、取得したいドメイン名を入力する欄が出てきます。
ここで、取得したいドメイン名を入力して「利用可能状況をチェックします」を押下すると、入力したドメインが使用できるか結果が表示されます。
.tk, .ml. ga, .cf, gqとあまり馴染みのないトップレベルドメインに関しては無料（12ヶ月）で取得できますので、とりあえずお試しでドメインを取得したい場合は、こちらのを取得すると良いのかと思います。
使用可能なドメインを選択して、購入画面にてドメインを購入します。
S3の設定
バケット名称は、後述のRoute53で設定するレコード名と同じになるように設定する必要があります。
バケット名称例： "取得ドメイン名.tk"
バケットを作成できたら、任意のhtmlファイルをアップロードします。以下の図では、index.htmlというファイルをアップロードしました。
このファイルに対して、静的webホスティングの設定を行います。
バケット→プロパティ→静的webホスティングで、「編集」を押下すると、静的webホスティングに関する設定ができます。
ここで、以下のように設定して「変更の保存」を押下します。
ここまで完了すると、先ほど静的ウェブサイトホスティングの「編集」を押下した画面で、バケットウェブサイトエンドポイントのURLが表示されます。
これで無事、静的ウェブサイトホスティングの設定が完了しました。
バケットウェブサイトエンドポイントのURLにアクセスすることで、先ほどアップロードしたファイル（index.html）にアクセスすることができます！
Route53の設定
Route53で取得したドメインのルーティング設定
AWSのRoute53の画面で、「ホストゾーンの作成」とあるので、押下します。
表示された画面で以下のように設定し、「ホストゾーンの作成」を押下します。
ホストゾーンを作成するとタイプSOA、タイプNSのレコードが1つずつ生成されますが、ここにタイプAのレコードを新規に追加します。
以下の画面で、「レコードを作成」を押下します。
レコードの作成画面では、以下のように入力します。
- レコードタイプ：A-IPv4アドレスと〜
- エイリアス：ON
- AWS各サービスのエイリアス：S3ウェブサイトエンドポイントのエイリアス
- リージョン：作成したS3と同じリージョン
- S3エンドポイント：S3で設定したバケット名が表示されるので、それを選択する※
※ルーティングさせたい「レコード名」と、S3で設定したバケット名が同じ出ないと表示されないので注意！！
全て入力できたら、「レコードを作成」ボタンを押下して作業完了です。
freenomで取得したドメインを、"Route 53 ネームサーバー"に委任する設定
長いので折り畳みます！
freenomで取得したドメインはRoute53のサーバーの情報を持っていないため、Route53のネームサーバーを教えてあげる必要があります。
まず、「Route53の設定」でホストゾーンを生成した際に、自動で作られたタイプNSのレコード値をメモします。
次に、freenomで取得したドメインに対して、メモしたRoute53のネームサーバーの設定を行います。
services→MyDomainsと選択すると、取得したドメインを確認できる画面に移動します。 この画面で、取得したドメインで「ManageDomain」を押下します。
ManagementTools→NameServersと選択すると、以下のような画面に遷移しますので、「Use custom nameservers (enter below)」を選択し、NameServerに先ほどメモしたRoute53のネームサーバのドメインを入力します。
以下の図では、既にネームサーバーのドメインを入力しているものになります。
最後に、ChangeNameServerを押下して終了です。
ここまで実施して、取得したドメインをブラウザに入力することで、S3で設定したURLにアクセスできるはずです。 お疲れ様でした！
最後に
この静的webホスティングの機能をうまく使えば、アプリのAPIリファレンスなどを自動で配信するといったこともできるのではないか？
GitHubActionsなどと連携して上記トライしてみようと思います！
余談ですが、今回の記事は文章量が多すぎたと思いました。。。随時見直して、おかしな記述あれば修正します。
