しずかなインターネットの技術構成
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
npmのoptionalDependenciesとは
ググってもあまり日本語の記事がヒットしないので簡単に説明を載せておきます。まれにpackage.jsonでoptionalDependenciesというものにパッケージ名が指定されていることがあります。 "dependencies": { ... }, "devDependencies": { ... } "optionalDependencies": { "sharp": "0.26.3" } optionalDependenciesとは optionalDependenciesは利用可能であればインストールされるが、利用不可であっても他の処理を止めたくない場合に使用します。 以下npm公式ドキュメントの引用です。 If a dependency can be used, but you would like npm to proceed if it cannot be found or
Next.jsのISRで動的コンテンツをキャッシュするときの戦略
最近Next.jsのISR（Incremental Static Regeneration）を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe
未ログインでも叩けるAPIエンドポイントにレートリミットを導入する
先日だれでもAIメーカーというWebサービスをリリースしました。このサービスは例によってOpenAI APIを使っており、トークンの使用量がランニングコストに大きく影響します。 また、気軽に使ってもらえるよう未ログインでも使用できる仕様にしているため、気をつけないと悪意のある人に大量にトークンを使用されてしまう可能性があります。 ノーガードだとどうなるか 例えば、POST /api/askという「リクエストbodyのpromptの値を取り出し、OpenAI APIのChat Completionsに投げる」という単純なエンドポイントを作ったとします。 「未ログインでも使ってもらいたいから」と認証を一切しなかった場合どうなるでしょうか？ 悪意のある攻撃者に見つかれば、promptを上限ギリギリの長さの文章に設定したうえで、/api/askに対してDoS攻撃するかもしれません。 トークンを大量
Next.jsのnext/imageコンポーネントの使い方と注意点
2020/10/27にNext.js 10がリリースされました。変更点は公式のブログがとても分かりやすくまとまっています。Next.js Confの動画をチェックするのも良いかもしれません（演出が良い感じです）。 Next.js 10で特に注目すべきは、画像最適化をしてくれるnext/imageコンポーネント（next/image）のビルトインサポートだと思います。この記事ではnext/imageについてまとめます。 next/imageとは next/imageは、画像の表示を最適化してくれるコンポーネントです[1]。 画像の最適化 具体的には、以下のような最適化を行ってくれます。 画像を閲覧デバイスに応じてリサイズして表示してくれる（元画像が大きくともスマホでは小さくリサイズされた画像を表示） PNGやJPEGなどの形式の画像を自動でWebPにしてくれる（しかもWebP対応ブラウザでの
Webサービスで「ユーザーページに独自ドメインを登録できる」機能を提供するのがなぜ難しいか
コンテンツ投稿系のWebサービスでは「ユーザーのページに好きな独自ドメインを登録できる」という機能をつけたくなることがあります。ユーザーからすると「コンテンツが自分自身の所有物であること」を感じやすいですし、コンテンツのポータビリティが上がりますし、とても夢がありますよね。僕もいつか実装してみたい機能のひとつです。 しかし、この機能を提供するには、以下のようなハードルがあります。 料金 ベンダーロックイン 複雑な実装（とくに認証） (1)の料金についてはデプロイ先によります。例えばVercelであればProプラン以上であれば無制限に独自ドメインを登録できます（Unlimited custom domains for all Pro teams）。 Google Cloudの場合にはCertificate Managerで独自ドメインごとの証明書を管理するのに「ひとつあたり○USD」という感
Vercel以外でNext.jsのISRをできるのか問題
Vercelはとても良いサービスなのだが、ProプランだとBandwidth 〜1TB/月の制限があり、それを超えるとEnterpriseプランに入る必要がある 追記: 従量課金が採用された！Vercel Proプランの料金体系の変更とNext.js での対策に関して Next.jsのget○○Propsの中で重い処理をやると制限に引っかかる可能性がある。Vercelが内部的にはAWS Lambdaで動いており、そもそもLambda側の制限が厳しいという側面がある。 とはいえNext.jsをVercel以外で動かした場合にIncremental Static Regeneration（ISR）が実現できるのかあまり分かっていない そんなわけでVercel以外でNext.jsのISRをやるとどうなのかの情報をまとめてくスクラップ。 何かご存知の方はぜひコメントをお願いします🙏
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
Next.jsでページ共通の処理をする（useEffectを使う例）
Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScript） import type { AppProps } from 'next/app' import { useEffect } from 'react'; function MyApp({ Component, pageProps, router }: AppProps) { + useEffect(() => { + // ここに全ページ共通で行う処理 + },[router.pathname]) return <C
Zennを支える技術とサービス構成
Zennという技術情報共有サービスを作りました。有益な知見をシェアした開発者が、その見返りを得られるようなサービスにしたいと思います。気合いを入れつつも、時間をたっぷりかけて地道に育てていきます。 このページでは、Zennを支えている技術やサービスを紹介します。 フロントエンド Next.js フロントエンドにはNext.js（React）を使っています。開発当初はNuxt.jsを使っていたのですが、TypeScriptとの相性を考えてNext.jsへ移行しました。 技術情報共有サービスなので、主要な流入元はいずれ検索エンジンに落ち着くと予想しています。そのため、検索エンジンにインデックスしてもらいたいページはサーバーサイドレンダリング（SSR）しています。 動的コンテンツもキャッシュ Next.js 9.4からIncremental Static Regenerationという最高の機能
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
