t_wの輪郭

Feedlyでフォローするボタン
『How can I cache something inside a variable in NextJS?』Next.js Conf 2022「2024年7月1日のリニューアルに伴い、フレームワークはNuxtからNextに変更されました。」DevelopersIOがNuxt.jsからNext.jsに移行AmplifyへNext.js 14をデプロイするときに『unhandledRejection ReferenceError: Headers is not defined』と出るときの対策あれgetStaticPropsgetServerSidePropsNext.jsをAWS Amplifyで動かすNext.jsとAmplifyでcognitoの認証を実装『Next.js公式のMDXプラグインで、Markdownでページを作る機能を試してみた』『Let's create a next.js app with bun』App Routerあれ『[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする』あれServer Actionsimport "server-only";『Next.jsのSSRF脆弱性 CVE-2024-34351』RDB+Next.jsでSQLをリアクティブな感じで使う『Implementing Web Sockets with Next.js and API Routes: A Guide | by Saad Iqbal Chaudhry | May, 2024 | Medium』AWS AmplifyでGo言語とNext.jsから成るアプリをビルドするアレNext.jsで作りたいものAmplifyでNext.js 14をビルドする方法Next.jsではStatic Generation(SSG)が推奨されている2023年11月17日日記あれ『Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発』revalidateするServerActionunstable_cacheServerSideProps2023年11月24日日記🦜️🔗 LangChain Next.js Starter TemplateNext.jsでサーバーレスSentence Embeddingonnxに変換して量子化するコマンドNext.jsで環境変数を使ってIP制限あれ2023年11月14日日記あれあれnext/headers2023年11月19日日記

あれ

2023/9/25 2:01:00

Next.jsとGraphQLという現代兵器を使うから高速化出来るかな〜〜と思ったけど、むしろ遅くなってて残念。

むしろなんのチューニングもしてないPostgreSQLとExpress.jsでコレだけ速い現行版が謎。

現行版と比べてみると、無駄なクエリを投げてるな。コレを現行版に似せてやればよろしい。

現行版はキャッシュがなければ170msぐらいで飛んでくるので、そこまで行ければ嬉しい。

あれ

2023/12/3 12:52:00

Amplifyに乗っけたNext.jsから直接DynamoDBたたくの大変っぽい。テーブル名を同定でけへん。

python3 -m transformers.onnx --model=sentence-transformers/paraphrase-multilingual-mpnet-base-v2 onnx/ --opset=18

optimum-cli onnxruntime quantize --onnx_model ./onnx --output onnx_quantize/ --arm64

2023年11月19日日記

2023/11/19 3:06:00

 一年以上に渡って放置していた耳鳴り耳鼻科に来たら、慢性鼻腔炎とのこと。
 薬を鼻から入れてもらった。
 次の来院は来週の土曜日2023年11月25日の予定。


 近所のうどん屋さんに再訪して、アボカドうどんを頂いた。瞬間風速的に美味しいわけじゃないんだけど、定期的に食べたくなる良さがある。写真左上のやつは茎ブロッコリーの天麩羅らしい。こちらも美味しい。何だこのうどん屋。贅沢かよ。


 Misskeyのルビ機能実装に伴い、カタカナ・希哲館訳語変換サービスの改修をした。
 ついでに生のHTMLとJavaScriptで書いていたのを、Next.jsに置き換えた。
 あと、変換エンジン部分も複合語の変換に対応させた。ただし、長文を入れるとしばらく固まる。
 Misskeyへの共有機能もちょっとテクった。GETパラメータであれこれやっている。説明は難しいので省く。君の目で確かめてくれ! 1万円とかくれたら教えるのはやぶさかでない。
 こっそりデプロイ済みだが、Misskey.ioがアップデートされると共に報知したい。


 『t_wの輪郭』がライトモードに対応できていないことが発覚した。1ヶ月近く気づかずに放置していた。なんで誰も指摘してくれないのぴえんとかMisskey.ioで言ってたら、「ダークモード使ってるオタクしかいない」という指摘が来た。異常なコミュニティだわ……。


 今月のAWS利用料が60USDほどになりそうなことが発覚し、財布へのダメージに慄いている。すべて『t_wの輪郭』Amplifyに移行したせいだ。AppSyncが全面的にコストを引き上げている。
 取り急ぎ個別ページのgetServerSidePropsgetStaticPropsに切り替え、データの生成結果が24時間に渡って再利用されるようにした。これでマシになるだろう。問題は内容の更新に追従できないことだが、On-demand ISRを導入して、ボタンで内容の更新を掛けることができるようにした。ボタンの場所は秘密♥。まあ連打されても、その上にキャッシュを噛ませているので、特に問題はないようにしてある。revalidateのAPIは隠すのが通説っぽいけど、ウェブからボタンで叩けたほうが便利っちゃ便利だろう。
 あとはRSS生成時に生APIを叩いていたので、こちらも24時間再利用されるキャッシュを使うようにした。こっちが本命っぽい雰囲気はある。
 ついでにNext.jsを14にアップデートした。
 ネットワークタグを見ている感じでは、リンク先のデータを先に取得しているっぽい?getStaticPropsによるものだろうか。なんか表示がめっちゃ速くなった。getStaticPropsを使っていないトップページは変化がない。トップページもgetStaticPropsにしたくなる。

