S3 + CloudFront でコンテンツをHTTPS配信

2019-08-17
amazon%20awss3cloudfront
    

目次

AWSのS3に公開用の設定をしたバケットを作成し、CloudFrontを介してコンテンツを配信する仕組みを作る話です。

S3バケットを作成する

AWSのコンソールからS3を選択します。

オプションの設定

S3の画面

S3へ遷移したら、「バケットを作成する」ボタンを押下すると、モーダルウィンドウが立ち上がるのでそこから設定を入力します。

ここでは特に設定はしていません。 必要なオプションがあれば任意で選択して「次へ」をクリックします。

アクセス許可の設定

ここで以下の4つのチェックボックスからチェックが外れていることを確認します。

  • 新規のパブリック ACL と、パブリックオブジェクトのアップロードをブロックする (推奨)
  • パブリック ACL を通じて付与されたパブリックアクセスを削除する (推奨)
  • 新規のパブリックバケットポリシーをブロックする (推奨)
  • バケットにパブリックポリシーがある場合、パブリックアクセスとクロスアカウントアクセスをブロックする (推奨)
チェックがついていれば外します。

バケット作成が成功すると一覧に表示されます。

S3アクセス権限の公開設定

バケットが作成できたら、もう一度S3のバケット一覧から作成したバケットを選択します。

アクセス権限 → バケットポリシーでポリシーを入力します。

ポリシー入力例

上記の画像のように以下のバケットポリシーを適用させます。

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

ポリシーの適用が成功すると黄色い文字で「パブリック」という文字が現れます。

※ examplebucketのところは自身のバケット名に変えます。

このような状態になればパブリックへの公開が成功しています。

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/example-bucket-policies.html

ACM(AWS Certificate Manager)

ACM(AWS Certificate Manager)を利用してSSL証明書を発行します。

SSL化対象のURLをRoute53で管理できることが前提です。

取得する方法をざっとまとめます。

証明書のリクエスト

**パブリック証明書のリクエスト **を選択して、次へ

ステップ 1: ドメイン名の追加

SSL化したいドメインを入力。ワイルドカードを使うことも可能。 (*.example.com)

ステップ 2: 検証方法の選択

DNS の検証 を選択

ステップ 3: 確認とリクエスト

確認とリクエスト を選択

ステップ 4: 検証

「DNS 設定をファイルにエクスポート」からcsvをダウンロード。

Route53に移動する。

CNAME で csv の Record Name を レコードセットの名前に、Record Value を 値の項目にそれぞれセットする。

再びACMに戻ると、正しく設定されているのが確認できれば使用可能となる。

これでACMの操作は完了。

CloudFront の設定

CloudFrontに移動。

「Create Distribution」を選択。

「Get Started」を選択。

ここで細かな設定を行なっていきます。

  • Origin Domain Name
    • 対象とするサービスを選択(先ほど作成したS3)
  • Alternate Domain Names (CNAMEs)
    • CloudFrontに割り当てるドメイン名
    • Route53側でもレコードを設定する必要がある。
  • Viewer Protocol Policy
    • Redirect HTTP to HTTPS
  • SSL Certificate
    • Custom SSL Certificate  を選択
    • ACMで設定した項目を入力する
  • Custom SSL Client Support
    • Clients that Support Server Name Indication (SNI) - (Recommended)
  • Security Policy
    • TLSv1.1_2016 (recommended)
他の項目は任意です。

CloudFrontのtop画面からStatusを確認し、Enabledとなっていれば成功です。

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

AWS BlackBeltを写経する EC2編
問われやすいサービス EC2 AWSサービス別資料 https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/ 問われやすいサービス EC2 Amazon EC2 (201…

WordPressを静的サイトに変換するプラグインの紹介。WP2Static
静的化の目的 WP2Static StaticPress Simply Static 3つを比較して WordPressを静的化するプラグインとして、simply staticやStaticPress、WP2Static…

WordPressをAmazon S3 + CloudFront構成で月額200円で運用
システム全体の この構成のメリット・デメリット AWSの構成 静的ページを作成するWordPressプラグイン WP2Static WP Offload Media Lite WordPress on Docker環境 まとめ AmazonS…

SAA試験対策 AWS BlackBeltを写経する
はじめに 写経の例 EC2 EBS
AWS Lambdaから EC2起動&停止を行う
大まかな流れの紹介 IAMポリシー作成 IAMロール作成 Lambda作成 動作確認 起動テスト 停止テスト 参考 AWS Lambda から EC2 の起動と停止を行う方法の紹介。 大まかな流れの紹介 LambdaからEC…

AWSソリューションアーキテクト参考資料集
ブラックベルト サービス別資料 AWS Well-Architected フレームワーク 特に目を通すべき資料の一覧です。 ブラックベルト https://aws.amazon.com/jp/aws-jp-introduction/ サービス別資料 https://aws…

AWS ソリューションアーキテクト不合格体験記を集める
AWSソリューションアーキテクトアソシエイトに1回落ちたけど勉強し直して合格した話 AWS認定ソリューションアーキテクトアソシエイト(SAA)不合格体験記 非エンジニアがAWSソリューションアーキテクトに合格するまで AWSソリューションアーキテクト認定に落ちた話 AWS…

最新の投稿

SQL整形ツールを作成した
特徴 使い方 FW/ライブラリ等 nuxt sql-formatter-plus Monaco Editor おまけ ソース SQL整形ツールを作成しました。 URLはこちらです。 SQL…

ファイルの1行目を表示 Linuxコマンド head
head コマンド例 headコマンドでファイルの 1行目もしくは指定した行数だけ表示する方法。 head 利用できるオプション コマンド例 の 1行目だけを表示 の 5行目までを表示 カレントディレクトリ以下の全てのtxtファイルの1行目を表示

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

github.io / gitlab.ioで公開されている質の高い技術ドキュメント
AWSによるクラウド入門 Pythonプログラミング入門 普通の人が資産運用で99点をとる方法とその考え方 2018年の段階で私が知らないこと github.io / gitlab.io で無料で公開されている興味深いドキュメントのmemo AWS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Tags

Dates

© 2020   404 motivation not found