1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問!Qiita Engineer Festa 2024で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

AWSのS3を用いて静的なサイトを立ち上げてみる 2

Last updated at Posted at 2024-06-12

はじめに

前回はRoute 53でドメイン登録からACMに登録し、証明書の発行まで行いました。
前回の記事はこちら

今回はS3でバケット作成からCloudFrontの設定までを行います。

S3

S3とはAmazonが提供するストレージサービスで、安価で使用できます。単なるストレージサービスではなく、今回のようにHPの作成等、AWSの様々なサービスとつなげることができます。
詳細はこちら
Amazon S3 とは

バケットの作成

早速、HTMLファイル等を保存するバケットを作成していきます。
まずは下記画面より、バケットを作成を押下します。

image.png

バケットタイプは汎用のまま作成します。
バケット名はRoute 53のドメイン名と一致させます。
今回は後程、wwwのサブドメインを作成するため、www."Route 53のドメイン名"をバケット名へ入力します。

image.png

完了後、汎用バケットに作成したバケットがあるため、作成したバケット名を押下し、次の画面へ遷移します。

image.png

プロパティの編集

プロパティを押下し、最下部にある静的ウェブサイトホスティングを編集します。

image.png
image.png

静的ウェブサイトホスティングを有効にし、静的ウェブサイトをホストするにチェックを入れます。

image.png

続いて、インデックスドキュメントを入力します。
ここにはアクセス先となるHTMLのファイル名を入力します。
今回はindex.htmlを入力します。
入力後、変更を保存を押下します。

image.png

アクセス許可の設定

アクセス許可の設定へ進みます。
まずは、ブロックパブリックアクセス (バケット設定)を編集します。

image.png

パブリックアクセスをすべてブロックのチェックを外し、変更を保存します。

image.png

続いてバケットポリシーを設定します。編集を押下後、下記の内容を書き込みます。
詳細はこちらです。
ウェブサイトアクセスのアクセス許可の設定

image.png

{
	"Version": "2012-10-17",
	"Statement": [
	    {
	        "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
	    }
	]
}

ファイルのアップロード

いよいよオブジェクトにファイルをアップロードします。
今回はあくまでテストですので、下記の"Hello World"を出力するものをアップロードします。

image.png
image.png

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  Hello, World!
</body>
</html>

完了後、再び静的ウェブサイトホスティングの部分を開きます。
バケットウェブサイトエンドポイントにURLが表示されていますのでこちらを押下し、"Hello World"が表示されるか確認します。

image.png

"Hello World"が表示されていたので成功です。

image.png

CloudFront

続いてCloudFrontの設定を行います。
簡単に言えばすごいキャッシュサーバーです。
ここに先ほど作成したS3のバケットとRoute 53のドメインを紐づけていきます。

ディストリビューションの作成

まずは、ディストリビューションの作成を行います。

image.png

オリジンドメインを入力します。
ここに先ほど作成したS3のバケットが表示されるので選択します。
入力後、Webサイトのエンドポイントを使用するか聞かれるのでWebサイトのエンドポイントを使用を押下します。

image.png

入力が完了すると名前の部分も自動的に入力されます。

image.png

続いてビューワーの箇所でRedirect HTTP to HTTPSを選択します。

image.png

続いて、キャッシュポリシーを選択します。
S3のオリジンドメインを入力したためか、自動で入力されていました。

image.png

続いてWAFの設定を行います。
今回作成したものを公開する予定は全くないですが念のための設定です。

image.png

続いて代替ドメイン名(CNAME)を設定します。
ここにはWebなどからアクセスするためのURLを入力します。
今回はサブドメインでのアクセスができるよう、S3のバケット名と同じwww."Route 53のドメイン名"を入力します。

image.png

続いて、証明書の設定をします。
前回、証明書が完成していれば、ここに表示されるため、それを選択します。

image.png

最後に、S3のどのファイルにアクセスするのか、デフォルトルートオブジェクトに入力します。
今回はindex.htmlを入力します。

image.png

完了後、下記の画面になれば成功です。

image.png

Route 53と紐づけ

続いて、Route 53と先ほど作成したCloudFrontを紐づけていきます。
今回はサブドメインの作成から行います。
Route 53>ホストゾーン>作成したドメインよりレコードを作成を押下します。
レコード名にwwwを入力します。
レコードタイプはAレコードのままで大丈夫です。
エイリアスをオンにします。
トラフィックのルーティング先をCloudFrontディストリビューションへのエイリアスを選択します。
選択後、その下の入力欄に作成したCloudFrontのディストリビューションが表示されるのでそれを選択します。
image.png

レコードを作成を押下し、完了です。

結果確認

設定完了後、すぐに確認できるわけではなかったです。
10分後くらいに作成したURLを入力すると無事にhttps形式かつサブドメインでアクセスできていることが確認できました。

image.png

おわりに

今回は2回にわたり、AWSのサービスを使って静的なサイトを構築しました。
ところどころ躓きましたがほぼ画面操作のみで作成できました。
まだまだ、AWSの理解は浅いのでこれからも触りながら理解していきます!
次回触るときはLambdaからめてなにかつくりたいなぁ...

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?