2024リニューアル：ImageCDN-Bun

.github/workflows/lint-test.yml

@@ -20,40 +20,30 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
+      - uses: oven-sh/setup-bun@v2
         with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          bun-version: latest
 
       - name: Install dependencies
-        run: pnpm install
+        run: bun install
 
       - name: Run Lint
-        run: pnpm run lint
+        run: bun run lint
 
       - name: Run Tests
-        run: pnpm run test
+        run: |
+          touch .dev.vars
+          echo "PARTNER_TAG=$PARTNER_TAG" >> .dev.vars
+          echo "PAAPI_SECRETKEY=$PAAPI_SECRETKEY" >> .dev.vars
+          echo "PAAPI_ACCESSKEY=$PAAPI_ACCESSKEY" >> .dev.vars
+          bun run test
         env:
           PARTNER_TAG: ${{ secrets.PARTNER_TAG }}
           PAAPI_SECRETKEY: ${{ secrets.PAAPI_SECRETKEY }}

.gitignore

@@ -23,6 +23,7 @@ pnpm-debug.log*
 # cloudflare
 .dev.vars
 .wrangler/
+worker-configuration.d.ts
 
 # リダイレクトファイルはスクリプトでprebuild生成
 public/_redirects

README.md

@@ -8,7 +8,7 @@ This is gensobunya's bike blog repository.
 
 ### Build for
 
-Cloudflare Pages and Functions
+Cloudflare Pages(w/ KV) and Functions
 
 ### local development
 
@@ -22,17 +22,11 @@ At first, run `npx wrangler login` before start local environment.
   PAAPI_ACCESSKEY
   PAAPI_SECRETKEY
   PARTNER_TAG
