画像扱う系のことがしたくて、Cloudflare R2に入門してみた(*´ω｀*) R2はS3互換のため、aws-sdk-js-v3を使って操作するらしい Cloudflare R2 · Cloudflare R2 docs aws-sdk-js-v3 · Cloudflare R2 docs 流れ だいたいこんな感じ Cloudflare R2のバケットを作成 バケットにドメインを接続 R2へのアクセスキーを生成 R2 API Tokens | Cloudflare Authentication · Cloudflare R2 docs 権限とか対象バケットとかもして挺できる aws-sdk-js-v3を使って書き込み インストール まずはインストール pnpm add @aws-sdk/client-s3 使い方 使い方はこんな感じ import { HeadObjectCommand

以前書いたsatori/sharp/satori-htmlでOG画像生成を使ってたら、 やたらsatori-htmlの処理に時間がかかるので、 いろいろ調べてみたときの備忘録(*´ω｀*) unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。 使ってるのは前回と同じ、この3つ vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 遅かったときのコード 最初はこんな感じで、 いくつかの画像をBase64で埋め込む感じに。 import satori from "satori"; import { html } from "satori-html"; import sharp fr

unjs/nitroでこんな感じのディレクトリ構成の場合、 _ignore_dir/*やusers/_ignore_path.tsを無視したいなと思い、 色々調べてみたときの備忘録(*´ω｀*) routes/ _ignore_dir/ index.ts users/ _ignore_path.ts index.ts ドキュメントにはちょろっと書いてあるけど、 ignoreオプションを付けばよいっぽい。 Config | Nitro - Next Generation Server Toolkit 使い方 使い方はこんな感じ。正規表現も使えるっぽい。 //https://nitro.unjs.io/config export default defineNitroConfig({ srcDir: "server", // ignore: ["routes/**/_*", "routes/*

day.jsを使ってたけど、サイズも小さく軽量とのことで、 ちょっと試してみたときの備忘録(*´ω｀*) tempo.formkit.com FormKitのチームが開発したらしい formkit.com Tempoとは nativeのDateを操作するユーティリティなライブラリ。 day.jsとは違い、Date自体を直接操作する感じ。 import { format, parse } from "@formkit/tempo" // Dateのformat const readable = format(new Date(), "full") // Dateへのparse parse(readable, "full") タイムゾーンのサポートも手厚い。 import { tzDate, format, applyOffset, offset } from "@formkit/tempo"

Axiosからunjs/ofetchに移行する際に、 例外を共通化・独自クラスにしたいなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) onResponseErrorを利用すればOK ofetch.create()を使って、共通的なレスポンスエラーに対し、 onResponseErrorで設定してやればいいっぽい。 import { ofetch, type $Fetch, type FetchOptions } from "ofetch"; const $Fetch $fetch = ofetch.create({ onResponseError: ({ response, error, request, options }) => { // Raw Responseから必要な情報を取得する const number statusCode = response.status; c

定期実行するバッチ的なNodejsアプリをビルドしたいと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) Viteも試したけど、 ブラウザ用の設定などが組み込まれているので、 esbuildを使うようにした vite-plugin-nodeもあるけど、 SSRなどのサーバ用のものしかないっぽい。。 esbuildでのビルドスクリプト ディレクトリ構成はこんな感じ。 ./ src/ ... ソースのファイル index.ts dist/ ... ビルド後のファイル index.js build.ts ... ビルドスクリプト ビルドスクリプト(build.ts)の中身はこんな感じ。 // ./build.ts import { context } from "esbuild"; import { existsSync, rmSync } from "fs"; import { resol

Portainerが便利というはなし聞いて、 ちょっと入門してみたときの備忘録(*´ω｀*) Portainerとは Portainer is a fully featured Docker management tool. GUIでDockerを管理できる便利なツール。 機能もいろいろあるっぽい。 Fetature Build your images Deploy your application Secure your environments Browse your registries Manage your clusters Troubleshoot your configuration 読んでみたのはこのあたり Document Site: Welcome - Portainer Documentation GitHub Repository: portainer/portai

unjs/nitroをCloud Functions for Firebase（第2世代）してみたときの備忘録(*´ω｀*) Cloud Functions(2nd gen)を試してみたかったこともあるけど、 すんなりデプロイできたので、Cloud Runをつかいたいなら、これでもいいかもしれない。 Cloud Functionsの1st genと2nd genの比較 公式の比較ページはこちら。 Cloud Functions バージョンの比較  |  Cloud Functions for Firebase 機能 Cloud Functions（第 1 世代） Cloud Functions（第 2 世代） イメージ レジストリ Container Registry または Artifact Registry Artifact Registry のみ リクエストのタイムアウト 最大 9

Nuxtだと、Nuxt SEO Kitのnuxt-og-imageを使えば、 vueコンポーネントとかHMLTをOG画像にできるけど、 unjs/nitroでもできないかなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) nuxt-og-imageの中をのぞいてみたら、 satoriとsharpを使ってたので、それを参考に実装してみた satori+sharpを使った画像生成 この3つのライブラリを使うと、HTMLをPNGに変換できるっぽい vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 satoriはVercel社が出しているライブラリで、JSX形式で利用するっぽい。 なので、HTMLといってもReactNod

Nuxt3でSPA(ssr: false)時に真っ白な画面が表示されるけれど、 Nuxt2みたいにローディングを表示したいなといろいろ調べたときの備忘録(*´ω｀*) Nuxt3.6以降で対応されたっぽい。 Nuxt 3.6 · Nuxt Blog spaLoadingTemplate | Nuxt Configuration Nuxt2時代 Nuxt2ではnuxt.config.tsに、 loadingIndicator指定すればOKだったやつ SpinKitにあるものを選択できた。 import { NuxtConfig } from "@nuxt/types"; const config: NuxtConfig = { ssr: false, target: "static", loadingIndicator: { name: 'circle', color: '#3B8070',

かなり古いNuxtアプリにNuxt Bridgeを入れようとしたら、 かなりはまったので、いろいろ調べたときの備忘録(*´ω｀*) 昔の環境 Nuxt v2.15(webpack4) Node v14 Buefy node-sass v5.0.0 sass-loader v10.1.0 Nuxt2はwebpack4に依存。 sass-loaderのv11以降は、webpack5が必要。 sass-loaderのv10は、node-sassの4.0 or 5.0が必要 node-sassの5.0はNode15までしか動かない。。 @nuxt/bridgeは"node": "^14.16.0 || ^16.11.0 || >=17.0.0" ので、Node/sass周りをなんとかしないとBridgeを入れることができなかった。。 導入手順 これらの記事に従って進めてる。 Demystifyin

最近、Nitroでサーバを実装しているけど、 テスト周りでハマったので、いろいろ調べてみたときの備忘録(*´ω｀*) 現状、テストに関するガイドはないっぽい このディスカッションくらいしかないっぽい。。 Testing examples? · unjs/nitro · Discussion #194 Nitro自体のテストコードは用意されているが、 ビルドなども含まれているので、これをそのまま使うのは少し冗長。 nitro/test at main · unjs/nitro test/tests.tsやtest/presets/node.test.tsを読んでいくと、 以下のような形で、ビルドされたサーバコード(.output/server/index.msj)を起動しているよう。 const entryPath = resolve(ctx.outDir, "server/index.mj

Nuxt3のモジュールを作りたくなり、 いろいろ調べてみたときの備忘録(*´ω｀*) 公式サイトのドキュメントを見ながら Module Author Guide · Nuxt Advanced テンプレートから作成 # テンプレートからmy-moduleディレクトリを作成 $ npx nuxi init -t module my-module $ cd my-module # 開発モードで使う資材の生成 $ npm run dev:prepare # 開発サーバの起動 $ npm run dev ディレクトリ構成 テンプレートから作成されるディレクトリ構成はこんな感じ my-module/ # moduleの本体 - src/ - runtime/ - plugin.ts - module.ts # 開発時確認用のNuxtプロジェクト - playground/ - app.vue - n

この記事をみて、Nitro サーバに興味が出たので、 ドキュメントみながら、少し触ってみたときの備忘録(*´ω｀*) Nitro + TypeScript で作る軽量APIサーバ - Qiita 全てをdevDependenciesにするよ。具体的には、ビルド後の資材が必要最低限のもので.outputディレクトリにまとめられるから、 「巨大な node_modules を AWS Lambda にあげて、コールドスタート時のあまりの遅さに悩まされる」 なんて事態を回避できるよ。 Nitro - Create web servers that run anywhere. ビルドも早く軽量で、よさそうな感じ(*´ω｀*) Nuxt3がなんであの書き方になったのかも少し理解できた気がする。 install package.jsonの設定 $ pnpm dlx giget@latest nitro

前回の続き(*´ω｀*) pnpm x Turborepoでつくったmonorepo構成で、 ソースからデプロイしようと思ったら、ハマったときにの備忘録(*´ω｀*) pnpm x Turborepo x lerna-lite x GitHub Packagesでmonorepoなオレオレ非公開ライブラリをつくってみる - くらげになりたい。 GitHub Actions+OIDCでCloud Runにデプロイする(Node.js) - くらげになりたい。 ソースからCloud Runにデプロイする(Buildpacks/Node.js) - くらげになりたい。 ディレクトリ構成 構成としてはこんな感じ。 - packages/ - common-lib/ - package.json - nuxt-app - .output - app.vue - nuxt.config.ts - pa

Nuxt3への移行の前段階として、Vue2.7にする方法を調べたときの備忘録(*´ω｀*) 以前はnuxt-edgeを使ってたけど、いつのまにかNuxt2.16が出てた(*´ω｀*) Release v2.16.2 · nuxt/nuxt Vue2.7について Vue3で追加された機能のいくつかが使える様になっている。 ある程度、Nuxt2+Vue2.7で書き換えを行ってから、 Nuxt3+Vue3にするのが良さそう。 Vue 2.7 "Naruto" Released | The Vue Point できるようになること Composition API SFC <script setup> SFC CSS v-bind defineComponent()の型推論が向上 h()/useSlot()/useAttrs()/useCssModules() set()/del()/nextTic

Nuxt3でAPIのURLなどの設定値についてみていたら、 実はruntimeConfig以外にもいろいろあったので調べてみたときの備忘録(*´ω｀*) nuxt.config.tsのruntimeConfig いつものやつ。Nuxt3からはcomposablesが提供され、 型推論が効くようになっている。 // nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { // Private keys are only available on the server apiSecret: '123', // Public keys that are exposed to the client public: { apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api' }

前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。

なにかChrome拡張を作ってみたいなと思い、 viteとvueでHello Worldしてみたときの備忘録(*´ω｀*) 思いの外、簡単にHello Worldできた(*´ω｀*) Welcome - Chrome Developers Vite | 次世代フロントエンドツール Introduction | CRXJS Vite Plugin プラグインのチュートリアルを見ながら試す Create a project | CRXJS Vite Plugin 環境は以下の通り Node.js: v16.18.0 vite: 3.2.4 @crxjs/vite-plugin: 2.0.0-beta.6 @vitejs/plugin-vue: 3.2.0 pnpm: v7.14.0 ts-node: 10.9.1 typescript: 4.9.3 初期設定 # viteでプロジェクトを作成

GitHub Actionsを試すときに、いちいちコミットしないといけないのがめんどくさいので、 ローカルで確認できればな〜と思い、色々調べたときの備忘録。 Dockerを立ち上げてローカルで実行できるのがあった...(*´ω｀*) ・nektos/act: Run your GitHub Actions locally 🚀 使ったサンプルはこれ(*´ω｀*) # ./github/workflows/build.yml # ./github/workflows/test.yml name: Act Sample on: release: types: [created] jobs: build: runs-on: ubuntu-latest steps: - run: | echo "MY_ENV_VAR = ${{ env.MY_ENV_VAR }}" echo "MY_2ND_EN