t_wの輪郭

ブログのリプレイスできたああああああああ！！！！！

AWS Amplifyで動かしたら月額１万円かかって爆死したので、Vultrに戻した。

ついでにPostgreSQLからDuckDBに変えてみた。
PostgreSQLで300msかかってた処理が100msになった。やったぜ。

https://towasys.com/

ブログのお引越しDone
データは取得中なので、まだ見れないページがある。データ取得は明日には終わると思う。

CDNのキャッシュで戦ってるので、アクセスしてないページのURLを貼ると、OGPのカードが取得されないのう。

ブログのお引越し作業中

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

うぐー！！！！純朴な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/

流石に寝るか……。キリがない。

あ〜ちゃんとManyToManyでスキーマ組めばもっと速く出来るのか。

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

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

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

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

OGPがうごいてはるわ

Feedlyで動いていることが確認できたのでヨシ！！！

import { Post } from "@/models";
import React from "react";
import { renderToString } from 'react-dom/server';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      [elemName: string]: unknown;
    }
  }
}

export function RssFeed({ posts }: { posts: Post[] }) {
  return renderToString(
    <rss version='2.0'>
      <channel>
        <language>ja</language>
        <title>t_wの輪郭</title>
        <rsslink>https://towasys.com/</rsslink>
        <description>t_wの輪郭のRSSです。</description>
        {posts.map(post => <item>
          <title>{(post.title ? post.title : "あれ") + "|" + post.kno}</title>
          <description>{post.body_html ?? ""}</description>
          {post.posted_at && <pubDate>{new Date(post.posted_at * 1000).toUTCString()}</pubDate>}
          <rsslink>{`https://towasys.com/${post.kno}`}</rsslink>
          <guid isPermaLink="true">{`https://towasys.com/${post.kno}`}</guid>
        </item>)}
      </channel>
    </rss>
  ).replaceAll("rsslink", "link")
}

Next.jsでの使い方

getServerSidePropsで下記を実行

const rss_feed = RssFeed({ posts })
context.res.statusCode = 200
context.res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate') // 24時間キャッシュする
context.res.setHeader('Content-Type', 'text/xml')
context.res.end(rss_feed)
return {
    props: {},
}

RSSとOGPでけたら乗り換えやな

「はよやれ」になったのでやるか

トップページの読み込みに1.5秒も掛かるのがいやぞなもしなー

export let hoge = nullという謎のおまじないで変数をキャッシュして高速化した。export letて……。
ネタ元：『How can I cache something inside a variable in NextJS?』

最低限の実装ができました
https://main.du4rqori3cgjf.amplifyapp.com/

ノリと勢いで『t_wの輪郭』をReactで作り直しだウェーイってしてるけど、SEO死ぬんじゃねこれ

あとOGP対応無理くねコレ

何ならRSSも無理っぽい

AWS AmplifyでSSRする方法探すか

使用できますAWS Amplifyサーバー側レンダリング (SSR) を使用する Web アプリをデプロイしてホストします。現在、Amplify ホスティングは Next.js フレームワークを使用して作成されたアプリをサポートしています。

公式の日本語が怪しいけど、AWS AmplifyはNext.jsでSSR出来るらしい。

React+DataStoreからNext.jsに切り替えるぞッ！！！！

ここまで作ったフロントエンドを捨てることになるけど、メリットはあるし、やるしかねぇ。

• フロントエンドの実装はまだほとんど進んでない
• AmplifyでNext.jsで動かす勉強になる