-  CLOUDFLARE_KV_TOKEN
-  CLOUDFLARE_ACCOUNT_IDENTIFIER
-  OGP_DATASTORE_ID
 ```
 
 - PAAPI_ACCESSKEY: PA-API v5 Access key ID
 - PAAPI_SECRETKEY: PA-API v5 Secret key
 - PARTNER_TAG: Amazon Associate Partner Tag
-- CLOUDFLARE_KV_TOKEN: Cloudflare v4 API Token which need "KV edit" role
-- CLOUDFLARE_ACCOUNT_IDENTIFIER: Cloudflare Account ID(not email)
-- OGP_DATASTORE_ID: Cloudflare KV ID (not local-preview ID)
 
 ## Operation
 

astro.config.ts

@@ -1,21 +1,34 @@
-import { defineConfig } from "astro/config"
+import { defineConfig, passthroughImageService } from "astro/config"
 import mdx from "@astrojs/mdx"
 import sitemap from "@astrojs/sitemap"
 import AutoImport from "astro-auto-import"
 import tailwind from "@astrojs/tailwind"
 import react from "@astrojs/react"
-// import remarkDescription from "astro-remark-description"
-import partytown from "@astrojs/partytown"
 import icon from "astro-icon"
-import { rehypeExcerptContent } from "./src/plugin/rehypeExcerpt"
+import pagefind from "astro-pagefind"
+
+// ローカル開発時は画像サービスをパススルー
+const imageServiceConfig = import.meta.env.DEV
+  ? passthroughImageService()
+  : {
+      entrypoint: "./src/entrypoint/cfImageService",
+      config: {
+        maxWidth: 800
+      }
+    }
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://blog.gensobunya.net/",
+  image: {
+    service: imageServiceConfig
+  },
   integrations: [
     AutoImport({
       imports: [
-        "./src/components/mdx/LinkBox.astro",
+        "./src/components/mdx/LinkCard.astro",
+        "./src/components/mdx/Amzn.astro",
+        "./src/components/mdx/SimpleLinkCard.astro",
         {
           "./src/components/mdx/positive.tsx": ["PositiveBox"],
           "./src/components/mdx/negative.tsx": ["NegativeBox"]
@@ -26,20 +39,26 @@ export default defineConfig({
     sitemap(),
     tailwind(),
     react(),
-    icon(),
-    partytown({
-      config: {
-        forward: ["dataLayer.push"]
+    icon({
+      include: {
+        mdi: [
+          "calendar",
+          "twitter",
+          "instagram",
+          "youtube",
+          "web",
+          "open-in-new"
+        ]
       }
-    })
+    }),
+    pagefind()
   ],
-  markdown: {
-    rehypePlugins: [rehypeExcerptContent]
+  build: {
+    format: "file"
   },
   vite: {
-    ssr: {
-      // to fix react-icons ESM import error
-      noExternal: ["react-icons"]
+    build: {
+      minify: false
     }
   }
 })

functions/api/_middleware.ts

@@ -0,0 +1,15 @@
+// validate sec-fetch header
+
+export const onRequest: PagesFunction = async (context) => {
+  const { request } = context
+  const { headers } = request
+  const secFetchMode = headers.get("sec-fetch-mode")
+  if (
+    secFetchMode !== "same-origin" &&
+    secFetchMode !== "cors" &&
+    secFetchMode !== "same-site"
+  ) {
+    return new Response("Forbidden", { status: 403 })
+  }
+  return context.next()
+}

functions/api/getAmznPa/[asin].ts

@@ -0,0 +1,57 @@
+import { AmazonItemsResponse } from "amazon-paapi"
+import { getAmazonProductInfo } from "../../src/getAmazonProductInfo"
+import { postLogToSlack } from "../../src/postLogToSlack"
+
+export const onRequestGet: PagesFunction<Env> = async (context) => {
+  const asin = context.params.asin
+  const isValidAsin = (asin: string): boolean => {
+    return /^[A-Z0-9]{10}$/.test(asin)
+  }
+  if (!asin || !isValidAsin || typeof asin !== "string") {
+    await postLogToSlack(
+      `${context.request.url} \n Invalid asin: ${asin}`,
+      context.env.SLACK_WEBHOOK_URL
+    )
+    throw new Error("asin is't valid.")
+  }
+  const { PAAPI_ACCESSKEY, PAAPI_SECRETKEY, PARTNER_TAG } = context.env
+  console.log(`Requested asin is ${asin}.`)
+
+  const kvCache: AmazonItemsResponse = await context.env.PAAPI_DATASTORE.get(
+    asin,
+    "json"
+  )
+
+  const productData = kvCache
+    ? kvCache
+    : await getAmazonProductInfo(
+        asin,
+        PAAPI_ACCESSKEY,
+        PAAPI_SECRETKEY,
+        PARTNER_TAG
+      ).catch(async (e) => {
+        await postLogToSlack(
+          `${context.request.url} \n error:${e}`,
+          context.env.SLACK_WEBHOOK_URL
+        )
+        throw new Error(e)
+      })
+
+  if (!kvCache) {
+    await context.env.PAAPI_DATASTORE.put(asin, JSON.stringify(productData), {
+      expirationTtl: 60 * 60 * 24
+    }).then(() => console.log(`write PAAPI Cache. asin: ${asin}`))
+  } else {
+    console.log(`hitted PAAPI KV cache`)
+  }
+
+  const response = new Response(JSON.stringify(productData), {
+    headers: {
+      "content-type": "application/json",
+      "cache-control": "public, max-age=86400",
+      "x-robots-tag": "noindex"
+    }
+  })
+
+  return response
+}

functions/api/getOgp.ts

@@ -0,0 +1,43 @@
+import { getOgpMetaData } from "../src/getOgpMetaData"
+import { postLogToSlack } from "../src/postLogToSlack"
+
+export const onRequestGet: PagesFunction<Env> = async (context) => {
+  const searchParams = new URL(context.request.url).searchParams
+  const url = searchParams.get("url")
+
+  const cache = await context.env.OGP_DATASTORE.get(url)
+
+  if (cache) {
+    console.log(`hitted OGP KV cache`)
+    return new Response(cache, {
+      status: 200,
+      headers: {
+        "content-type": "application/json; charset=UTF-8",
+        "X-Robots-Tag": "noindex",
+        "cache-control": "public, max-age=86400"
+      }
+    })
+  }
+
+  const body = await getOgpMetaData(url).catch(async (e) => {
+    await postLogToSlack(
+      `${context.request.url} \n error:${e}`,
+      context.env.SLACK_WEBHOOK_URL
+    )
+    throw new Error(e)
+  })
+
+  const bodyString = JSON.stringify(body)
+  await context.env.OGP_DATASTORE.put(url, bodyString, {
+    expirationTtl: 60 * 60 * 24 * 7 // 1 week
+  }).then(() => console.log(`write OGP Cache. url: ${url}`))
+
+  return new Response(bodyString, {
+    status: 200,
+    headers: {
+      "content-type": "application/json; charset=UTF-8",
+      "X-Robots-Tag": "noindex",
+      "cache-control": "public, max-age=86400"
+    }
+  })
+}