【AWS】AWS CloudFront経由でS3からリソースを取得する設定


※ 当ページには【広告/PR】を含む場合があります。
2020/04/21
2021/08/02
蛸壺の技術ブログ|AWS CloudFront経由でS3からリソースを取得する設定

これまで個人的な趣向で、AWSのLambdaでRESTfulなAPIの構築しか念頭に入れていなかったので、S3バケットからテキストから画像などありとあらゆるリソースをAPIからGETでリソースをリクエストして、拡張子ごとに適切に中身を処理して…かなり面倒です。

特にリソースが画像の場合は、base64形式でリレーしてあげねばならず、そんな無理にAPIに画像を引張ってきてもらわなくても、CloudFrontから直にS3を連れてきて貰えばいいよね?というのが今回のモチベーションです。

ただ今回の記事のネタは、ネットで“CloudFront S3”で検索していただけたら、設定方法がたくさんヒットします。

割と使い古されているネタですので、あくまで個人の備忘録&復習にどうぞ。


合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

簡単なテスト環境準備

とりあえず適当な名前でS3バケットを作成し、jpeg画像(0.jpg)を突っ込んでおきます。

ファイル構造…といえるほど大層なものではないですが、バケットのルートからは以下のように配置しておきます。

            
            $ tree
.
└── article1
    └── 0.jpg
        

合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

CloudFront 側の設定

今回の目標はブラウザ等でhttp://xxxxxxxxxxxx.cloudfront.net/article1/0.jpgを表示できるようにする事です。

それでは早速、CloudFrontのコンソールから新規作成してみます。

まずはCloudFrontで新規ディストーションを作成します。

合同会社タコスキングダム|蛸壺の技術ブログ

合同会社タコスキングダム|蛸壺の技術ブログ

Origin path には、今回アクセスしたい、S3バケットのオリジンを指定します。

合同会社タコスキングダム|蛸壺の技術ブログ

次に、以下のように選択肢を設定します。

合同会社タコスキングダム|蛸壺の技術ブログ

なお、'Grant Read Permission on Bucket'をNoにして、あとでS3のバケットポリシーを手動で設定しても良いのですが面倒な人間はYesにしとくことで、下の写真のように自動で更新してもらえます。

自前のバケットポリシー更新前:

合同会社タコスキングダム|蛸壺の技術ブログ

CloudFrontの自動書き換え適用後:

合同会社タコスキングダム|蛸壺の技術ブログ

とりあえず、他の設定項目も多いですが、他はそのまま既定値にしといて、Createボタンをおしてこのディストリビューションを作成します。作成から体感15分ほどで、'Status'が'Deployed'に変わるまで待ちます。

デプロイ後、サイドメニューから'Origin Access Identity'を覗くと、以下のように先ほど作成したディストリビューションに、新しいオリジンアクセスアイデンティティが発行されていれば成功です。

合同会社タコスキングダム|蛸壺の技術ブログ

では早速、このディストリビューションのDomain Nameを、ブラウザのアドレスにコピペしてみましょう。

合同会社タコスキングダム|蛸壺の技術ブログ

すると、CloudFrontのドメインからリソース画像にアクセスできます。

合同会社タコスキングダム|蛸壺の技術ブログ


合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

HTTPSでアクセスする

上の設定まででCloudFrontから十分アクセス可能ですが、できればSSL対応して使いたいです。そんな時に、デストリビューションのBehavior タグを以下のように編集してみます。

合同会社タコスキングダム|蛸壺の技術ブログ

そして再デプロイ後に、アクセスを試みると、

合同会社タコスキングダム|蛸壺の技術ブログ

キチンとhttpsでアクセスできていることがわかります。


合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

参考

オリジンアクセスアイデンティティを使用して Amazon S3 コンテンツへのアクセスを制限する

特定バケットに特定ディストリビューションのみからアクセスできるよう設定する

CDP:Cache Distributionパターン

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。

合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集