シャッフル主任の進捗報告

興味のあるものを作ります。進捗を不定期にご報告します。

そうだ、教祖になろう。出エジプト記 第1章2節の訂正 今度こそCloudFrontでサイトをHTTPS化する

王様は裸だ!


どうやら第1章2節 CloudFrontでサイトをHTTPS化するで設定した内容に誤りがあったようです。

自信満々に

うん、ちゃんとアクセスがブロックされています。

とか言っといてCroudFrontからもアクセスできなくなってしまっていました。

前回の第2章1節 LambdaとAPI Gatewayで動的コンテンツを生成するで予告した通り、CORS(サーバー間リソース共有)を試そうと前々回設定したCloudFront経由でのS3表示を確認したところ、以下のように表示されてしまいました。

f:id:chief-shuffle:20191127072243j:plain

???

私がやった手順と公式を比較してみると、

docs.aws.amazon.com

  1. [バケットアクセスの制限] で、[はい] を選択します。

ん、これ無いな。

f:id:chief-shuffle:20191127072652p:plain

項目がない。

注記 [バケットアクセスの制限] オプションが表示されない場合は、Amazon S3 オリジンはウェブサイトエンドポイントとして設定される場合があります。

エンドポイントを直入力しちゃったのが悪いのかな。

試しに編集画面で「Origin Domain Name」にフォーカスを当ててみると

f:id:chief-shuffle:20191127072433j:plain

選べる。
S3のバケット名を選択すると

出てきました。「Restrict Bucket Access」。

f:id:chief-shuffle:20191127073422j:plain

上がエンドポイント直貼り。下が選択した場合。
入力される値が違うみたいでした。うっかり。

一旦、S3のバケットポリシーを丸々削除して再トライします。 f:id:chief-shuffle:20191127073546j:plain

前々回作ったCloudFrontのDistributionとOAIも消しておきます。
一度DisabledにしないとDeleteできないみたいですね。

f:id:chief-shuffle:20191127073034j:plain

f:id:chief-shuffle:20191127073153j:plain

王様の耳はロバの耳


再度はじめからやってみた結果、うまくいきました。
誤解を招かないよう、前々回を更新しておきました。

こちらのページが大変参考になりました。ありがとうございました。

dev.classmethod.jp

つまり、王様はケンタウロス


だいぶ混乱してしまいましたが、 これでほんとうにS3へのHTTPSアクセスを確立できました。

次こそはAPI GatewayをCORS化していきたいと思います。