タグ

ブックマーク / zenn.dev/catnose99 (6)

  • Cloudflare Workers を使う前に知っておきたい注意点

    Cloudflare WorkersでNode.jsを動かすためのあれこれをスクラップに残していたのですが、ハマったポイントが多かったのでこちらに整理しておきます。 今回やろうとしたのは、Zennのマークダウン→HTML変換のAPICloudflare Workersで動かすというものです。試行錯誤の末に断念したのですが、以下でその理由をまとめておきます。 CPUやメモリ、ファイルサイズなどの制限が厳しめ 2023/07/25時点でのCloudflare Workersの制限一覧がこちら。 Limits - Cloudflare Workers CDNのエッジで動くので、パフォーマンスが良いぶん制限が厳しめです。 メモリ上限は128MB サイズ上限は無料プランだと圧縮後1MBまで 有料プランだと10MBの上限となるが、できるかぎり1MB以内に抑えたい(参考:Server Side Jav

    Cloudflare Workers を使う前に知っておきたい注意点
  • Cloudflare WorkersでSSRができると何が嬉しいか

    Next.jsの対抗馬となりそうなReactのフレームワークでRemixのv1.0がリリースされました。 個人的にRemixでいちばん魅力を感じているのはCloudflare WorkersでSSRができるという点です(現状ではNext.jsCloudflare Workers上でSSRするのは難しい)。これがなぜ嬉しいのかと言うと、パフォーマンスを出しつつ、低コストで運用でき、大量のアクセスに対しても低コストでスケールできそうだからです。 そもそもSSRをする必要ある? ほとんどのWebサービスはSSRなしでSPAとしてビルドし、Cloudflare PagesやGitHub Pagesに静的ファイルをのせて動かせば十分だと思います。 例えば僕が先日作った個人開発のサービスもReact on Cloudflare Pagesの完全なSPAですが、SSRが必要な要素はまったくありません。

    Cloudflare WorkersでSSRができると何が嬉しいか
  • ビデオ会議でカメラの映像の代わりに絵文字を配信するためのツールを作った

    ビデオ会議で顔出しNGな人でも感情を表現できるように、絵文字やテキストをカメラ映像代わりに表示するためのサービスを作りました。 自分のカメラ映像の代わりにこういうやつを表示 👆 こんな感じでZoomやGoogle Meetでのビデオ会議で、自分の顔の代わりに絵文字を表示できるサービスです。絵文字に動きをつけたり、自由に文字入力することもできます。 👆 画面共有ではなく、来自分の映像が表示されるスペースに、絵文字を表示させるような形で使います。 ユーザー登録なしで使えますが、ZoomやGoogle Meetにブラウザの画面を表示するためにOBSをインストールする必要があります。初回の設定手順は使い方ページで詳しく説明してあります。 作った理由 Zoomのイベントでパネルディスカッションに参加することになったからです(DevIO 2021)。顔は出したくないものの、自分だけ静止画のアイコ

    ビデオ会議でカメラの映像の代わりに絵文字を配信するためのツールを作った
  • Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる

    Vercel VercelNext.jsなら特に設定しなくともSSRができる状態でデプロイできる。Nuxt.jsだとコミュニティが用意しているbuilderを使えばSSR対応アプリをVercelにデプロイできる。builderが用意されていないフレームワークでSSRを行うにはデプロイ周りで頑張る必要が出てくる。 VercelではちょっとしたWeb APIを用意したいときも、/apiディレクトリを用意してJSファイルなどを置いておけばまとめてデプロイしてくれる。 Netlify サーバーサイドで動かしたいスクリプトはNetlify Functionsで動かすことになるが、フレームワークごとに用意されているプラグインを使うことでまとめてデプロイができたりする。例えばnetlify-plugin-nextjsを使えばNext.jsでSSR対応したアプリを動かせるっぽい。またnetlify.to

    Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
  • 絵文字をファビコンとして表示する簡単な方法

    2021/5/17追記 2021年5月現在、Safariではこの方法に対応していません。Safari用に別途ファビコンを用意する必要があります。 ちょっとしたWebサイトを作るときに地味に面倒なのがファビコンです。わざわざ画像を作るのも、どこかからちょうど良い画像素材を持ってくるのも、アップロードするのも面倒だったりします。 そんなときは絵文字をファビコンとして使いましょう。 やり方 先にやり方を載せておきます。これをHTMLの<head>の中へコピペすればファビコンとして絵文字が表示されます。 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%

    絵文字をファビコンとして表示する簡単な方法
    mapk0y
    mapk0y 2021/05/15
  • Zennで発生した障害の原因と行なった対策のまとめ

    2021/02/24の11時頃〜1時間ほどzenn.devにアクセスしづらい・アクセスできない問題が発生していました。その後も3時間ほど一部のページへのアクセスができない状況となっていました。Zennに投稿してくれた方、見に来てくれた方、ご迷惑をおかけしてすみませんでした。 今回の障害は学びが多かったので、個人の記事として残しておくことにします。 原因 今回の障害は、使用しているクラウドサービスではなく、Zenn自体に原因がありました。 1. KaTeX記法により生成されるHTMLが思った以上に大きかった ZennのマークダウンエディターではKaTeX記法をサポートしています。例えば、$a\ne0$と書くとa\ne0と表示されます。 KaTeXはサーバーサイドレンダリングをサポートしており、KaTeX記法からの数式のHTMLへの変換はサーバーサイドで行なっていました。DBにはマークダウンだ

    Zennで発生した障害の原因と行なった対策のまとめ
  • 1