あれ

2023/11/4 20:48:00

ブログのお引越し作業中

実質システムの作り直しなのでまだまだ時間がかかる


うぐー!!!!純朴なPostgresqlで作ったブログシステムに、読み込み速度で勝てない!!DynamoDB使ってるのに!!!

Postgresql先生、DynamoDBで2秒かかってるものを、300msで返してくるのは止めていただきたく。

DynamoDBつーか、AppSyncのAPIを叩きまくってるアレのせいな気はする。


Next.jsのcacheを有効化したら、ページの取得に2秒とか要していたのが、100msになった。良き。

むむ、localhostで動いてたのをAWSに移すと遅くなるな。そりゃそうか。


AWSに移したら遅くなったのが気に入らなかったので、CloudFrontに乗っけた。
運が良くCloudFrontのキャッシュにHitすると10ms程度でページが取得されるようになった。
https://main.d21776nrisgiy.amplifyapp.com/


2023年11月14日日記

2023/11/15 0:26:00

 特に記憶に無いです。

仕事

 「Next.jsを使えば忌々しいAmplifyDataStoreを無くせるんじゃね?」とか思って、社内システムの移植を開始した。もともとReactで動いていたので、3時間ほどでシステムがNext.jsの上で動くようになった。Next.jsの恩恵が受けられるのはこれからだ。

 「Next.jsを使えばBERTSentence Embeddingを取るAPIをサーバーレスでつくれるんじゃね?」とかおもって実装した結果、比較的高性能な開発機であっても計算に3秒もかかることがわかり、検索には使えず無事死亡した。

デライトが落ちていた

 「あれ」ってどんなんだったっけと思って、デライトで検索しようとしたところ、デライトが落ちていた(障害のお知らせ)。普段当たり前のようにデライトが使えているが、knownetの開発を通じてデライトが安定稼働していたことの異常さに気付きつつある。knownetの方はちゃんと動いている期間のほうが短い。

 探そうとしていた情報については『t_wの輪郭』を参照して見つけられた。いざというときの保証として機能してくれた。

src/middleware.ts

import { NextRequest, NextResponse } from 'next/server'

// IPホワイトリスト
const IP_WHITELIST = ['::1', ...JSON.parse(process.env.IP_WHITELIST ?? "[]")];
const IP_RESTRICT = process.env.IP_RESTRICT === 'true';

export async function middleware(request: NextRequest) {
    if (IP_RESTRICT) {
        // IPアドレスを取得
        let ip: string = request.ip ?? request.headers.get('x-real-ip') ?? '';

        // プロキシ経由の場合、x-forwarded-forヘッダーからIPアドレスを取得
        const forwardedFor = request.headers.get('x-forwarded-for');
        if (!ip && forwardedFor) {
            ip = forwardedFor.split(',').at(0) ?? 'Unknown';
        }

        // 取得したIPアドレスがホワイトリストに含まれているかチェックし、含まれていない場合はアクセス拒否
        if (!IP_WHITELIST.includes(ip)) {
            return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
        }
    }

    return NextResponse.next();
}

オンデマンドISRのrevalidateはこれではできない。これでrevalidateされるのはfetchのキャッシュ。

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export default async function revalidate({ params }: any) {
    const { kno } = params;
    revalidatePath(`/${kno}`);
    redirect(`/${kno}`);
}