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

関連記事

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…

AWS EC2 + Bitnami で始める WordPress
Bitnami WordPressを使うメリット 個人的に感じた3つのメリット Amimoto AMI と比較して Bitnami AMIについて Bitnami WordPressの構成と設定 サーバの構成 各種設定 MySQL WordPress Apache…

最新の投稿

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

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

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

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

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

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

ハイフンとかマイナスとかダッシュとか

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

GolangをCGIとして実行する
環境 golang パッケージ ソースと実行 ビルドとサーバ実行 標準ライブラリのみ Golang を CGIとして実行する際のメモ 環境 golang パッケージ 以下のモジュールを利用しています。 github.com/gorilla/mux…

Tags

Dates

© 2020   404 motivation not found