2022-09-15

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'
}

おわりに

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

2022-09-12

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);

2022-09-03

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やVSCodeやGitHubで徳を積みすぎてるので、ちゃんと動かないチュートリアルやトラブルを一生シュートしてくれないトラブルシューティングガイドとか出してバランスをとって欲しいですね。

2022-08-31

Auth0でユーザーID取得: 備忘録

結論

import { useAuth0 } from "@auth0/auth0-react";
const { user } = useAuth0();
console.log("user id:", user.sub);

おまけ

このユーザーIDはテナントユニークです
試しにGoogleAuthとメアド認証で共通のメアドを持つ二人を生成したところ、別のIDでした(それはそう)

Identify Users

2022-08-31

日記

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

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

良いところ

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

心に響いた名言の抜粋

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

やっていき

ます

2022-08-27

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

プログラミング AWS

注意

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

現象

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のみで動作可

2022-08-19

都会(野獣邸近辺)->田舎に引っ越して1年目の変化記録

引っ越していつのまにか1年経っていたので変化を書いていく。
荷解きはまだ途中。どれぐらいの田舎かというと、回覧板とか自治体強制加入とかはないけどチャリでちょっと移動すると畑がある程度の田舎。

食事

八百屋、豆腐屋、精肉店が現存しているおかげで食費が下がった。豆腐屋はもう頭文字Dにしかないものだと思ってたので嬉しかった。
中抜きの丸鶏へのアクセスがかなり容易になって満足。
外食しようにも、近場に外食できる箇所が存在しないので、良くも悪くも自炊を強いられる。

過ごしやすさの変化

春

人混みと無縁で、過ごしやすくなった。

夏

熱中症っぽい症状が出ることが増えた。日差しが痛い。駅前にいかない限り4階以上の建物がほぼ無く、道を歩くと日差しが肌をぶっ刺してくる。痛い。
ビル風が無く日陰もないのでオーストラリアの、皮膚ガンの警告が出てるビーチの日差しぐらい痛い。

秋