s3 ssl化 https化(CloudFront/ACM/Route53)

S3の静的WEBホスティングで公開中のアプリのURLはデフォルトではhttpになります。Cloud Frontを用いてhttpsにしてセキュリティを向上させます。

基礎知識

静的コンテンツ配信を行うAWSアーキテクチャのベストプラクティス

architecture

  • S3でコンテンツをHostingして、ユーザーとの間にCloud FrontとRoute53を挟むのが基本です
    • それぞれの説明は後述します

SSL

  • SSL(Secure Sockets Layer)とは
    • データ通信を暗号化し、盗聴や改ざんを防ぐプロトコル
    • httpsから始まるWEBサイトはSSLを導入しています
    • 非SSL(http)の場合、Googleがデフォルトで警告マークを出すので、サイトやWEB APの信頼度が大幅に下がります

Cloud Front

  • CDN
    • 配信パフォーマンスの向上
    • コスト削減
  • セキュリティの向上

Route53

手順

  • 想定する状況
    • AWS Consoleで設定
    • CloudFormationやSAMで作るケースもあると思います

Cloud FrontとS3を連携

  • まずは以下の構成を作ります
    CloudFront x s3
  • AWS Console/サービス/CloudFront

  • Create Distributionを押下
    Cloud Front Menu

  • 配信方法はWEBを選択
    Delivery Method

ディストリビューションの作成

  • Origin Settings

    • Origin Domain Name
      • Hosting中のs3バケットを選択
    • Restrict Bucket Access
      • YesにするとCloudFront経由でのみ閲覧可能になる
      • Grant Read Permissions on Bucket
        • これを設定しておくとS3のバケット側の設定を自動でやってくれる
  • Default Cache Behavior Settings

    • そのままでもOK
    • Viewer Protocol Policy
      • Redirect HTTP to HTTPS
        • これにしておくとhttpからhttpsへリダイレクトさせてくれる
  • Distribution Settings

    • Alternate Domain Name(CNAMEs)
      • 証明書を取得したドメイン名を設定
        • 複数のドメイン名を使用する場合は、改行区切り
      • ドメインを取得していなければスルー
    • SSL Certificate
      • Defaultの証明書でOK
      • 独自SSLを使用する場合
        • 事前にIAMに証明書をアップロードしておく
    • Default Root Object
      • S3の静的Hostingの設定で指定した、インデックスドキュメント(Angularであればindex.html)を入力
    • Create Distributionを押下
  • 20分程度でStatusがDeployedになるので、完了後にアクセスしてみる

  • URL

    • XXXX以降はディストリビューションのGeneralタブのDamain Nameに表示されているものを確認
      1
      https://xxxxx.cloudfront.net
      image
  • Route53や独自ドメインを利用しないのであれば以上で完了

CloudFrontの注意点:キャッシュコントロール


独自ドメインを活用する場合

  • 前提
    • 独自ドメインを取得してRoute53に登録済み
    • これから取得する人はお名前.com等を使ってみてください

ACM(AWS Certificate Manager)で証明書を作成

  • AWS Console/AWS Certificate Manager/証明書のリクエスト

  • ドメイン名を入力

    • ”この証明書に別の名前を追加”よりドメインの別名を設定

ACM

requst

  • CloudFrontにACMで作成した証明書を設定
  • Ditribution/Generalタブ/Edit
  • SSL Certificate
    • Custom SSL Certificateを選択
    • プルダウンから先ほどACMに登録した証明書を選択
  • 保存

Route53の独自ドメインのエイリアスの向き先を変更する

  • AWS Console/サービス/Route53

  • ホストゾーンから登録済みのドメインを選択

  • 対象の行を選択

    • タイプ:Aのもの
  • レコードセットの編集

    • エイリアス先を変更
      • [CloudFront ディストリビューション] - 対象のドメイン名 を選択
  • レコードセットを保存

  • 確認
    • 以下にアクセスしてみる
      1
      https://{独自ドメイン}

参考

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×