Closed7

Remix+CloudflareでWebサイトを作る 15(Dependabotを更新・R2命名規則・埋め込まれたYoutubeの最大幅を設定・Prisma対応はどう?・Xのアイコンを表示)

saneatsusaneatsu

【2024-03-10】Dependabotに特定のパッケージのバージョンをあげさせない

背景

https://zenn.dev/link/comments/eb2f79f3f8d847

1つ前のScrapの投稿でmarkdown-itのバージョンを最新から1つ前に指定した。
するとすぐにDependabotがバージョンを最新にアプデしたPRを作ってCloudflareのビルドエラーで落ちている。

実装

markdown-itは最新にしなくていいなぁ...。
厳密にいうと14.0.0でなければ良いので以下のように修正する。

dependabot.yml
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    groups:
      dependencies:
        patterns:
          - "*"
+   ignore:
+     - dependency-name: "markdown-it"
+       versions: ["14.0.0"]

メジャーアップデートを無視したければ以下のようにする。

dependabot.yml
    ignore:
      - dependency-name: "markdown-it"
+       update-types: [ "version-update:semver-major" ]

結果

落ちていたPRをCloseしてくれた。

因みに手動実行は「Insights > Dependency graph > Dependabot > package.json」の「Check for updates」をクリック。

参考

https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#ignore

saneatsusaneatsu

【2024-03-13】R2のキーの命名規則

背景

やりたいこと

  • ユーザーアイコンやら画像ファイルをR2に保存したい
  • GitHubやZennのようにMarkdownにペーストした際に画像をアップロードしてリンクを表示させたい

キーの命名規則

R2のバケット・キー命名規則について調べる。
(R2の情報は少ないし、S3と互換性があったと思うからS3について調べてみた)

https://qiita.com/kurimoto/items/c4d194458984956c4ad0

Qiitaの記事の中にある通りまさに「REST的な命名」をしようとしていたわけだが逆だったのか。
今回は要件がある程度固まってるし大丈夫そうだな。

https://bootjp.me/2018/02/14/aws-s3でオブジェクトキーの命名に気をつける話/

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が発行されるからユーザー的にはちょっと手間ではある。

無駄に容量食うのは許容するしかないよね、という考えが一般的ということなのだろうか?

saneatsusaneatsu

【2024-03-15】Prisma x D1(SQLite)ついにAssigneesが...!

https://zenn.dev/link/comments/b191d7aee7cb44

このScrapで見ていたIssue、Prisma x D1(SQLite)のIssue、ついにアサインされた

https://github.com/prisma/prisma/issues/13310

03-17追記

https://twitter.com/laiso/status/1768951054203486271

このパッケージでいけるのか??
3月いっぱい様子見てよ

https://www.npmjs.com/package/@prisma/adapter-d1

03-21追記

https://zenn.dev/chimame/articles/d3e7af9a612038

試してみる人いた。

結論(2024/3/19時点)
ビルドサイズがPrismaだけで1MB近く専有するので有料版のCloudflare Workersのみが動作します
PrismaのmigrateはCloudflare D1への反映はサポートされていないのでPrismaが出力したDDLをCloudflare D1に向けて実行する必要があります

https://twitter.com/mizchi/status/1770783184357097651

それに対して更にService Bindingで回避できるよ、というScrapを書いたという投稿。

saneatsusaneatsu

【2024-03-15】埋め込まれたYoutubeの最大幅を設定する

https://zenn.dev/saneatsu/articles/cc43737be28331

追記:どんぴしゃの内容がググっても意外と無かったので記事にしてみた。

やりたいこと

https://github.com/zenn-dev/zenn-editor/blob/main/packages/zenn-content-css/src/_embed.scss#L1-L27

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の幅が小さくなっていることがわかる。

saneatsusaneatsu

【2024-03-16】Xのシェアボタンを追加

https://zenn.dev/saneatsu/articles/405dc781dfbe2e

自分の記事を見ながらやった。
Cloudflareで本番にデプロイしてからXにシェアしてそれがOGPの画像が表示されるまで10分くらいかかった。
なんかバグってるのかと思って調べてたよ...。

記事内のnginxのときもそうだけどOGP関連は反映されるまでに時間かかることを考慮せねば。

saneatsusaneatsu

【2024-03-16】Scrapを書きながらだとなんか学べる気がする

https://twitter.com/naoya_ito/status/1768911552739221556

この本読んでないけど「緻密質問をしながら学習していくのが良い」というのがなんだかしっくりきた。

細かいところまで気になって自分で調べたりChatGPTで細かいところまで聞いてみて、言語化してみるのっていいんだな。

この本読んでみようかな。

このスクラップは2024/03/16にクローズされました