feat: cloud migration

Author: cobocho

.github/workflows/deploy.yml

@@ -30,7 +30,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - name: Install dependencies
         run: pnpm install
@@ -46,8 +46,15 @@ jobs:
           IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/blog
           IMAGE_TAG=$(date +%Y%m%d%H%M%S)
           echo "IMAGE_TAG=$IMAGE_TAG" >> $GITHUB_ENV
-          docker build -t $IMAGE_NAME:$IMAGE_TAG .
-          docker push $IMAGE_NAME:$IMAGE_TAG
+
+          printf "%s" "${{ secrets.SECRET_KEY }}" > secret_key.txt
+
+          docker buildx build \
+            --secret id=SECRET_KEY,src=secret_key.txt \
+            -t $IMAGE_NAME:$IMAGE_TAG \
+            --push .
+
+          rm -f secret_key.txt
 
       - name: Checkout GitOps repo
         uses: actions/checkout@v4
@@ -69,9 +76,9 @@ jobs:
         with:
           token: ${{ secrets.GITOPS_REPO_ACCESS }}
           path: gitops
-          commit-message: 'chore: update blog image tag to ${{ env.IMAGE_TAG }}'
+          commit-message: "chore: update blog image tag to ${{ env.IMAGE_TAG }}"
           branch: update/image-${{ env.IMAGE_TAG }}
