はじめに Dependabot とは、GitHubが提供するセキュリティツールです。リポジトリの依存関係を監視し、脆弱性のあるパッケージや古いバージョンを検知して自動でプルリクエストを作成してくれます。 サプライ チェーンのセキュリティに関するリファレンス - GitHub ドキュメント GitHub Docs 実際に Dependabot を使って、脆弱性のあるパッケージを自動アップデートしてみましょう。 まずは、dependabot の設定ファイルを以下のように作ってみます。 version: 2 updates: # Enable version updates for npm - package-ecosystem: "npm" directory: "/" # Check the npm registry for updates at 09:00 JTC 00:00 UTC on Monday schedule: interval: "weekly" day: "monday" time: "00:00" open-pull-requests-limit: 5 # Add labels to pull requests labels: - "dependencies" - "npm" # Enable version updates for GitHub Actions - package-ecosystem: "github-actions" directory: "/" # Check for updates at 09:00 JTC (00:00 UTC) on Monday schedule: interval: "weekly" day: "monday" time: "00:00" open-pull-requests-limit: 3 # Add labels to pull requests labels: - "dependencies" - "github-actions" # Assign Dependabot as a reviewer for consistency assignees: - "dependabot[bot]" reviewers: - "dependabot[bot]" これで、Dependabot によって PR が自動で作成されるようになります。 この段階だと PR が作成されるだけなので、手動でPRをマージする必要があります。 これを自動化するため、GitHub Actions で自動マージされるように設定します。 ...

以下の記事で D1 を試しましたが、KV (Workers KV) も触ってみましょう。 Cloudflare Workers + Next.js + D1 + drizzle を試してみる はじめに 最近よく Cloudflare を使っています。使いやすさ、無料枠の大きさにとても感動しています。 （こちらのブログも Cloudflare Pages で配信しています） また、普段の仕事ではよく Next.js を利用しており、Next.js on Cloudflare Workers が個人開発においては 今のところ最強なんじゃないかと思っています。 ということで、Cloudflare Workers + Next.js + D1 （とdrizzle）で開発する際の基本的な流れを紹介していきます。 今回紹介するサンプルコードの全量は以下にあります。 a2-ito/cf-db-test This repository is a minimal and practical example of running Next.js App Router on Cloudflare Workers and using D1 Database with Drizzle ORM. - a2-ito/cf-db-test GitHub テンプレートの準備 以下のコマンドを実行し、テンプレートを作成します。 wrangler は適当にインストールしておいてください。 wrangler init my-app カテゴリに Framework Starter を選択し、フレームワークとして Next.js を選択します。 @a2ito ちなみに、KVとD1 の料金を比較すると、D1の方が圧倒的に安いです。 感覚的にはD1の方が高いのではないか、と考えていたので意外でした。D1を積極的に使いましょう。 ...

GitHub や Zenn などでは当たり前のようにできるコードブロックのコピーですが、 Hugo 上ではデフォルトでできません。さすがに不便すぎるので作っていきましょう。 ついでに、ファイルパスを表示できるようにしましょう。 こんな感じです これを markdown 上で表現するには以下のように書きます。 ```text {data-filename="ファイル名をつけられます"} こんな感じです ``` 変更・追加するファイルはそれぞれ以下になります。 コピーボタン追加 layout/partials/head.html static/css/code-copy.css static/js/code-copy.js ファイル名追加 layout/partials/head.html static/css/code-copy.css <link rel="stylesheet" href="/css/code-copy.css"> <link rel="stylesheet" href="/css/highlight.css"> .code-block { position: relative; } .copy-btn { position: absolute; top: 2px; right: 12px; padding: 4px 8px; font-size: 0.75rem; border-radius: 6px; background: #1e293b; color: #fff; border: none; cursor: pointer; opacity: 0.8; z-index: 10; } .copy-btn:hover { opacity: 1; } document.addEventListener("DOMContentLoaded", () => { const blocks = document.querySelectorAll("pre > code"); blocks.forEach((code) => { const pre = code.parentElement; // すでに処理済みならスキップ if (pre.parentElement.classList.contains("code-block")) return; const wrapper = document.createElement("div"); wrapper.className = "code-block"; // ファイル名要素の作成 const highlight = pre.closest(".highlight"); if (highlight && highlight.dataset.filename) { const filename = document.createElement("div"); filename.className = "code-filename"; filename.textContent = highlight.dataset.filename; wrapper.appendChild(filename); } const button = document.createElement("button"); button.className = "copy-btn"; button.textContent = "Copy"; button.addEventListener("click", async () => { await navigator.clipboard.writeText(code.textContent); button.textContent = "Copied!"; setTimeout(() => (button.textContent = "Copy"), 1500); }); pre.parentNode.insertBefore(wrapper, pre); wrapper.appendChild(button); wrapper.appendChild(pre); }); }); .highlight[data-filename] { position: relative; padding-top: 0; } .code-filename { position: relative; padding: 6px 12px; font-size: 0.75rem; font-family: monospace; background: #0f172a; color: #e5e7eb; border-bottom-right-radius: 8px; user-select: text; cursor: text; }

Hugo 上で何かのリンクを貼ると↓のようになります。 https://github.com/a2-ito/cf-db-test これだと殺風景なので、Zenn などで自動作成されるブログカードのように装飾してみます。 実際に作ったものがこちら↓ a2-ito/cf-db-test This repository is a minimal and practical example of running Next.js App Router on Cloudflare Workers and using D1 Database with Drizzle ORM. - a2-ito/cf-db-test GitHub 基本的に AI に作ってもらったのですが、いくつか微調整しました。 OGP 画像は 160x120 の領域に拡大して収めています。（比率が違う画像の場合、引き伸ばされた感で微妙です、、、） GitHub リポジトリの場合、ogp:title にリポジトリ名と説明が含まれるようで、リポジトリ名だけを title として抽出・表示しています。 description が長い場合、カードが縦に伸びてしまうので、2行を超えないよう3行目以降は … と表示されるようにしています。 使い方としては、以下の2ファイルをコピペで配置してもらえればOKです。 assets/css/linkcard.css layouts/_shortcodes/linkcard.html a.link-card { box-shadow: none !important; } .link-card { display: flex; gap: 8px; border-radius: 12px; background: #0b2a4a; color: #fff; text-decoration: none; margin: 1.5em 0; } .link-card:hover { opacity: 0.9; } .link-card__body { flex: 1; min-width: 0; padding: 12px; } .link-card__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; } .link-card__desc { font-size: 0.9rem; opacity: 0.85; margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-card__site { font-size: 0.75rem; opacity: 0.6; } .link-card__image { width: 160px; height: 120px; overflow: hidden; flex-shrink: 0; background: #0a1e33; /* 余白用 */ display: flex; align-items: center; justify-content: center; } .link-card__image img { width: 100%; height: 100%; display: block; border-radius: 0px 8px 8px 0px; } layouts/_shortcodes/linkcard.html ...

引き続き Cloudflare Workers を使用して、本番環境とはアプリ・DBの異なるステージング環境を作ってみます。 Environments があり、ステージング環境のような異なるバージョンのアプリをデプロイすることができます。 Environments · Cloudflare Workers docs Use environments to create different configurations for the same Worker application. Cloudflare Docs 今回もこちらのリポジトリを使います。 a2-ito/cf-db-test This repository is a minimal and practical example of running Next.js App Router on Cloudflare Workers and using D1 Database with Drizzle ORM. - a2-ito/cf-db-test GitHub まずは、本番用のDBとステージング用のDBを作成します。 ...