![見出し画像](https://assets.st-note.com/production/uploads/images/100736814/rectangle_large_type_2_20d704bd09ce309350a074134fee56cb.png?width=1200)
AWS S3でウェブサイトを公開
AWS S3を使って独自ドメインのウェブサイトを公開する
HTTPでのアクセスを試した後でCloudFrontを導入したHTTPSアクセスにも対応する
ドメイン名を保持するコスト以外に、ほんの少し(おそらく数円/月)
コストがかかる
ドメイン名を購入する
Route53でドメイン名を購入する
.linkだと年間5ドルぐらいで購入できるので一つ購入しておくとAWSの勉強もはかどると思う
S3バケットを作成する
まずはAWS マネジメントコンソールにログインしS3ダッシュボードへ
![](https://assets.st-note.com/img/1678784633492-ihlJhc3Y95.png?width=1200)
[バケットを作成] を選択
![](https://assets.st-note.com/img/1678784867415-2f16158m18.png?width=1200)
バケット名:morningset.link
AWSリージョン:東京
バケット名はグローバルでユニークな名前ならばなんでもいいのだが
ドメインを指定してウェブサイトとして公開する場合は
バケット名=URI
にする必要がある
今回はmorningset.linkの名前で公開する前提なので、バケット名もmorningset.linkとしなければいけない
![](https://assets.st-note.com/img/1678951674998-79YkvBuU2Y.png?width=1200)
ACL 無効
![](https://assets.st-note.com/img/1678785417415-2CrzraAWmD.png?width=1200)
[パブリックアクセスをすべてブロック]のチェックを解除
このバケットの内容がすべて公開されるのを承認にチェック
![](https://assets.st-note.com/img/1678785595562-0msBwCprz5.png?width=1200)
バケットのバージョニング、デフォルトの暗号化、詳細設定
はデフォルトのままで
![](https://assets.st-note.com/img/1678785624203-aLKeNjqm18.png?width=1200)
[バケットを作成]
成功するとバケットが追加されるので、追加されたバケットを選択する
![](https://assets.st-note.com/img/1678787588620-K32C1U1ZSO.png?width=1200)
[プロパティ]タブを選択
![](https://assets.st-note.com/img/1678787689932-Yjy9AXHWcx.png?width=1200)
下の方にスクロールさせると
静的ウェブサイトホスティングがあるので[編集]を選択する
![](https://assets.st-note.com/img/1678787769447-jrZoujaD6O.png?width=1200)
静的ウェブサイトホスティング:有効にする
ホスティングタイプ:静的ウェブサイトをホストする
インデックスドキュメント:index.html
![](https://assets.st-note.com/img/1678788085435-8UV4uVfy18.png?width=1200)
[変更の保存]
index.htmlをアップロードする
適当に用意したindex.htmlを、作成したバケットにアップロードする
ちなみにこのサンプルはBootstrapのサンプルをもらってきたものだ
バケット情報の[オブジェクト]タブを選択し [アップロード]
![](https://assets.st-note.com/img/1678790754888-8sOKRlO6S7.png?width=1200)
ファイルをドラッグ&ドロップする
![](https://assets.st-note.com/img/1678835350380-8YsEGYuetb.png?width=1200)
アップロードしたいファイルにチェックを入れて [アップロード]
![](https://assets.st-note.com/img/1678835576464-2Ly6gGtle4.png?width=1200)
バケットポリシーを設定する
ポリシーを設定しないと外部からのアクセスははじかれるらしい
バケット情報から [アクセス許可] タブを選択し、バケットポリシーの [編集]
![](https://assets.st-note.com/img/1678836479505-ovn4vqN28j.png?width=1200)
内容は以下の通りJSON形式のポリシーを設定する必要がある
目を通せば「外部からのすべてのGetを許可するよ」という記述らしいことは理解できるが、これを自力で書けと言われると難しい
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadForGetBucketObjects",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::バケット名/*"]
}]
}
バケット名の部分は今回の場合だとmorningset-staticwebsiteだ
ポリシーのところに張り付けてバケット名を書き換えたら
[変更の保存]
![](https://assets.st-note.com/img/1678836688379-wVkpT9Ytlj.png?width=1200)
途中の動作確認
これでS3にアップロードしたindex.htmlを公開することができたので、
動作確認
バケット情報から[プロパティ]タブを選択し、
下の方にあるエンドポイントのリンクを押す
![](https://assets.st-note.com/img/1678837440486-yP86rtai3e.png?width=1200)
S3バケットでウェブページが公開されれいる
![](https://assets.st-note.com/img/1678837595737-uX4qoEZUxZ.png?width=1200)
ホストゾーンを作成する
Route53でドメインを取得すると対応するホストゾーンも自動的に作られているので新たに作る必要はないが、他のドメインポータルサイトでドメインを取得した場合などではホストゾーンを作成しておく必要がある
DNSレコードを追加する
使いたいドメインに対応したホストゾーンに対してレコードを追加する
AWSコンソールからRoute53ダッシュボードに飛び
ドメインに対応したホストゾーンを選択
[レコードを作成] する
![](https://assets.st-note.com/img/1679010492628-uWQshFUNP6.png?width=1200)
①レコード名:空白
②レコードタイプ:A
③エイリアス:ON
トラフィックのルーティング先
④:S3ウェイブサイトエンドポイント
⑤:東京
⑥:s3-website-ap-northeast-1.amazonaws.com
⑦ルーティングポリシー:シンプルルーティング
⑧ターゲットのヘルス評価:いいえ
![](https://assets.st-note.com/img/1679012055083-JoWVFschOX.png?width=1200)
HTTPで動作確認
ブラウザで http://morningset.link
にアクセスできるようになっているはず
![](https://assets.st-note.com/img/1679012333702-MdQP4ewxMM.png?width=1200)
CloudFrontを導入する
CloudFrontはAWSのCDNサービスだ
CDNはContents Delivery Networkの略で、世界中にキャッシュサーバーを置いてそこにデータのコピーをばらまいておくことで、ユーザーからのアクセスを高速化するサービスだ
SSL対応はなにかしかフロントに立つサーバーが必要だ
EC2を使ったウェブサーバをSSL対応するにはロードバランサーが必要だった
S3の場合はCloudFrontだ
HTTPSアクセスだけを許可し、HTTPアクセスは禁止する前提で
CloudFrontの設定を進める
AWSコンソールからCloudFrontのダッシュボートへ飛ぶ
![](https://assets.st-note.com/img/1679024711001-gWVSAqf4sw.png?width=1200)
CloudFront ディストリビューションを作成
![](https://assets.st-note.com/img/1679032379245-US0VGPsflR.png?width=1200)
オリジン
オリジンドメインにS3バケットのドメインを指定する
その下に警告文とともに [Webサイトのエンドポイントを使用]
とあるが押さない
![](https://assets.st-note.com/img/1679334638564-WbvH9XSE8Q.png)
S3バケットアクセスにOrigin access control settings を選択し
[コントロール設定を作成]
![](https://assets.st-note.com/img/1679335339599-aQuGp2fzpM.png?width=1200)
パラメータはデフォルトのまま [作成]する
![](https://assets.st-note.com/img/1679335779427-AZvcaHlCSS.png)
Origin access controlに作成したコントロールが選択されている
![](https://assets.st-note.com/img/1679336083221-FAOBdUgI6X.png?width=1200)
デフォルトのキャッシュビヘイビア
パスパターン:デフォルト
オブジェクトを自動的に圧縮:Yes
ビューワープロトコルポリシー:Redirect HTTP to HTTPS
許可されたHTTPメソッド:GET,HEAD
ビューワーのアクセスを制限する:No
![](https://assets.st-note.com/img/1679336219981-EcQr8O3ghz.png?width=1200)
キャッシュキーとオリジンリクエスト:
Cache policy and origin request policy
![](https://assets.st-note.com/img/1679336363111-dPksGo5gwv.png?width=1200)
関数の関連付け
デフォルトのまま
![](https://assets.st-note.com/img/1679336444337-8tJKR4HskL.png?width=1200)
料金クラス:北米、欧州、アジア、中東、アフリカを使用
(多少なりとも安くなるかも)
代替ドメイン名(CNAME)にドメイン名を入力
(ここではmorningset.link)
カスタムSSL証明書を選択する
米国東部リージョンの証明書がなければ [証明書をリクエスト] する
ウェブアプリケーションファイアウォール
有効にしない
これを有効にすると急にコストが上がる
![](https://assets.st-note.com/img/1721769333691-BFMGlSP2Iw.png?width=1200)
設定
![](https://assets.st-note.com/img/1679342880864-N12Lz1wKkd.png?width=1200)
証明書の作り方はこちらにまとめてある
SSL証明書を選択し、
デフォルトルートオブジェクトにindex.html
[ディストリビューションを作成]
![](https://assets.st-note.com/img/1679339934863-qLrSCgXRgQ.png)
S3のバケットポリシーを修正する
作成したディストリビューションを選択する
![](https://assets.st-note.com/img/1679337490351-377aPaByKo.png?width=1200)
オリジンタブからオリジン名を選択し、編集
![](https://assets.st-note.com/img/1679337310921-qj0uVtIaV6.png?width=1200)
[ポリシーをコピー] を押すコピーしたポリシーは適当にテキストエディタなどにペーストしておくとよい
そのあと [S3バケットアクセス許可に移動] する
![](https://assets.st-note.com/img/1679337625453-u7gpo3nRaq.png?width=1200)
ブロックパブリックアクセスを編集する
![](https://assets.st-note.com/img/1679338229939-W7WE6cq1mY.png?width=1200)
パブリックアクセスをすべてブロックにチェックして [変更の保存]
![](https://assets.st-note.com/img/1679338278431-d0voLCQH7S.png?width=1200)
バケットポリシーを編集し、さっきコピーしたポリシーに書き換える
![](https://assets.st-note.com/img/1679338369879-qaA82RmMPn.png?width=1200)
ホストゾーンを編集する
まずは利用するドメインのホストゾーンまで飛ぶ
AWSコンソール→Route53ダッシュボード→ホストゾーン
→ドメイン(morningset.link)
レコードタブに以前に設定したAレコードがある、
現在はS3を直接さしているのでCloudFrontに向けるように修正する
Aレコードを選択して [レコードを変数]
![](https://assets.st-note.com/img/1679343466872-5iL9eJdYOv.png?width=1200)
トラフィックのルーティング先:CloudFrontディストリビューション
値:CloudFrontのディストリビューションドメイン名
に変更して保存
![](https://assets.st-note.com/img/1679343678026-MBDNNH1s4A.png)
CloudFrontディストリビューションドメイン名は、普通はポップアップに候補が出るのだけどCloudFrontディストリビューションを作成してから時間が早すぎると候補が出てこない場合があるその時は
CroudFrontのダッシュボードからドメイン名をコピーしてくればよい
![](https://assets.st-note.com/img/1679343997621-LD5n8jvf74.png?width=1200)
HTTPSで動作確認
https://ドメイン
でアクセスができるようになっているはず
逆にhttp://ドメインだとエラーになる
表示されたらF5キーでキャッシュをリセットすればエラーが返るはず
![](https://assets.st-note.com/img/1679344251946-uqMvQ8AdQw.png?width=1200)
試してみて思ったのは細かい設定がたくさんあって一つでも間違えると動かなかったり料金が変わったりするので神経を使う作業であるうえにCroudFrontやホストゾーンの変更にはタイムラグがり、うまくいっているのか単に時間がかかっているのか悩むことが多かった
あまり楽しい作業ではない
この記事が気に入ったらサポートをしてみませんか?