CloudFrontでmulti originをするときにハマったところ - Qiita
概要 年末で暇だったので、個人サービスの画像配信部分をCloudFront経由で早くしてやろうと思い、見事にハマった出来事についての備忘録です。 ちゃんと調べずに自分でトライアンドエラーをしているので、かなりグダグダした内容になっています。ご了承ください TL;DR 内容がグダグダなので、何にハマったか知りたい人はこれだけ見て退散することをオススメします - BehaviorのPath PatternがOriginに渡るときにIgnoreされると思っていた - Path Patternは正規表現なのでIgnoreされずにOriginに届く - 例: - Path Pattern(`image/*`)を持つmulti-origin(`image-bucket`)なCloudFrontに対してリクエストを送る - `https://www.app.com/image/full/sample1.
【AWS】 Route 53 + ACM + CloudFront + S3 の構成を構築する際にいろいろつまずいた件 - Qiita
この記事の対象者 Route 53 + ACM + CloudFront + S3 構成を構築しようと試みている人 Route 53 + ACM + CloudFront + S3 構成を構築してみたがいまいち全体像がわからない人 AWS で独自ドメインで HTTPS 通信で Web サイトを配信したい人 AWS 初心者 はじめに AWS で Web サイトを独自ドメインで配信するにはどうしたらいいのか調べてたところ、どうも Route 53 + ACM + CloudFront + S3 の構成がスタンダードのようでした。 【参考】 ・AWSにおける静的コンテンツ配信パターンカタログ（アンチパターン含む） そして、この構成についての参考になるサイトがたくさん存在します。 以下リンクになります。 ・AWSで独自ドメインのhttpsな静的Webサイトを構築する（ACM+S3＋CloudFro
CloudFront+S3なSPAにLambda@EdgeでOGP対応する | DevelopersIO
吉川@広島です。 案件でCloudFront+S3なSPAに対してOGP対応が必要になってきそうなため、Lambda@Edgeを使った対応について検証しました。 現状、FacebookやTwitterのBotは基本的にクライアントサイドJSを解釈できず、SPA単体でのOGP対応は難しいとされています。OGPメタタグはSSRで返してあげる必要があるため、「UserAgentでBot判定し、その時だけOGPメタタグ入りのHTMLをエッジサーバでレンダリングして返す」というのが基本戦略になります。 SPAをホスティングするCloudFront+S3を作成する S3バケットを作成する バケット名だけ入力し、後はデフォルト値で作成します。 そして、本来であればSPA用のHTML/JS/CSSリソースをアップロードするのですが、今回はLambda@Edgeの動作確認ができれば良かったためパスしました（
CloudFront + S3 + CloudFront Functions で BASIC 認証をかける
はじめに CloudFront + S3 で静的な Web サイトをホスティングしている。 ステージング環境として同様のサイトを作ったが、超簡単なアクセス制限をかけるために BASIC 認証をかけたい。 こういったケースでは Lambda@Edge を使うのが主流のようだが、最近リリースされた CloudFront Functions を使ってやってみた。 手順 CloudFront Functions のサイドバーに Functions メニューがあるので、そこから以下の内容で Functions を登録する。 function handler(event) { var request = event.request; var headers = request.headers; // echo -n user:pass | base64 var authString = "Basic
Amazon Athena で CloudFront のアクセスログを集計する | DevelopersIO
こんにちは、菊池です。 これまでのエントリで、ELBのログをAmazon Athenaで分析する方法を紹介しました。 Amazon Athena RegexSerDe を利用して CLB ログ / Apache Web のアクセスログを探索する Amazon Athena RegexSerDe を利用して ALB ログを探索する 今回は、CloudFrontのアクセスログをAmazon Athenaで分析してみます。 CloudFront とは Amazon CloudFrontは、AWSが提供するコンテンツ配信サービス（CDN）です。ユーザからのアクセスを、世界中にあるエッジサーバを経由するよう誘導することで、高速なアクセスを提供します。また、エッジサーバにコンテンツをキャッシュすることで、オリジンサーバの負荷を低減することもできます。 AWS再入門 Amazon CloudFront編
How to set up a custom domain name for Lambda & API Gateway with Serverless
How to set up a custom domain name for Lambda & API Gateway with Serverless With Serverless, it's easier than ever to deploy production-ready API endpoints. However, using AWS API Gateway results in odd hostnames for your endpoints. Further, these hostnames will change if you remove and redeploy your service, which can cause problems for existing clients. In this guide, I'll show you how to map a
APIGatewayとS3＋CloudFront間のCORS問題の解決方法 - Qiita
WEBアプリを開発していると、CORS(Cross-Origin Resource Sharing)の問題で詰む人も多いのでは？ 私もかなりハマったので、私の環境で解決した方法をメモとして残しておきます。 CORSってなに？ ブラウザが https://aaaa.com/ というサイトを表示中に https://bbbb.com/というサイトへのアクセスを制限するというもの。 よく使われる例としては、ブラウザがあるWEBページを表示する際に、APIで情報をとってくるパターン。このWEBページのドメインとAPIのドメインが異なる場合、CORSのでエラーとなってしまいます。 とまぁCORSの説明をしていると日が暮れるので、CORSに関してざっくりでも内容を知っている方向けに対応策を書いていきます。 参考：https://developer.mozilla.org/ja/docs/Web/HTT
CloudFront でクエリ文字列パラメータを転送するには | Oji-Cloud
概要 今回は、経験をもとにしたCloudFront のノウハウをご紹介します。CloudFront はデフォルトのキャッシュ動作の設定では、オリジン側にクエリ文字列パラメータを転送しません。 CloudFrontは、キャッシュ最適化のため、デフォルトではクエリ文字列パラメータの転送とキャッシュを行いません。これにより、CloudFront がキャッシュからリクエストを処理できる可能性が高くなり、パフォーマンスが向上し、オリジンの負荷は低下します。 一般的にウェブアプリケーションは、クエリ文字列（?に続く文字列）を使用してオリジンにリクエストを送信します。CloudFront のデフォルトの動作は、下記5つのリクエストを全て共通として処理します。 http://d111111abcdef8.cloudfront.net/main.html?language=de http://d111111
【AWS】CloudFrontのBehaviorsを使った分岐でハマったところ - Qiita
とりあえずメモレベルで残す 装飾とかまとめはまた別途書きます。 やりたかったこと Route53に登録したホストゾーンのドメインに対して、URLから判定してS3かAPIGatewayに飛ばす Default (*)の場合はS3（Staticページ）に飛ばす /api/*の場合はAPIGatewayに飛ばす APIGatewayのStageがdevを設定 CloudFrontのOriginsに設定したAPIGatewayの設定のOrigin Pathに/devを設定 CloudFrontのBehaviorsのPath Patternには/api/*されていた <cloud front path>/api/*でAPI叩いたら"message": "Missing Authentication Token"が返ってきた 原因 上記の設定だと、APIGatewayの/api/dev/Stageにア
CloudFront+Lambda@Edge+SecretsManagerでBasic認証 - クロスパワークラウドブログ
こんにちは。katoです。 今回はCloudFront + Lambda@EdegのBasic認証の仕組みにSecretsManagerを組み込んでいきたいと思います。 概要 CloudFront + Lambda@EdgeでのBasic認証は、多くの方が利用されたことがあるのではと思われますが、Lambda@Edgeならではの、 ・環境変数が利用できない（認証情報がコードにべた書き） ・LATESTバージョンをCloudFrontに設定できない（更新の手間がかかる） などの部分で不便に思ったり、運用の手間がかかったりしたことがあるかと思われます。 SecretsManagerと連携することで、上記の問題を解決し、認証情報もセキュアに管理することが可能となります。 なお、今回はLambda@Edgeの関数は、Python（3.7）にて作成していきます。 CloudFront + Lambd
S3 + CloudFrontの静的サイト内の所定のパスにおいてBasic認証を導入する｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
西藤です。 静的なコンテンツのみで構成されるサイトを高い耐久性と高速なコンテンツ配信するためには S3 + CloudFront という構成による静的サイトホスティングが可能です。 これによりEC2で立ち上げるサーバーの管理が不要になるので、より安心感を持ってサイト運用ができます。 さらには弊社ブログにおいて、 S3静的ウェブホスティング+CloudFront+Lambda@EdgeでBasic認証をかける の記事にて、その静的サイトホスティングとそのサイトにBasic認証をかける方法が紹介されていますが、 今回はそのS3とCloudFrontの組み合わせでホストされた静的サイトにおいて、「特定のパスにおいてBasic認証をかける」ということを実現してみたいと思います。 これにより「ID・パスワードを知っている人だけがアクセスできる専用ページ」をサイト内の特定のパスにて作ることができます。
CloudFront + S3 + Lambda@EdgeでBasic認証付きお手軽 静的サイト ( ランディングページ ) 環境を作った | PSYENCE:MEDIA
CloudFront + S3 + Lambda@EdgeでBasic認証付きお手軽 静的サイト ( ランディングページ ) 環境を作った 大島 雅人 2018.06.25 148 1896556 こんにちは。開発支援Gでインフラ運用をしている大島です。 Lambda@Edgeとは、CloudFrontが配信するコンテンツをカスタマイズする関数を実行できる機能のことです。本記事では、これを使ってランディングページ ( 以下LP ) のような静的サイトに対してお手軽にBasic認証を設置する話です。 また、最後におまけ程度ですが、この構成に到るまでの背景も書いていますのでもしよろしければご覧になっていってください。 LP環境をCloudFrontで作るのにBasic認証はどうしよう ? 開発中はデバッグ用の要素や社内開発環境へのリンクなども含まれていたりすることを考えると、何かしらの方法でア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://techte.co/2017/04/09/cloudfront-create-invalidation/
CloudFront + S3 + Cognito + AWS Amplify + Vue.js で会員制サイトをサーバーレスで構築 | ハックノート