タグ

CloudFrontに関するshunmatsuのブックマーク (14)

  • cdnjs とは (ちょっと、調べてみました) | DevelopersIO

    そういえば、最近関与してるHTMLコンテンツのヘッダー部分に「Cloudflare」が入ってました。 これは、どういうこと? つまり、HTMLコンテンツやWordPressなどにおける「JavaScriptプログラミング」でcloudflareが何かやらかしている、ってことですね(笑) ということで、おまじないのように組み込まれている「cdnjs.cloudflare.com」が何のために存在しているのか、少し調べてみました。 cdnjs とは まずは、「CDNJS JavaScript プログラミング」でインターネットやCloudflareサイトを検索してみました。ビンゴの情報がサクッとでてきました。これは調べてなかっただけで、(業界筋では)とても一般的な話(常識レベル)であるということが感じられました。 「cdnjs」という名前は、「CDN」+「JS」に由来するんでしょうね(見た目通り

    cdnjs とは (ちょっと、調べてみました) | DevelopersIO
  • 【GitHub Actions】S3へのデプロイ後にCloudFrontのキャッシュを削除する

    はじめに CloudFront + S3 でホスティングしている Web ページで、S3にデプロイした時に CloudFront のキャッシュが効いて変更が反映されない事象がありました。CloudFront のキャッシュは画面上からでも削除できますが、毎回手動で対応する方法だと削除するのを忘れそうな気がするので、デプロイのフローの中でキャッシュの削除までできるようにします。 修正前の GitHub Actions のワークフロー やっていることはかなりシンプルで、ビルドとS3へのデプロイをしているだけです。 name: Deploy on: push env: AWS_ROLE_ARN: arn:aws:iam::${{secrets.AWS_ACCOUNT_ID}}:role/XXX permissions: id-token: write contents: read jobs: bu

    【GitHub Actions】S3へのデプロイ後にCloudFrontのキャッシュを削除する
  • 署名付き Cookie を使用して HLS コンテンツを取得してみた | DevelopersIO

    こんにちは、大前です。 CloudFront + S3 で HLS コンテンツを配信する構成で、署名付き Cookie を使用する機会がありましたので備忘録としてブログを書いていきます。 前提 署名付き Cookie とは 署名付き Cookie とは、CloudFront でプライベートなコンテンツ配信を実現する機能の1つです。 署名付き Cookie の使用 この機能を使用すると、特定の Cookie がセットされている場合に限り、CloudFront からコンテンツを取得する事が出来る様になります。 ※CloudFront 側で署名付き Cookie を利用したリクエスト以外を拒否する設定にする必要があります 特定のユーザにのみコンテンツを配信したい時などに、認証の仕組みと組み合わせる事でプライベートなコンテンツ配信が可能となります。 なぜ HLS に署名付き Cookie を使うの

    署名付き Cookie を使用して HLS コンテンツを取得してみた | DevelopersIO
  • AWS Amplify × Next.js で Server Side RenderingのデプロイおよびCI/CD環境を構築する

    記事では、AWS Amplify と Next.js を使って SSR 構成のデプロイ、および CI/CD の構築について考えていきたいと思います。 ※2021/05/19 更新 Amplify Console が SSR ホスティングをサポートしたので記事の内容を更新しました Amplify ConsoleがNext.jsで作成されたアプリのSSRに対応しました🎉 去年9月にAmplify LibrariesがNext.js/Nuxt.jsのSSR対応したので、SSRがAmplifyで完結できるようになります!https://t.co/igYF9Vz61a#AWSAmplifyJP — Jaga@AWS Amplify (@jagaimogmog) May 18, 2021 (参考) https://aws.amazon.com/jp/blogs/mobile/host-a-next

    AWS Amplify × Next.js で Server Side RenderingのデプロイおよびCI/CD環境を構築する
  • S3にSPAはデプロイできるのか -HostingとRouting-

    できます。 ここにある通り、S3 の設定ページで エラードキュメント に index.html をセットするだけで良いです。CloudFront がなくてもできます。 (完) ただ、たとえば /about でリロードして、404 Not Found になっていたものが、エラードキュメントに index.html を指定したら /about が見れるって違和感ありませんか? 少なくとも私は「index.html に redirect するのだから、そこで見えるものって / なのでは!なんで/about が見えるんですか!?」という疑問を持っていました。 あと、「S3 SPA」で検索すると、CloudFront 前提だったり、index.html を書くことで解決される理由は書かれてなさそうなので、そういうのを解説したいと思います。 どうして SPA のホスティングで悩むのか SPA(Sing

    S3にSPAはデプロイできるのか -HostingとRouting-
  • ブラウザのキャッシュ - Carpe Diem

    概要 Webフロントのパフォーマンス診断 - Carpe Diem で指摘されたブラウザキャッシュの対応をするため調べてみました。 大きく分けて強いキャッシュと弱いキャッシュの2種類のキャッシュがあります。 強いキャッシュ ブラウザ側でリソースを保持し、期限が切れるまでサーバにHTTPリクエストを発行しません。 なので一度ブラウザにキャッシュされるとサーバ側からハンドリングすることができなくなります。 これを設定する方法は Cache-Controlヘッダー Expiresヘッダー の2つがあります。 Cache-Control: max-age サーバからのレスポンスで以下のようにCache-Controlヘッダーを付けます。 Cache-Control: max-age=3600 このヘッダーが付いたリソースはブラウザ上では強いキャッシュとして残ります。 max-ageは秒数なので、こ

    ブラウザのキャッシュ - Carpe Diem
  • AWS WAFを使うためシステムにCloudFrontを導入した時の注意点まとめ | DevelopersIO

    はじめに こんにちは植木和樹@上越妙高オフィスです。先日AWSよりAWS WAFというファイアウォール機能が提供されました。 Amazon Web Services ブログ: 【AWS発表】新サービス: AWS WAF WAFの設定方法はすでに弊社ブログで紹介されています。 [新機能]AWS WAFがリリースされました!#reinvent | Developers.IO [新機能]AWS WAFの概要簡単まとめ! #reinvent | Developers.IO WAFを利用するためにはHTTP/HTTPSリクエストがCloudFrontを経由する必要があります。そこで日は実際社内で利用しているシステム(ELB+EC2構成)をWAF対応させるため、CloudFrontを設定した際の注意点をまとめてみたいと思います。 環境について 現在のサイトはhttps://www.example.c

    AWS WAFを使うためシステムにCloudFrontを導入した時の注意点まとめ | DevelopersIO
  • CloudFront に SSL 証明書を導入する際のポイントまとめ - Qiita

    CloudFront に SSL を入れる際に気をつける項目のまとめです。 2017年9月時点では、特に S3 との連携で大きな制約があり、将来的には改善されていくのではと思います。現在の状況を確認してください。 (2017/10/26 追記) Lambda@Edge で S3 の制約を回避できるようになりました。こちらの記事を参照してください。 SNI か専用 IP か まず、ブラウザと CloudFront 間の通信で、SNI (Server Name Indication) が使えるかどうか検討します。 ガラケーやWindowsXP の IE は SNI に対応していません。これらの古い環境でサイトが見えなくても構わないかどうかを確認します。 SNI 非対応のブラウザに対応するには、専用 IP を使う必要があります。専用 IP は $600/月かかります。 https://aws.a

    CloudFront に SSL 証明書を導入する際のポイントまとめ - Qiita
  • CloudFrontとELB間をSSLで通信させる | DevelopersIO

    ご機嫌いかがでしょうか、豊崎です。 そろそろ花粉の季節ですね。 昨年鼻水と目のかゆみがひどかったので、アレルギーの検査に行ったのですが、 何のアレルギーもありませんでした。 私の抗体は何に対して鼻水と目のかゆみを出していたのでしょうか。 はじめに CloudFrontでELBをオリジンとして使うときに、CloudFrontと、ELBにそれぞれACM証明書を割り当てて、 インターネットからCloudFront間、CloudFrontからELB間をSSLで通信させるというケースがよくあります。 証明書の取得や設定に少しだけお作法がありますので、まとめてみたいと思います。 図の様な構成を作成します。 お作法 先にお作法を書きます。 CloudFrontで利用できるACM証明書はバージニアリージョンで発行されたものだけ! ELBにも証明書がいるので、ELBのリージョンでもACMから証明書を発行する

    CloudFrontとELB間をSSLで通信させる | DevelopersIO
  • 【新機能】Amazon CloudFrontに「Maximum TTL / Default TTL」が設定できるようになりました! | DevelopersIO

    こんにちは、せーのです。今日はまさにAWSらしい、痒い所に手が届くアップデートをご紹介します。 CloudFrontのTTL CloudFrontはそんなに頻繁に更新しないような画像、JS、CSSファイル等のキャッシュに使うのであれば特段の設定なく絶大な威力を発揮しますが、威力が絶大故になかなか思い通りに動いてくれない、というお話もよく聞きます。その内の一つが「キャッシュTTL」に関する設定です。まずはこの記事を御覧ください。 CloudFrontのキャッシュ時間(TTL)はどの程度なのか 例えばS3の画像をCloudFrontで配信する場合、24時間がデフォルトでキャッシュされます。何も設定を加えなければ画像を差し替えようが削除しようが24時間は同じ画像が表示され続けます。これを15分くらいのキャッシュでどんどん更新していきたい、という場合は各画像オブジェクトに対してmeta-dataで

    【新機能】Amazon CloudFrontに「Maximum TTL / Default TTL」が設定できるようになりました! | DevelopersIO
  • Amazon CloudFrontの強化されたアクセス分析機能を整理してみた | DevelopersIO

    ども、大瀧です。 先日、CloudFrontのアクセス分析機能の大幅拡張がありました。分析機能全般がグッと底上げされているのですが、元々何ができて、新たに何ができるようになったのかちょっとわかりにくかったので、この記事でまとめておきます。 CloudFrontのアクセス分析機能 CloudFrontのアクセス分析機能は、大きく分けて以下3つに分類できます。それぞれ概要と今回のアップデート内容をまとめます。 レポート画面 CloudWatchメトリクス アクセスログ レポート画面 AWS Management ConsoleのCloudFront管理画面、[Reports & Analytics]メニューにあるWebブラウザ上に表示されるレポート画面です。[Usage Reports](使用量レポート)は従来からあり、今回のアップデートで[Cache Statistics](キャッシュ統計)

    Amazon CloudFrontの強化されたアクセス分析機能を整理してみた | DevelopersIO
  • CloudFront と S3 で 配信した Angular 製 SPA から API Gateway を通してファイルアップロードする | DevelopersIO

    CloudFront と S3 で 配信した Angular 製 SPA から API Gateway を通してファイルアップロードする サーバーレスな話で以下のような構成、よく見かけます。 CloudFront と S3 で SPA を配信する API Gateway と S3 で CRUD API を作る よく見かけるのですが、私が知っているのは「構成」であって「実装」ではないな、ということで簡単なものを作ってみることにしました。図にすると以下のようなイメージ。 簡単なストーリー 各地域に投票所があり、エンドユーザーが投票する 地域ごとに投票データをCSV管理しており、投票が終わったら管理者が中央ストレージへCSVファイルをアップロードする 想定読者 サーバーレス構成で CloudFront や S3 を組み合わせたサンプルを見てみたい方。 作ってみて 最初に感想を書いてしまいます。

    CloudFront と S3 で 配信した Angular 製 SPA から API Gateway を通してファイルアップロードする | DevelopersIO
  • AWS再入門 Amazon CloudFront編 | DevelopersIO

    はじめに 当エントリはDevelopers.IOで弊社AWSチームによる2015年アドベントカレンダー 『AWS サービス別 再入門アドベントカレンダー 2015』の3日目のエントリです。 昨日2日目のエントリは大瀧の『Amazon VPC』でした。 このアドベントカレンダーの企画は、普段AWSサービスについて 最新のネタ・深い/細かいテーマを主に書き連ねてきたメンバーの手によって、 今一度初心に返って、基的な部分を見つめ直してみよう、解説してみようという コンセプトが含まれています。 日3日目のテーマは『Amazon CloudFront』です。 目次 Amazon CloudFrontとは CloudFrontの仕組み CloudFrontの基的な使い方 ユースケース 高度な機能 あわせて読みたい公式情報 さいごに Amazon CloudFrontとは Amazon Cloud

    AWS再入門 Amazon CloudFront編 | DevelopersIO
  • 無料ドメイン(.tk)とRoute53を利用して0円でHTTPS環境を設定してみた | DevelopersIO

    はじめに AWSチームのすずきです。 南太平洋、ニュージーランド領のトケラウ諸島に割当られた国別ドメイン(ccTLD)の「.tk」、 条件付きですが簡単な申し込みで無料利用することが可能です。 また、AWSが提供するDNSサーバのAmazon Route53、1つのHostedZoneあたり 月額0.5$の利用費が発生しますが、設置後12時間以内の利用であれば検証用として扱われるため、こちらも無料での利用が可能です。 今回、「.tk」を取り扱うドメインレジストラのfreenom、AWSの各種サービスを利用して、 無料のHTTPS環境を構築する機会がありましたので、その内容について紹介します。 利用したサービス Freenum 無料ドメイン AWS DNS Amazon Route53 Webサーバ Amazon S3 証明書発行 AWS Certificate Manager (ACM)

    無料ドメイン(.tk)とRoute53を利用して0円でHTTPS環境を設定してみた | DevelopersIO
  • 1