眠気.jl

投稿=不定期

日記

雷雨の中私用で外出てから何故か鼻水が止まりません、不思議ですね。

Rustでバックエンドやりたいになっていて、Dockerのexampleを見つけました。
明日これをawsにのせていい感じにしたい。
examples/docker at master · actix/examples · GitHub

Packtでずっと気になっていたBabylon.jsの本がEarly Access可能になったのでそれも読みたい。
jsとmaintanableってタイトルから矛盾してるじゃねーか!!と思うかも知れませんが, Babylon自体はTSで書かれてるという旨も説明ありました。

GitHub CIのAzure/static-web-apps-deploy@v1でNode16使うようにする

結論

ciのyaml

        with:
          node-version: 16

を追加するだけでなく package.jsonでも

  "engines": {
    "node": "^16.10.0"
  },

の指定が必要だった

経緯

こんなエラーが出て、ぐぐったらnode14やめてバージョン上げたら解決した、という投稿を見かけたため

> Build error occurred
SyntaxError: Unexpected token '||='
    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18) {
  type: 'SyntaxError'
}

おわりに

さすがマイクロソフトだなって僕の中のろいさんが言ってました

Stripe Webhookの設定メモ

背景

Nextで生やしたapi/にstripe-hooks生やしたメモ
stripe自体の設定は済んだ状態から、Webhookでイベント(契約、購入など)を受け取れるようにした

Stripeコンソールでやったこと

開発者->Webhook->エンドポイントを追加->URL打ち込む

.envにしたこと

SIGNING_SECRETを.envに追記

stripe-hooksに追記したこと

  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
  const signature = req.headers["stripe-signature"];
  const signingSecret = process.env.STRIPE_SIGNING_SECRET;
  const reqBuffer = await buffer(req);
  let event;
  event = stripe.webhooks.constructEvent(reqBuffer, signature, signingSecret);

Azure Static Web AppsでNext.js(SSG)ホスティングするチュートリアルのメモ

基本的にリンクの手順通りで良かったです

.github/workflows/playwright-onDemand.yml
.github/workflows/playwright-scheduled.yml

がこけてたので消して動かしました。

チュートリ
チュートリアル:静的にレンダリングされた Next.js の Web サイトを Azure Static Web Apps にデプロイする | Microsoft Docs

公式でフォークを推奨されてるレポ(CIが動いたり動かなかったりしてる)
GitHub - staticwebdev/nextjs-starter: A Next.js starter application for deploying to Azure Static Web Apps

公式が動かないのは久々にマイクロソフトらしさを感じてよかったです。
最近TypeScriptやVSCodeGitHubで徳を積みすぎてるので、ちゃんと動かないチュートリアルやトラブルを一生シュートしてくれないトラブルシューティングガイドとか出してバランスをとって欲しいですね。

日記

リアルタイムグラフィックスの数学面白いかも

今日はリアルタイムグラフィックスの数学~GLSLではじめるシェーダプログラミング~の発売日で皆さんも手に入れたことと思います。
私は読み始めたばかりです。

目次

第一部
アート・オブ・ノイズ
補間、疑似乱数、値ノイズ、勾配ノイズ、ノイズの調理法
第二部
距離が作りし世界
胞体ノイズ、距離とSDF、3Dレンダリング、SDFの調理法

良いところ

VSCodeのエクステンションの一つのglsl-canvas、またはshadertoyを使うのが推奨で、環境構築不要
・shadertoyでプログラムが公開されている
・オタクが好きそうな図形がたくさん並んでる

心に響いた名言の抜粋

「人間社会では他人の気持ちで考えることが大切ですが、フラグメントシェーダプログラミングではピクセルの気持ちになって考えることが大切です。」

やっていき

ます

Next.jsをAmplifyでホスト(SSR)したらbuildが通っていても503が出てたのを解決

注意

自分の場合は解決したという備忘録

現象

amplify consoleから見えるステータスはすべてグリーンの状態だが、アクセスすると

503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: [リクエストID]

Lambda@EdgeにSQS権限は手動で付与済み 503 issues when deploying with NextJS@^11.1.2 · Issue #2326 · aws-amplify/amplify-hosting · GitHub

結論

Lambda@Edge Funcitonはus-east-1のみで動作します、default regionをap-northeast-1にしていても勝手にそうなります。
自分の場合はamplify consoleとか諸々はap-northeast-1でLambda@Edge Functionのみ別リージョンにいたので怒られてました。
amplifyプロジェクトごとus-east-1に全部ぶち込んで解決しました(解決か...?)

Amplify Hosting を使用したサーバーサイドレンダリングアプリをデプロイ - AWS Amplifyホスティング

Lambda @Edge 関数は米国東部 (バージニア北部) リージョンで作成されます Next.js アプリケーションをデプロイすると、Amplify は Lambda @Edge 関数を作成して、以下のコンテンツをカスタマイズします。 CloudFront 配信します。
->これ誰か暇な活動家がアジア人差別だのなんだのぴーぴー騒いで日本対応させてほしい。
チュートリアル: シンプルな Lambda@Edge 関数の作成 - Amazon CloudFront

メモ

Lambda@Edge Functionはus-east-1のみで動作可