CloudFront経由でS3を公開する
今回はFrontCloud経由でS3にある静的ファイルを公開することができたので、その方法を書いておきます。
S3でバケットの作成
1.バケット作成ボタンを押す
AWSコンソールでS3のページにアクセスし、右上のバケットを作成を選択。
2.バケット名とリージョンを選択
バケット名を入力し、リージョンを選択します。
バケット名は任意の名前で構いません。今回はtest-aws-service-kとしました。
※バケット名はアカウント関係なく、すでに存在名前だと作成できないので注意してください。
リージョンも任意の場所で大丈夫です。
日本で使用する場合には東京リージョンにするのが一般的かと思います。
3. ブロックパブリックアクセス設定
今回はCloudFront経由の公開を考えているので、こちらは「パブリックアクセスをすべてブロック」で大丈夫です。
S3のまま公開したい場合にはこちらのチェックは外す必要があります。
4.その他の設定
基本的に理由がなければ以下の設定にしておくと良いと思います。 設定が完了したらバケットの作成を選択。
- バケットのバージョニング: 有効
- デフォルトの暗号化: 有効
- 暗号化キータイプ: Amazon S3キー
- 詳細設定: 変更なし
すると、バケット作成完了の通知がきます。
5.静的ファイルをホスティングする
先ほど作成したバケットが静的ファイルをホスティングするように設定していきます。
先ほど作成したバケットを選択する。
プロパティ > (一番下にスクロール) 静的ウェブサイトホスティングを選択します。
画像通り設定していきます。
インデックスドキュメントはホームURLでどのファイルを表示させるかの設定になるので、今回はindex.htmlとしておきます。
もしサイトを開いたときにtop.htmlというファイルを表示させたければtop.htmlに変更するという感じです。
後でも変更できるので仮で決めてもOKです。
6. ファイルをアップロードする
ここで、先ほど作成したバケット今回表示させるファイルをアップロードします。
今回は仮にindex.htmlだけアップロードします。
以下のようなファイルを作りました。
index.html
<h1>S3#index.html<h1>
バケットからアップロードを選択します。
「ファイルを追加」を選択し、アップロードしたいファイルを追加します。
追加ができたら下の「アップロード」ボタンを押します。
アップロードに成功すると通知が出ます。
以上でS3の設定は完了です。
CloudFrontの設定
続いてCloudFront側の設定をします。
AWSコンソールでCloudFrontを開きます。
左上に「Create Distribution」のボタンがあるので、そちらを選択。
画像のように設定していきます。
Origin Domain Nameには先ほど作成したバケットを選択します。
バケット名を少し打つと、サジェスチョンが出てくると思います。
ここまで設定ができたら一番下のCreate Distributionを選択します。
すると、こちらのstatusが、In ProgressからDeployedになるまで待ちます。
Deployedになったら作成したDistributionを選択し、GeneralからDomain Nameをコピーします。
自分はindex.htmlというファイルをアップロードしたので、
ドメインname/index.htmlで先ほどのindex.htmlが表示されます！
以上で設定完了です。
お疲れ様でした。
