Next.jsアプリをVercelからGoogle Cloudに移行した話
ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGoogle Cloudに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage OptimizationといったNext.jsの強力な機能をサーバー側の追加設定なしで使用できますし、CDNでの静的ファイルのキャッシュなども特に意識しなくてもいい感じにやってくれます。 Vercel以外にデプロイするとなると、Next.jsの一部の機能がうまく動かなかったり、パフォーマンス・チューニングを自分で頑張る必要があったりと自分で面倒を見なければならない部分が多くなります。 しかし、Zennのケースでは以下のような理由からVercelから
Socket Supply Co.
npm npm i @socketsupply/socket -g curl . <(curl -s -o- https://socketsupply.co/sh) iwr iwr -useb https://socketsupply.co/ps | iex Write Once, Run Anywhere Ship apps faster than anyone else using one skill set, and one codebase. You can even turn your existing web app into a native Socket app. Connect Everyone Our modern P2P protocol makes it possible for users anywhere in the world to communicate
SSR Support for AWS Amplify JavaScript Libraries | Amazon Web Services
Front-End Web & Mobile SSR Support for AWS Amplify JavaScript Libraries AWS Amplify is a set of tools and services that enable mobile and front-end web developers to build secure, scalable full stack applications powered by AWS. It consists of three main components: a set of open source libraries and UI components for adding cloud-powered functionalities, a CLI toolchain to create and manage cloud
今度こそ理解する！俺式Lambda入門 | DevelopersIO
はじめに こんにちは、平野です。 AWS Lambdaがやっと使えるようになってきました。 私は新しい物事を理解しようと思った時、 「できるだけ最小限な構成から少しずつ要素を増やしていって、 そこから挙動を類推して確かめる」 というような調べ方でないとどうにも腑に落ちない性格のようなので、 そんな感じでLambdaも試行錯誤してみました。 Lambdaについては前から面白そうだと思いつつもなかなか手を出せずにいました。 事前の知識としては「あるイベントが起きたら、何らかのイベントを起こすもの」 ぐらいのふわっとした理解しかありませんでしたが、 私と同じ辺りの出発点からスタートする人の参考になればと思います。 最小限でLambdaを構成する ということで、できるだけ最小限の構成でLambdaを動かしてみます。 作るもの 以下のような動作で検証を行います。 究極的に最小限というわけでは無いです
AWS SDK (Node.js) で S3 putObjectするときに気をつけること
どーもです。まーやです。作業中にちょっとハマったので自分用にメモ。 やりたかったこと S3でstatic website hostingを実施 AWS Lambda 内で以下操作を行う(今回対象となるファイルはJSONファイル) S3 バケツ内のファイル読み込み 読み込んだファイルのデータを更新してS3へupload 読み込む＆uploadするファイルにはパブリックアクセス権限(everyone read)を付与したい Lambdaは諸事情によりNode.jsで実装しました。 やったこと S3のstatic web hostingについてはネット上にたくさん落ちているので割愛。 Lambda内でS3 getbjectもほぼチュートリアル通りに実装。 この後に、とってきたJSONを使ってごにょごにょしたかったのでPromise使って順番制御しました。 /** この変数群は後述するs3Uplo
Puppeteer on AWS Lambda で日本語対応したキャプチャを撮影してS3にアップロードするまでの設定 - Qiita
はじめに この投稿では以下の内容を説明しています。 AWS Lambda に Headless Chrome をインストールし、キャプチャした画像を S3 にアップロードします。 自動化スクリプトは Puppeteer を使用します。 何もしないと日本語が文字化けして豆腐が表示されるので日本語のフォントが Lambda 実行環境の Headless Chrome で表示できるようにします。 前提条件 Lambda 実行環境で Node v8.10 が実行できること S3 バケットと accessKeyId, secretAccessKey 使用するパッケージ @serverless-chrome/lambda@1.0.0-38 puppeteer@1.2.0 aws-sdk@2.304.0 プロジェクトの作成 パッケージをインストール 必要なパッケージをインストールしていきます。 serv
アクセスキーのコミットを抑止できて安全便利な awslabs/git-secrets - kakakakakku blog
GitHub で awslabs のリポジトリを眺めてたら git-secrets という便利なツール（シェルで実装されてる）を発見した． どんなものかを簡単に説明すると，アクセスキーなどを誤ってコミットすることを Git の hooks を使って未然に防ぐツールで，誤って GitHub に push してしまったために，AWS を不正利用されてしまった，みたいな事故もたまに聞くし，そういうのを防ぐことができる．非常に良かったので，一部のリポジトリに git-secrets を設定した． github.com インストール make install でも良いけど，Mac なら brew が使える． $ brew install git-secrets インストールすると git secrets コマンドが使えるようになった． $ git secrets usage: git secrets
Amazon Product Advertising APIが、IAMユーザーに対応していた - プログラマでありたい
Amazonの商品リンク等を生成するAmazon Product Advertising APIというサービスがあります。これは、今でいうAWS（Amazon Web Services）が出てる前は、Amazon Web Serviceという名前でした。このサービスはAWSが出る前から存在するということで、IAMユーザーを利用して最小限の権限を付与して利用するという事が出来ませんでした。何とルートアカウントのアクセスキーとシークレットアクセスキーを利用して、APIを操作するという男前仕様です。と言っても、広告のAPIを操作するだけなので、基本的には問題は少なかったです。 そんな中で、AWSが出てきてAmazon Product Advertising APIのアカウントがAmazon Web Servicesに統合されたことにより問題が顕在化してきました。AWSはIAMが出てきて、ルートア
CognitoのWebサイトログインをES6で書く - Qiita
こういう人向けの記事 Amazon Cognitoを使いたい Webサイトにログイン機能を実装したい ES2015（ES6）で書きたい WebpackとかBabelとか使いたい ReactとかAngularとか使いたい Cognitoの素晴らしい点 機能がめちゃくちゃ充実（ユーザー認証まわりの機能ほぼ揃ってる） 開発コスト大幅削減（自分で作ろうとしたら数週間〜数ヶ月かかる） 運用コストゼロ（自動スケール、障害対応不要） 他社より安い（5万MAUまで無料、以降も比較的安い） AWSコンソール上でユーザー情報一覧を閲覧できる 何もしなくても日々進化してくれる Cognitoの残念な点 CognitoのJavaScript対応はまだまだ発展途上 不条理な仕様、ハマりどころが多々あることを覚悟する ES6、Promise等々を使うなら公式READMEに書かれてるコードはそのまま使えないので注意 日
「サーバレスとは何か」そして「サーバレスとPaaSの違い」とは。マーチン・ファウラー氏のブログに投稿された解説
「サーバレスとは何か」そして「サーバレスとPaaSの違い」とは。マーチン・ファウラー氏のブログに投稿された解説 サーバレスアーキテクチャは、クラウドに対応したアプリケーション開発においてホットな話題の1つと言えます。 その発端はAmazonクラウドがAWS Lambdaを発表したことですが、その後Googleが「Google Cloud Functions」を、IBMが「OpenWhisk」を、マイクロソフトが「Azure Functions」を相次いで発表し、主要なクラウドにおけるサーバレス環境が一気に整いつつあります。 しかしサーバレスはAWS Lambdaなどの実装が先行したことなどから、明確な定義があいまいなまま普及が始まろうとしている面があります。 こうした状況を整理し、何がサーバレスなのか、PaaSと何が違うのか、といった解説が、マーチン・ファウラー氏のブログMartinFol
API Gateway の開始方法 - Amazon API Gateway
この入門エクササイズでは、サーバーレス API を作成します。サーバーレス API を使用すると、サーバーのプロビジョニングや管理に時間をとられる事なく、アプリケーションに集中することができます。このエクササイズの所要時間は 20 分未満で、AWS の無料利用枠内で実行できます。 はじめに、AWS Lambda コンソールを使用して Lambda 関数を作成します。次に、API Gateway コンソールを使用して HTTP API を作成します。次に、API を呼び出します。 この演習では、HTTP API を使用します。API Gateway は、より多くの機能を含む REST API もサポートしています。REST API を使用するチュートリアルについては、「REST API コンソールの開始方法」を参照してください。 HTTP API と REST API の違いの詳細については
世界に先駆けてAWSサーバレスアーキテクチャでユーザ認証とAPI認可の実装をしてみた - Qiita
下記GitHubにサンプルをアップロードしました。 https://github.com/teradonburi/CognitoUserAuthApiApproval サーバレスアーキテクチャとは サーバを運用する場合、大まかにわけて次の３つの選択肢が存在すると思います。 1. 自社でサーバを管理するケース（オンプレミス型） 2. クラウドサービスでサーバを管理してもらうケース（IaaSクラウド型） 3. クラウド上でビジネスロジックのみ記述して、必要な時だけサーバを稼働させ、スケールもクラウドサービスに任せるケース（サーバレス型） クラウドに依存するほど自前でカスタマイズできる自由度が減る代わりにサーバ運用コストが下がります。 ざっくり言ってしまうとオンプレのサーバは運用が大変なのとコストが高くて自社で持ちたくないのでクラウドのサーバを使いたい。クラウド型だと常時稼働していると運用コスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - serverless-nextjs/serverless-next.js: ⚡ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components
ローカルにある画像をAWSのS3にアップロードしてみた
Amazon.co.jp: :
Locale Information for the JP Marketplace - Product Advertising API
GitHub - schickling/chromeless: 🖥 Chrome automation made simple. Runs locally or headless on AWS Lambda.
AWS Black Belt Tech シリーズ 2015 - Amazon API Gateway
Securing Serverless Workloads with Cognito and API Gateway Part II - AWS Security Day
Create a REST API on AWS Lambda using Lambdasync