Serverless Next.js Component のISR実装を読み解く
AWS Amplify ConsoleでNext.jsのプロジェクトをデプロイすると Serverless Next.js Component のインテグレーションによってAWS Lambda リソースが最大4つ作成される(ソースコードはエクスポートできる) Default Lambda@Edge for Next CloudFront distribution API Lambda@Edge for Next CloudFront distribution Image Lambda@Edge for Next CloudFront distribution Next.js Regeneration Lambda それぞれのAWS Lambdaが行っていることを読み解くとVercelが自社で構成しているシステムの外観が分かるのではないかと思って眺めてみた (CloudFrontのコンソール
AWS、エッジにおけるJavaScript実行環境に本格参入。Cloudflare WorkersやDeno Deployなどと競合へ
AWS、エッジにおけるJavaScript実行環境に本格参入。Cloudflare WorkersやDeno Deployなどと競合へ Amazon Web Services（AWS）は、エッジ環境で軽量なJavaScriptによる処理を実行可能な新サービス「Amazon CloudFront Functions」を発表しました。 AWSではすでにエッジで処理を行う「Lambda@Edge」を提供しており、そこでNode.jsとPythonによるコードを実行可能です。 しかしLambda@Edgeは13カ所のリージョナルエッジキャッシュにおいて処理が行われるのに対し、CloudFront Functionsは218カ所以上のCloudFront Edge Locationsにおいて処理が行われるため、よりユーザーに近い広範囲なロケーションで実行されます。 また、実行時間もLambda@Ed
エッジで爆速コード実行！CloudFront Functionsがリリースされました！ | DevelopersIO
珍しく早起きをしてRSSを眺めてるとアッツアッツなアップデートが来ていました。 Amazon CloudFront announces CloudFront Functions, a lightweight edge compute capability 今回はCloudFront Functionsをご紹介していきます。 CloudFront Functionsとは？ CloudFront Functions(CF2)はLambda@Edgeより手前で、シンプルな処理をより高速に、素早く、安価に実行できるサービスです。 CloudFront Functionsを使うことでこれまでLambda@Edgeで実行していたシンプルな処理をよりユーザーに近いEdge Locationで実行しつつ、高速に処理を行う事ができます。 また、CloudFront FunctionsとLambda@Edge
個人開発・スタートアップで採用すべき最強のアーキテクチャを考えた - Qiita
結論 「アジリティ」「コスト最適化」「スモールな構成」「開発スピード」という観点でWebアプリケーションのアーキテクチャを考えてみました。 ServerlessFrameworkを使い倒す フロントエンドはS3 hosting + CloudFrontで。SSRもLambda@Edgeでできます データベースはRDSは使わずにDynamoDBで APIは基本的にGraphQL。必要に応じてRESTも簡単に追加できるよ。 補足(2022/04/12) 最近個人開発しているこちらのWebサービスはこのアーキテクチャに沿って作られています。 このアーキテクチャでどんなものができるのよ、という視点で見ていただくと面白いかもしれません。 ↓ 背景 アーキテクチャに絶対の正解はない アーキテクチャには絶対の正解はありません。 なぜなら、プロダクトやフェーズによって求められる要件が異なり、それに適したア
AWS Amplifyを無理して使わなくてもいいケースについて挙げてみる - Sweet Escape
AWS AmplifyといえばAWSが提供しているフロントエンド開発者向けのライブラリやツールセットです。今回はそんなAWS Amplifyについてです。 はじめに おさらい AWS Amplifyはフロントエンド開発者にとっての銀の弾なのか 無理して使わなくてもいいケース バックエンド側のライフサイクルや開発部隊が分かれてる場合 AWSのリソースに直接アクセスしない場合 認証・認可の手段としてCognito使わない場合 Server Side Rendering（SSR）の場合 AWS WAF使いたい場合 Amplify CLIに対応していないバックエンドを利用したい場合 AWS Amplifyがおすすめのケース まとめ はじめに この投稿は2020年10月22の21時から開催予定のイベント（ライブストリーミング）で話す内容です。 serverless-newworld.connpass
[アップデート]AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）に対応しました！ | DevelopersIO
AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）をサポートしました！ Amplify JavaScript adds server-side rendering (SSR) support for frameworks like Next.js and Nuxt.js これまで、AmplifyはSPAで構築するのが基本でしたが、SSRな構成をとることもできるようになり、選択の幅が広がったと思います！ このSSR環境をさっそく構築してみました！ 構成図 AmplifyでNext.jsを利用してSSR環境を構築するとこんな感じの構成になります。 Serveless Frameworkを利用して、Lambda@EdgeでレンダリングするSSR可能なCloudFrontを構築することで、SSRを実現しています。 構築してみた Amplif
![[アップデート]AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）に対応しました！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/194a9cfb6a3c1c20634fa9a82024d910930e4552/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Faws-amplify.png)
「ハイトラフィック運用 〜スループットの向上を目指して〜」という話をしました #devio2020 | DevelopersIO
こんにちは(U・ω・U) AWS事業部の深澤です。 さて弊社では昨日よりDevelopersIO2020 〜connect〜というイベントが開かれています。 セッションもりもりだよ！ あつまれー！https://t.co/viwYQqiKG7#devio2020_connect — 深澤俊 (@shun_quartet) June 3, 2020 その中で僕は「ハイトラフィック運用 〜スループットの向上を目指して〜」という話でセッションさせていただいたので本ブログではその発表した内容を資料と共にご紹介します！ 動画 資料 セッション内容 今回扱うこと、扱わないこと 今回は観点をメインに紹介します。 それぞれのエンジン等による細かい違いやチューニング方法には触れません。 例：MySQLとPostgras等 メトリクスはCloudWatchのものをご紹介します。 今回はあくまで概要と基本です。
Next.jsアプリをLambda@Edgeで超簡単にSSRできるserverless-next.jsのご紹介 - Qiita
Next.js をSSR対応でホスティングしたいなら Vercel(旧Now) を使うのが定石だと思います。 Next.jsとVercelはどちらも Vercel社 (旧ZEIT社) が開発しているため一緒に使った際のDXは大変良いものです。 しかし、AWS内で完結できるならそうした方が嬉しい事が多いのでいい方法はないかと調べた所、 serverless-next.jsというServerless Componentのプラグインがよさそうだったのでご紹介したいと思います。 以下のドキュメントの要点をまとめつつ、掘り下げたものです。 https://github.com/danielcondemarin/serverless-next.js/ https://serverless.com/blog/serverless-nextjs/ serveless-next.js 機能と特徴 SSRをL
nuxt generate + S3 + CloudFront + Lambda Edge で静的サイト構築＆ハマりポイントと解決法 - Qiita
nuxt generate + S3 + CloudFront + Lambda Edge で静的サイト構築＆ハマりポイントと解決法JavaScriptAWSgulpVue.jsNuxt Repsona LLCの@GussieTechです。「プロジェクト管理と情報共有のためのツール（プラグイン不要でガントチャート無料）」Repsonaを作っています。 前回の記事（Nuxt + Sails + TypeScript + Fargateでタスク管理ツールを作ったら快適だった話）でRepsona本体側の全体像をざっくりと書きました。今回はウェブサイトについてです。 Nuxt は静的ウェブサイト制作にも断然おすすめ https://repsona.com Repsona では本体のアプリケーションに Nuxt を採用していますが、ウェブサイトにも Nuxt を使っています。小規模なサイトをサクッと
AWS Lambda@Edge + CloudFront でサーバレス画像リサイズサーバ構築 - Qiita
AWS Lambda@Edge と CloudFront の組み合わせを使って画像リサイズを動的に行える環境を構築するメモ。 前提 ServerlessFramework 利用 リサイズは Sharp を利用 画像オリジンサーバは S3 を利用 webp に対応している UA は webp 変換 エンドポイント URL: https://example.com/sample/hoge.jpg?size=100x50 S3 オリジンに保存されているパス: example-bucket/sample/hoge.jpg リサイズファイル保持パス: example-bucket/100x50/jpg/sample/hoge.jpg 手順 ServerlessFramework $ mkdir sample $ cd sample $ npm init $ npm install -g server
AWSに関するありがちミスとその対策〜EC2、S3、RDS、Lambda、CloudFrontの場合 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
エンジニアHub > 記事一覧 > AWSに関するありがちミスとその対策～EC2、S3、RDS、Lambda、CloudFrontの場合 AWSに関するありがちミスとその対策～EC2、S3、RDS、Lambda、CloudFrontの場合 AWS入門者が基本として知っておくべき知識を、AWS導入＆運用サポートのプロである、アイレットのエンジニア3名に聞きました。多くのAWSユーザーに支持されるAmazon EC2、Amazon S3、Amazon RDS、AWS Lambda、Amazon CloudFrontそれぞれの勘所やオススメの設定を、余すところなく紹介してもらいます！ なぜ、AWSを選ぶのか？ Amazon EC2～インスタンス起動後はプライベートIPを設定できないので注意 Amazon S3～S3はディスクではない。マウント非推奨の理由 RDS～自動スナップショットの保持期間を
Lambda@Edge で CloudFront キャッシュヒット率を向上させるんや！ | DevelopersIO
CloudFront はクエリ文字列毎のキャッシュが可能ですが、パラメータの順序、大文字小文字の違いによって、別のキャッシュと判断されます。Lambda@Edge でクエリ文字列を標準化し、キャッシュヒット率を向上させる方法をご紹介します。 みなさん、Lambda@Edge 使ってますか！？「いまいち使い所がわからない・・・」という方も少なくないのではないでしょうか？今回はユースケースの一例として、クエリ文字列を標準化することでキャッシュヒット率を向上させる方法についてご紹介したいと思います。 クエリ文字列のキャッシュについて理解する CloudFront では Query String Forwarding and Caching の設定により、クエリ文字列パラメータに基づいて個別にキャッシュすることが可能ですが、ここで注意したいポイントは、パラメータの順番や、大文字小文字のレベルで別の
CloudFront + S3 + Lambda@EdgeでBasic認証付きお手軽 静的サイト ( ランディングページ ) 環境を作った | Recruit Tech Blog
こんにちは。開発支援Gでインフラ運用をしている大島です。 Lambda@Edgeとは、CloudFrontが配信するコンテンツをカスタマイズする関数を実行できる機能のことです。本記事では、これを使ってランディングページ ( 以下LP ) のような静的サイトに対してお手軽にBasic認証を設置する話です。 また、最後におまけ程度ですが、この構成に到るまでの背景も書いていますのでもしよろしければご覧になっていってください。 LP環境をCloudFrontで作るのにBasic認証はどうしよう ? 開発中はデバッグ用の要素や社内開発環境へのリンクなども含まれていたりすることを考えると、何かしらの方法でアクセスを制限する必要があります。nginxなどのwebサーバであればBasic認証の設置も簡単ですが、今回はCloudFront + S3なのでそうそう気軽には設置できません。 そんなときに便利なの
ELBとCloudFrontのアクセスログをサーバレスに集約させてみた | DevelopersIO
Lambda処理内容 SNSのメッセージから、処理対象となるS3のバケット、キーを取得します。 ログの時刻情報として期待するカラムのデータが日付フォーマットに一致しない場合や、カラム数が異常なレコードはエラーレコードとして除外します。 「request」カラムに含まれるURLを「urlparse」モジュールを利用してパースし、解析時に利用頻度の高い「HOST」や「PATH」を事前に抽出します。 「json」モジュールを利用してJSONエンコードを行い、Firehoseに対しバッチ転送を行います。 4: Firehose 今回、出力先はS3のみとしましたが、Amazon Elasticserach Service、Redshiftと連係も可能です。 Firehoseのバッファ時間はELB(ALB)のログ出力間隔にあわせ、300秒としました。 Firehoseの後処理をLambda関数で実装す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cloudfront+Lambda@Edgeのサーバレス構成で費用を抑えつつ、動的なWEBコンテンツを作ろう[貧テック]![Cloudfront+Lambda@Edgeのサーバレス構成で費用を抑えつつ、動的なWEBコンテンツを作ろう[貧テック]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4f6bfd1466b46f271097334c64af3bc1c0bd41d/height=288;version=1;width=512/https%3A%2F%2Fwww.soudegesu.com%2Fassets%2Fimages%2Fsoudegesu.jpg)