Remix+CloudflareでWebサイトを作る 15(Dependabotを更新・R2命名規則・埋め込まれたYoutubeの最大幅を設定・Prisma対応はどう?・Xのアイコンを表示)
【2024-03-10】Dependabotに特定のパッケージのバージョンをあげさせない
背景
1つ前のScrapの投稿でmarkdown-it
のバージョンを最新から1つ前に指定した。
するとすぐにDependabotがバージョンを最新にアプデしたPRを作ってCloudflareのビルドエラーで落ちている。
実装
markdown-it
は最新にしなくていいなぁ...。
厳密にいうと14.0.0でなければ良いので以下のように修正する。
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "weekly"
groups:
dependencies:
patterns:
- "*"
+ ignore:
+ - dependency-name: "markdown-it"
+ versions: ["14.0.0"]
メジャーアップデートを無視したければ以下のようにする。
ignore:
- dependency-name: "markdown-it"
+ update-types: [ "version-update:semver-major" ]
結果
落ちていたPRをCloseしてくれた。
因みに手動実行は「Insights > Dependency graph > Dependabot > package.json」の「Check for updates」をクリック。
参考
【2024-03-13】R2のキーの命名規則
背景
やりたいこと
- ユーザーアイコンやら画像ファイルをR2に保存したい
- GitHubやZennのようにMarkdownにペーストした際に画像をアップロードしてリンクを表示させたい
キーの命名規則
R2のバケット・キー命名規則について調べる。
(R2の情報は少ないし、S3と互換性があったと思うからS3について調べてみた)
Qiitaの記事の中にある通りまさに「REST的な命名」をしようとしていたわけだが逆だったのか。
今回は要件がある程度固まってるし大丈夫そうだな。
3 ~ 4 文字のハッシュプレフィックスを追加すれば十分です。 プレフィックスとしては、16 進のハッシュを使用することを強くお勧めします。
Zenn の画像URLも zenn-user-upload/f3241403904d-20240316.png
って感じになっているのはこのパフォーマンスの問題を回避するためだったりするのかな?
まとめると、
- 前提
- S3は各リージョンにオブジェクトキー名のインデックスを持っており、オブジェクトキーは複数のパーティションにUTF-8バイナリ順で格納されている
- 課題
- キー名の一部に連番や日付を使うとパフォーマンスに問題が発生する
- 例: examplebucket/2013-26-05-15-00-00/cust1234234/photo1.jpg
- キー名の一部に連番や日付を使うとパフォーマンスに問題が発生する
- 理由
- 連続するプレフィックスを使うと、Amazon S3が大量のキーを特定のパーティションに集中させるためパフォーマンスが低下する
- その結果、そのパーティションの処理能力が限られ、スローダウンが生じる可能性がある
- 解決方法
- ランダムなプレフィックスを使うと、キーが複数のパーティションに均等に分散されるため、負荷がより効率的に分散され、パフォーマンスの問題が軽減される
- 例: examplebucket/232a-2013-26-05-15-00-00/cust1234234/photo1.jpg
- プレフィックスは3〜4文字あればよく、16進数のハッシュがおすすめ
- ランダムなプレフィックスを使うと、キーが複数のパーティションに均等に分散されるため、負荷がより効率的に分散され、パフォーマンスの問題が軽減される
その他
GitHubとかこのZennも「クリップボードから画像をコピペしたらアップロードされてURLが発行される」わけだけども、それだと画像をアップロードしたが使わないケースがあった場合無駄に容量食っちゃうのでは?と思っている。
しかし、それを回避しようとすると、記事投稿時に選択したものだけにURLが発行されるからユーザー的にはちょっと手間ではある。
無駄に容量食うのは許容するしかないよね、という考えが一般的ということなのだろうか?
【2024-03-15】Prisma x D1(SQLite)ついにAssigneesが...!
このScrapで見ていたIssue、Prisma x D1(SQLite)のIssue、ついにアサインされた
03-17追記
このパッケージでいけるのか??
3月いっぱい様子見てよ
03-21追記
試してみる人いた。
結論(2024/3/19時点)
ビルドサイズがPrismaだけで1MB近く専有するので有料版のCloudflare Workersのみが動作します
PrismaのmigrateはCloudflare D1への反映はサポートされていないのでPrismaが出力したDDLをCloudflare D1に向けて実行する必要があります
それに対して更にService Bindingで回避できるよ、というScrapを書いたという投稿。
【2024-03-15】埋め込まれたYoutubeの最大幅を設定する
追記:どんぴしゃの内容がググっても意外と無かったので記事にしてみた。
やりたいこと
Zennのパブリックリポジトリ内のCSSを見ながらYoutubeの埋め込みのCSSを書いている。
しかしwidthは100%になってしまうので、明示的に最大幅を設定したい。
実装
Youtubeの埋め込みに関する最小限の実装は以下。
span.embed-block {
max-width: 600px; // 最大幅
display: block;
}
.embed-youtube {
position: relative;
padding-bottom: min(calc(58%), calc(600px / 16px * 9px + 16px)); // 16pxは適当な値
iframe {
position: absolute;
width: 100%;
height: auto;
border: none;
aspect-ratio: 16 / 9;
}
}
結果
濃い灰色の部分が900pxあるが、widthが900pxになるのは大きすぎるので最大幅を600pxにしている。
画面幅が大きい時
濃い灰色の右側に1/3のスペースがあり最大幅が設定されていることがわかる。
画面幅が小さい時
画面幅大きい時とスクショの横幅は同じ。
レスポンシブにYoutubeの幅が小さくなっていることがわかる。
【2024-03-16】Xのアイコンを表示したいのでライブラリ調べる
有名なやーつ。
こっちは81.6MB
こっちは139kB。590倍も違うのか...。
Xとかメジャーどころだけあればいいしこっちかな。
このScrapでサイズも見ようと反省したけど今回は気にしてみた。
【2024-03-16】Xのシェアボタンを追加
自分の記事を見ながらやった。
Cloudflareで本番にデプロイしてからXにシェアしてそれがOGPの画像が表示されるまで10分くらいかかった。
なんかバグってるのかと思って調べてたよ...。
記事内のnginxのときもそうだけどOGP関連は反映されるまでに時間かかることを考慮せねば。
【2024-03-16】Scrapを書きながらだとなんか学べる気がする
この本読んでないけど「緻密質問をしながら学習していくのが良い」というのがなんだかしっくりきた。
細かいところまで気になって自分で調べたりChatGPTで細かいところまで聞いてみて、言語化してみるのっていいんだな。
この本読んでみようかな。