JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021

JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
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 App Runner が発表されました、そして AWS Amplify Console が Next.js(バージョン 9 の機能をサポート)を使っての Server Side Rendering と Static Site Generate に対応しました。 https://aws.amazon.com/jp/blogs/aws/app-runner-from-code-to-scalable-secure-web-apps/ https://aws.amazon.com/jp/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/ この 2 つのサービスを使うことでフロントエンドもバックエンドも VPC レスでスケーラビリティのある AWS アーキテクチャが実現可能に
CX事業本部@大阪の岩田です。5月31日までアーカイブが視聴可能なAWS Summitですが、Developer Zoneという開発者向けの特設サイトが存在することをご存知でしょうか?公式サイトでは以下のように案内されています。 より多くの技術情報に触れたいとお考えの開発者の方向けに、エキスパートによるテクニカルトーク、ライブ解説付きのデモ、AWS Robot Delivery Challenge, AWS DeepRacer リーグなど、多彩なコンテンツを備えた特設サイト「Developer Zone」をご用意しました。 少しカジュアルな雰囲気の中、よりディープに AWS サービスを活用した開発のノウハウを知ることができます。テクニカルトーク、ライブ解説付きのデモでは、参加するお客様からのご質問にもその場でお答えしますので、ぜひご参加ください。 この記事はDeveloper Zoneのセ
はじめに esbuild のビルド時間の速さに感動して、個人プロダクトで使っている AWS Lambda (Node.js) をなるべく速く更新できるようにしたいな、と思ってやってみた投稿です。 おことわり タイトルに2秒と書いていますが、当然どんな環境でも2秒でできるわけではありませんのでご注意ください。 使用するソースコードの内容によって、デプロイする時間も変わります インターネットの回線速度やAWSリージョンによって、デプロイする時間も変わります 参考までに、私の通信速度はこのぐらいでした。 その他 AWS の状況などの要因でも変わるかもしれません。 「参考:私の個人環境の場合」の章にも書いていますが、私が実際に使っている Lambda 関数は約4.2秒でアップデートできます。 高速にデプロイしたい理由 ローカルでも AWS Lambda の環境をある程度まで再現して開発することは可
吉川@広島です。 AWS X-Ray を使うと AWS リソース間や外部との通信をキャプチャできます。 AWS X-Ray とは何ですか。 これにより実行時間が遅くなっている原因の特定などに役立てることができます。 AWS Lambda を AWS X-Ray に使用する 【アップデート】AWS X-Ray が AWS Lambda に対応しました(プレビュー) Lambda に X-Ray を導入するのは非常に簡単なので 積極的に活用していきたいところです。 どのように導入するかですが、 AWS リソースに対するアクセスをキャプチャするのは import * as AWSBase from 'aws-sdk' const AWS = AWSXRay.captureAWS(AWSBase) と手軽な記述で済みます。 他方、 Axios を使って外部サービスのAPIを叩くような場合はどのよう
ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGoogle Cloudに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage OptimizationといったNext.jsの強力な機能をサーバー側の追加設定なしで使用できますし、CDNでの静的ファイルのキャッシュなども特に意識しなくてもいい感じにやってくれます。 Vercel以外にデプロイするとなると、Next.jsの一部の機能がうまく動かなかったり、パフォーマンス・チューニングを自分で頑張る必要があったりと自分で面倒を見なければならない部分が多くなります。 しかし、Zennのケースでは以下のような理由からVercelから
本記事はNext.js Advent Calendar 2020の9日目です。 tl;dr Vercel以外でもIncremental Static Regenerationは可能 試した範囲ではフルに機能するのはコンテナで動かした場合のみ AWSのサーバーレスで動かすのは現時点で絶望的 はじめに 早速ですが、みなさん、次世代のStatic Site Generation(SSG)と言っても過言ではないIncremental Static Regeneration(ISR)はご存知でしょうか。 一応知らない人のためにすごく簡単に説明をすると、『リクエストに対して静的にビルドされたページを返しつつ、有効期限が過ぎたら非同期で静的ページの再生成をSSRで行う』っていうものです。Cache Controlにおけるstale-while-revalidateと同じような考え方が適用されたものとも言
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
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
SREチームの藤原です。Tech Kayac Advent Calendar Migration Track 19日目の記事です。いよいよ年も押し詰まってきましたね…! AWS Lambda、使ってますか?最近はサーバーレスという文脈で取り上げられることも多い Lambda ですが、カヤックではそこまでサーバーレスにこだわることはせず、主にイベントドリブンな処理に適切なユースケースに使用しています。 Lambda のリリース当初に用意されていたランタイムは Node.js のみでした。カヤックで最近使うことが多い言語である Go, Ruby のランタイムがサポートされたのが比較的最近だったということもあり、Node.js の Lambda function が比較的多く存在している状況でした。 Node.js EoL (End of Life) ところで、技術基盤チームのリポジトリで「La
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く