-          title: 'Update blog image tag to ${{ env.IMAGE_TAG }}'
+          title: "Update blog image tag to ${{ env.IMAGE_TAG }}"
           body: |
             This PR updates the image tag in \`blog-deploy.yaml\` to \`${{ env.IMAGE_TAG }}\`.
 

Dockerfile

@@ -2,9 +2,7 @@ FROM node:20-alpine AS deps
 WORKDIR /app
 
 RUN corepack enable
-
 COPY package.json pnpm-lock.yaml ./
-
 RUN pnpm install --frozen-lockfile
 
 FROM node:20-alpine AS builder
@@ -17,7 +15,9 @@ ENV NEXT_TELEMETRY_DISABLED=1
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-RUN pnpm build
+RUN --mount=type=secret,id=SECRET_KEY \
+    export SECRET_KEY="$(cat /run/secrets/SECRET_KEY)" && \
+    pnpm build
 
 FROM node:20-alpine AS runner
 WORKDIR /app
@@ -34,5 +34,4 @@ COPY --from=builder /app/public ./public
 
 USER nextjs
 EXPOSE 3000
-
 CMD ["node", "server.js"]

app/api/search/route.ts

@@ -1,11 +1,78 @@
 import { NextResponse } from "next/server";
 
-import { searchPosts } from "@/apis/search";
-import { SearchResponse } from "@/interfaces/search";
+import { SearchResponse, SearchResult } from "@/interfaces/search";
+import { blogClient } from "@/lib/api-client";
 
 const MIN_QUERY_LENGTH = 1;
 const DEFAULT_LIMIT = 20;
 const MAX_LIMIT = 50;
+const DEFAULT_SNIPPET_LENGTH = 180;
+
+function toStringValue(value: unknown) {
+  return typeof value === "string" ? value : "";
+}
+
+function toNumberValue(value: unknown, fallback = 0) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function toStringArray(value: unknown) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.filter((item): item is string => typeof item === "string");
+}
+
+function getMinRead(content: string, fallback = 1) {
+  if (!content.trim()) {
+    return fallback;
+  }
+
+  const wordsPerMinute = 200;
+  const wordCount = content.trim().split(/\s+/).filter(Boolean).length;
+  return Math.max(1, Math.round(wordCount / wordsPerMinute));
+}
+
+function getSnippetFromContent(content: string, fallback: string) {
+  const baseText = content.trim() || fallback;
+  if (!baseText) {
+    return "";
+  }
+
+  return baseText.slice(0, DEFAULT_SNIPPET_LENGTH);
+}
+
+function normalizeSearchResults(rawResults: unknown[]): SearchResult[] {
+  return rawResults.map((raw, index) => {
+    const item = (raw ?? {}) as Record<string, unknown>;
+    const title = toStringValue(item.title);
+    const description = toStringValue(item.description);
+    const content = toStringValue(item.content);
+    const date =
+      toStringValue(item.date) ||
+      toStringValue(item.createdAt) ||
+      new Date().toISOString();
+
+    return {
+      id: toNumberValue(item.id, index + 1),
+      title,
+      description,
+      category: toStringValue(item.category),
+      slug: toStringValue(item.slug),
+      date,
+      minRead: toNumberValue(item.minRead, getMinRead(content)),
+      tags: toStringArray(item.tags),
+      snippet:
+        toStringValue(item.snippet) ||
+        getSnippetFromContent(content, description),
+      matchedFields: toStringArray(item.matchedFields).filter(
+        (field): field is SearchResult["matchedFields"][number] =>
+          field === "title" || field === "tags" || field === "body",
+      ),
+    };
+  });
+}
 
 function getLimit(limitQuery: string | null) {
   if (!limitQuery) {
@@ -36,10 +103,12 @@ export async function GET(request: Request) {
     return NextResponse.json(emptyResponse);
   }
 
-  const results = searchPosts(query, limit);
+  const upstream = await blogClient.search({ q: query, limit });
+  const rawResults = Array.isArray(upstream.results) ? upstream.results : [];
+  const results = normalizeSearchResults(rawResults);
   const response: SearchResponse = {
-    query,
-    total: results.length,
+    query: toStringValue(upstream.query) || query,
+    total: toNumberValue(upstream.total, results.length),
     results,
   };
 

app/api/views/route.ts

@@ -0,0 +1,15 @@
+import { blogClient } from "@/lib/api-client";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const slug = searchParams.get("slug");
+  const category = searchParams.get("category");
+
+  if (!slug || !category) {
+    return new Response("Slug and category are required", { status: 400 });
+  }
+
+  await blogClient.incrementView(category, slug);
+
+  return new Response("View incremented", { status: 200 });
+}

app/category/[slug]/_components/category-post-item.tsx

@@ -15,7 +15,7 @@ export function CategoryPostItem({
 }) {
   return (
     <motion.div
-      className="group flex cursor-pointer flex-col gap-3 rounded-xl p-3 transition-all duration-200 hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:flex-row sm:gap-5"
+      className="group flex cursor-pointer flex-col gap-3 rounded-xl p-3 transition-all duration-200 hover:bg-neutral-50 sm:flex-row sm:gap-5 dark:hover:bg-neutral-800"
       initial={{ opacity: 0, x: 20 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ delay }}
@@ -25,14 +25,15 @@ export function CategoryPostItem({
           src={post.thumbnail}
           alt={post.title}
           fill
-          blurDataURL={post.thumbnail.blurDataURL}
           className="object-cover"
-          placeholder="blur"
+          placeholder={post.thumbnailBlurDataURL ? "blur" : "empty"}
+          blurDataURL={post.thumbnailBlurDataURL}
+          unoptimized
         />
       </div>
       <div className="flex flex-1 flex-col justify-between py-1">
         <div>
-          <h3 className="mb-1 line-clamp-2 text-sm font-semibold text-neutral-800 group-hover:text-neutral-950 dark:text-neutral-200 dark:group-hover:text-neutral-50 sm:text-base">
+          <h3 className="mb-1 line-clamp-2 text-sm font-semibold text-neutral-800 group-hover:text-neutral-950 sm:text-base dark:text-neutral-200 dark:group-hover:text-neutral-50">
             {post.title}
           </h3>
           <p className="text-muted-foreground line-clamp-2 text-sm">

app/category/[slug]/page.tsx

@@ -16,24 +16,24 @@ interface CategoryPageProps {
 export const dynamicParams = false;
 export const dynamic = "force-static";
 
-export function generateStaticParams() {
-  const categories = getCategories();
+export async function generateStaticParams() {
+  const categories = await getCategories();
   return categories.map((slug) => ({ slug }));
 }
 
 export async function generateMetadata({
   params,
 }: CategoryPageProps): Promise<Metadata> {
   const { slug } = await params;
-  const categories = getCategories();
+  const categories = await getCategories();
 
   if (!categories.includes(slug)) {
     return {
       description: `${slug} Category`,
     };
   }
 
-  const postCount = getPostsByCategory(slug).length;
+  const postCount = (await getPostsByCategory(slug)).length;
   const title = `${slug}`;
   const description = `${slug} 카테고리의 게시물 수: ${postCount}개`;
 
@@ -57,13 +57,13 @@ export async function generateMetadata({
 
 export default async function CategoryPage({ params }: CategoryPageProps) {
   const { slug } = await params;
-  const categories = getCategories();
+  const categories = await getCategories();
 
   if (!categories.includes(slug)) {
     notFound();
   }
 
-  const posts = getPostsByCategory(slug);
+  const posts = await getPostsByCategory(slug);
 
   return (
     <div className="py-8 sm:py-10">

app/category/page.tsx

@@ -12,13 +12,15 @@ export const metadata: Metadata = {
   },
 };
 
-export default function CategoryIndexPage() {
-  const categories = getCategories();
+export default async function CategoryIndexPage() {
+  const categories = await getCategories();
 
-  const categorySummaries = categories.map((category) => ({
-    category,
-    count: getPostsByCategory(category).length,
-  }));
+  const categorySummaries = await Promise.all(
+    categories.map(async (category) => ({
+      category,
+      count: (await getPostsByCategory(category)).length,
+    })),
+  );
 
   return (
     <div className="py-10">

app/layout.tsx

@@ -52,7 +52,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const categories = getCategories();
+  const categories = await getCategories();
 
   return (
     <html lang="en">
@@ -66,7 +66,7 @@ export default async function RootLayout({
             </div>
             <div
               id="content-wrapper"
-              className="flex-1 overflow-x-hidden px-4 pb-24 md:pb-0 md:pl-84 lg:pr-0"
+              className="flex-1 overflow-hidden px-4 pb-24 md:pb-0 md:pl-84 lg:pr-0"
             >
               <ScrollRestoration />
               {children}

app/page.tsx

@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Home() {
-  const posts = getAllPosts();
+  const posts = await getAllPosts();
   const recentPosts = posts.slice(0, 5);
   const groupedPosts = groupBy(posts, (post) => post.category);
   const orderedByRecent = Object.entries(groupedPosts).map(

app/post/[category]/[slug]/page.tsx

@@ -27,8 +27,8 @@ const getOpenGraphImages = (thumbnailSrc?: string) => {
   return images;
 };
 
-export function generateStaticParams() {
-  const posts = getAllPosts();
+export async function generateStaticParams() {
+  const posts = await getAllPosts();
   return posts.map((post) => ({
     category: post.category,
     slug: post.slug,
@@ -39,7 +39,7 @@ export async function generateMetadata({
   params,
 }: PostPageProps): Promise<Metadata> {
   const { category, slug } = await params;
-  const categories = getCategories();
+  const categories = await getCategories();
 
   if (!categories.includes(category)) {
     return {
@@ -53,9 +53,9 @@ export async function generateMetadata({
   }
 
   try {
-    const post = getPost(category, slug, { withContent: false });
+    const post = await getPost(category, slug, { withContent: false });
     const canonical = `/post/${category}/${slug}`;
-    const images = getOpenGraphImages(post.thumbnail?.src);
+    const images = getOpenGraphImages(post.thumbnail);
 
     return {
       title: post.title,
@@ -93,14 +93,14 @@ export async function generateMetadata({
 
 export default async function PostPage({ params }: PostPageProps) {
   const { category, slug } = await params;
-  const categories = getCategories();
+  const categories = await getCategories();
 
   if (!categories.includes(category)) {
     notFound();
   }
 
-  const post = getPost(category, slug, { withContent: true });
-  const categoryPosts = getPostsByCategory(category);
+  const post = await getPost(category, slug, { withContent: true });
+  const categoryPosts = await getPostsByCategory(category);
 
   const currentIndex = categoryPosts.findIndex((p) => p.slug === slug);
   const start = Math.max(0, currentIndex - 3);