Wordpress에서 Next.js로 마이그레이션 여정

<?php
$post_id = get_the_ID();
 
if (isset($_GET['json'])) : header('Content-Type: application/json');
    echo '{"type":"article","version":"' . get_current_version() . '","bodyClass":"' . join(' ', get_body_class()) . '",';
        while (have_posts()):
            the_post();
        // ...
        echo '}';
 
    endif;
 
else : get_header(); ?>
 
    <main id="main" class="max-860">
        <?php while (have_posts()) : the_post();
        // ...
<?php endif;
    get_footer();
endif;

import {
    existsSync,
    mkdirSync,
    writeFileSync,
    createWriteStream,
} from "fs";
import { dirname } from "path";
import { JSDOM } from "jsdom";
import { NodeHtmlMarkdown } from "node-html-markdown";
import axios from "axios";
 
const DANGEROUS_TAGS = [
    "script",
    "iframe",
    "object",
    "embed",
    "form",
    "input",
    "textarea",
    "video",
    "audio",
    "style",
    "link",
    "meta",
    "noscript",
];
 
const hasDangerousTags = (html) => {
    for (const tag of DANGEROUS_TAGS) {
        if (html.includes(`<${tag}`)) {
            console.log(tag);
            return true;
        }
    }
 
    return false;
};
 
const category = "notice";
 
const response = await fetch(`https://marshallku.com/${category}?json=1`);
const {
    paging: { max },
} = await response.json();
 
if (!existsSync(`posts/${category}`)) {
    mkdirSync(`posts/${category}`);
}
 
const nhm = new NodeHtmlMarkdown();
 
const downloadFile = async (url, path) => {
    if (url.includes("lh3.googleusercontent.com")) {
        return;
    }
 
    const downloadPath = `public/images/${dirname(path)}`;
 
    if (!existsSync(downloadPath)) {
        mkdirSync(downloadPath, { recursive: true });
    }
 
    if (existsSync(`public/images/${path}`)) {
        return;
    }
 
    const response = await axios({
        url,
        method: "GET",
        responseType: "stream",
    });
    const writer = createWriteStream(`public/images/${path}`);
 
    response.data.pipe(writer);
 
    return new Promise((resolve, reject) => {
        writer.on("finish", resolve);
        writer.on("error", reject);
    });
};
 
for (let i = 1; i <= max; ++i) {
    const response = await fetch(
        `https://marshallku.com/${category}/page/${i}?json=1`
    );
    const data = await response.json();
 
    for (const post of data.list) {
        const response = await fetch(`${post.uri}?json=1`);
        const slug = decodeURIComponent(post.uri.split("/").pop());
        const data = await response.json();
 
        if (hasDangerousTags(data.body)) {
            console.log(post.uri);
        }
 
        const {
            window: { document },
        } = new JSDOM(data.body);
 
        document.querySelectorAll("code.codeblock").forEach((code) => {
            const parsed = `<pre><code>${code.innerHTML
                .replace(/<div>/g, "<span>")
                .replace(/<\/div>/g, "</span><br>")}</code></pre>`;
 
            code.outerHTML = parsed;
        });
 
        document.querySelectorAll("video").forEach((video) => {
            const src = video.getAttribute("src");
 
            if (!src.includes("marshallku.com")) {
                return;
            }
 
            downloadFile(
                src,
                src.replace("https://marshallku.com/wp-content/uploads/", "")
            );
        });
 
        document.querySelectorAll("img").forEach((img) => {
            const src = (
                img.getAttribute("data-src") || img.getAttribute("src")
            )
                .replace(/(-\d+x\d+)(\.[a-zA-Z]+)$/g, "$2")
                .replace(/=w\d+$/g, "");
 
            downloadFile(
                src,
                src.replace("https://marshallku.com/wp-content/uploads/", "")
            );
 
            img.setAttribute("src", src);
        });
 
        writeFileSync(
            `posts/${category}/${slug}.mdx`,
            `---
title: ${data.title}
description: ${data.desc.replace(/...$/g, "")}
date:
  posted: ${new Date(data.date.posted).toISOString()}${
                data.date.modified
                    ? `\n  modified: ${new Date(
                          data.date.modified
                      ).toISOString()}`
                    : ""
            }${
                data.tags.length
                    ? `\ntags:\n${data.tags
                          .map((tag) => `  - ${tag}`)
                          .join("\n")}`
                    : ""
            }
coverImage: ${data.thumbnail.src}
ogImage: ${data.thumbnail.src}
---
 
${nhm.translate(document.body.innerHTML).replace(/ /g, " ")}`,
            "utf-8"
        );
 
        downloadFile(
            data.thumbnail.src,
            data.thumbnail.src.replace(
                "https://marshallku.com/wp-content/uploads/",
                ""
            )
        );
    }
}

// 하위 폴더까지 탐색하는 함수 - 폴더 하위 폴더들이 없다면 필요 없는 함수입니다.
export function walk(dir: string, cb: (path: string) => void) {
    const files = readdirSync(dir);
 
    for (let i = 0, max = files.length; i < max; ++i) {
        const file = join(dir, files[i]);
        const stat = lstatSync(file);
 
        if (stat.isDirectory()) {
            walk(file, cb);
        } else {
            cb(file);
        }
    }
}
 
// mdx 파일 경로들을 반환하는 함수
export function getPostSlugs(subDirectory?: string) {
    const files: string[] = [];
    const fullPath = subDirectory ? join(POSTS_DIRECTORY, subDirectory) : POSTS_DIRECTORY;
 
    if (!existsSync(fullPath)) {
        return [];
    }
 
    walk(fullPath, (path) => {
        if (path.endsWith(".mdx")) {
            files.push(path);
        }
    });
 
    return files.map((file) => file.replace(POSTS_DIRECTORY, "").replace(/\.mdx$/, ""));
}
 
// mdx 파일을 파싱해서 반환하는 함수
export function getPostBySlug(slug: string): Post | undefined {
    const fullPath = join(POSTS_DIRECTORY, `${slug}.mdx`);
 
    if (!existsSync(fullPath)) {
        return;
    }
 
    const fileContents = readFileSync(fullPath, "utf8");
    const { data, content } = matter(fileContents);
 
    return {
        data: {
            title: data.title.replace(/\\/g, ""),
            // 워드프레스 쓰면서 excerpt란 표현이 항상 안 와닿았는데, 드디어 description을 쓸 수 있게 되었습니다.
            description: data.description,
            date: {
                posted: new Date(data.date.posted),
                modified: data.date.modified ? new Date(data.date.modified) : undefined,
            },
            tags: data.tags,
            coverImage: data.coverImage,
            ogImage: data.ogImage,
        },
        content,
        slug,
        category: parse(slug).dir,
    };
}
 
// 전체 글을 조회하는 함수
export function getPosts(category?: string) {
    return getPostSlugs(category)
        .map((slug) => getPostBySlug(slug)!)
        .sort((a, b) => {
            if (a.data.date.posted > b.data.date.posted) {
                return -1;
            }
 
            if (a.data.date.posted < b.data.date.posted) {
                return 1;
            }
 
            return 0;
        });
}

export async function generateStaticParams() {
    return getPostSlugs().map((slug) => ({
        category: slug.slice(1).split("/")[0],
        slug: slug.slice(1).split("/").slice(1),
    }));
}

import { MDXRemote } from "next-mdx-remote/rsc";
 
// ...
 
export default async function PostPage({ params: { category, slug } }: PostProps) {
    // ...
    return (
        <MDXRemote
            source={post.content}
            options={{
                mdxOptions: {
                    remarkPlugins: [remarkToc, remarkGfm, remarkSlug, remarkUnwrapImages],
                    rehypePlugins: [
                        rehypeAutolinkHeadings,
                        [
                            // @ts-expect-error
                            rehypePrettyCode,
                            {
                                theme: {
                                    dark: "one-dark-pro",
                                    light: "solarized-light",
                                },
                                keepBackground: true,
                            },
                        ],
                        setImageMetaData,
                        makeIframeResponsive,
                    ],
                },
            }}
            components={MDXComponents}
        />
    );
}

import { imageSize } from "image-size";
 
// ...
 
async function addImageMetaData(node: ImageNode) {
    const {
        properties: { src },
    } = node;
 
    if (isExternalImage(src)) {
        return;
    }
 
    try {
        const dimensions = imageSize(`public${decodeURIComponent(src)}`);
 
        if (dimensions) {
            node.properties.width = dimensions.width;
            node.properties.height = dimensions.height;
        }
    } catch (err) {
        console.error(`Failed to get image dimensions for ${src}`);
    }
}
 
// ...
 
export function setImageMetaData(this: Processor) {
    return async function transformer(tree: Node, _: VFile) {
        const imageNodes: ImageNode[] = [];
 
        visit(tree, "element", (node: ImageNode) => {
            if (node.type === "element" && node.tagName === "img") {
                imageNodes.push(node);
            }
        });
 
        for (const node of imageNodes) {
            await addImageMetaData(node);
        }
 
        return tree;
    };
}

export function getGroupedPostByCategory() {
    const posts = getPosts();
    const groupedPosts: Record<string, typeof posts> = {};
 
    for (let i = 0, max = posts.length; i < max; ++i) {
        const post = posts[i];
        const category = post.category.split("/")[1];
 
        if (!groupedPosts[category]) {
            groupedPosts[category] = [];
        }
 
        groupedPosts[category].push(post);
    }
 
    return groupedPosts;
}
 
export function generateStaticParams() {
    const groupedPosts = getGroupedPostByCategory();
 
    return Object.entries(groupedPosts).flatMap(([category, posts]) =>
        Array.from({ length: Math.ceil(posts.length / PAGE_SIZE) }, (_, i) => ({
            params: {
                category,
                index: `${i + 1}`,
            },
        })),
    );
}

<style dangerouslySetInnerHTML={{ __html: ".form{display:flex;max-width:700px;margin:0 auto}.form__input{width:100%;border:1px solid #aaa;border-radius:30px;outline:0;padding:.2rem .5rem}.form__submit{display:inline-block;margin-left:10px;padding:.2rem .5rem;border:none;border-radius:4px;box-shadow:#aaa 0 0 0 2px inset;flex-shrink:0;text-decoration:none;text-align:center;cursor:pointer}@media (any-hover: hover){.form__submit{transition:color .2s cubic-bezier(.39,.5,.15,1.36),box-shadow .2s cubic-bezier(.39,.5,.15,1.36)}.form__submit:hover{color:#fff;box-shadow:#aaa 0 0 0 40px inset}}.result{position:relative;display:inline-block;width:clamp(0px,100%,calc(1280px + 2rem));margin:1rem auto 0;padding:1rem;border:1px solid rgba(0,0,0,.35);text-align:center}.result__title{position:absolute;top:0;left:50%;padding:0 10px;background-color:var(--bg-color);transform:translate3d(-50%,-50%,0)}.result__thumbnail{display:flex;flex-direction:column;gap:1rem}.result__thumbnail img{max-width:100%}" }} />
<form className="form">
    <input type="text" className="form__input" name="uri" placeholder="URI of Youtube video" />
    <button type="submit" className="form__submit">Export</button>
</form>
<div className="result" style={{ display: "none" }}>
    <div className="result__title">Thumbnails</div>
    <div className="result__thumbnail"></div>
</div>
<script src="/youtube-thumbnail-extractor/v2.js" defer />

/** @type {import('next').NextConfig} */
const nextConfig = {
    async redirects() {
        return [
            {
                source: "/web/tips/:path*",
                destination: "/dev/:path*",
                permanent: true,
            },
            {
                source: "/web/log/:path*",
                destination: "/dev/:path*",
                permanent: true,
            },
            {
                source: "/web/:path*",
                destination: "/dev/:path*",
                permanent: true,
            },
            {
                source: "/rss",
                destination: "/feed.xml",
                permanent: true,
            },
        ];
    },
};

server {
    # ...
 
    if ($request_uri ~* "/minecraft/(.*)") {
        return 301 https://mc.marshallku.com/$1;
    }
}

new Response(
    `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
>
<channel>
<title>${SITE_NAME}</title>
<description>${SITE_DESCRIPTION}</description>
<language>ko-KR</language>
<atom:link href="${host}/feed" rel="self" type="application/rss+xml" />
<link>${host}</link>
<lastBuildDate>${lastBuildDate}</lastBuildDate>
<sy:updatePeriod>hourly</sy:updatePeriod>
<sy:updateFrequency>1</sy:updateFrequency>
${formattedPosts
.map(
    ({ title, link, pubDate, category, tags, description, content }) => `    <item>
    <title>${title}</title>
    <link>${link}</link>
    <dc:creator><![CDATA[Marshall K]]></dc:creator>
    <pubDate>${pubDate}</pubDate>
    <category><![CDATA[${category}]]></category>${
        tags ? `\n${tags.map((tag) => `        <category><![CDATA[${tag}]]></category>`).join("\n")}` : ""
    }
    <guid isPermaLink="false">${link}</guid>
    <description><![CDATA[${description}]]></description>
    <content:encoded><![CDATA[${content}]]></content:encoded>
</item>`,
)
.join("\n")}
</channel>
</rss>
`,
    {
        headers: {
            "Content-Type": "application/rss+xml; charset=UTF-8",
        },
    },
);

const renderer = new marked.Renderer();
 
renderer.link = (href, title, text) => {
    return `<a href="${href}" title="${title}" target="_blank" rel="noopener noreferrer">${text}</a>`;
};
 
marked.setOptions({
    gfm: true,
    breaks: true,
    renderer,
});

server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name marshallku.com www.marshallku.com;
 
        # ...
 
        location / {
            #try_files $uri $uri/ /index.php?$args;
            #index index.php;
 
            proxy_http_version 1.1;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_pass http://0.0.0.0:4200;
        }
 
        # ...
 
        location ~* \.(png|jpg|jpeg|gif|ico|svg|ttf|woff|woff2|webm|mp4|mp3|eot|otf|json)$ {
            expires 1y;
            etag off;
            add_header Cache-Control "public, no-transform";
        }
}

from flask import Flask, request, send_from_directory, abort
import requests
from PIL import Image
import os
import re
import magic
 
app = Flask(__name__)
 
CDN_ROOT = "cdn_root"
ORIGINAL_SERVER = "https://marshallku.com"
 
 
@app.route('/files/<path:filename>')
def serve_static_file(filename):
    # Validate file extension
    if not filename.endswith(('css', 'js', 'ico', 'json', 'woff2', 'woff', 'svg', 'ico')):
        abort(404)
 
    file_path = os.path.join(CDN_ROOT, 'files', filename)
    if not os.path.exists(file_path):
        # Fetch file from original server
        response = requests.get(f"{ORIGINAL_SERVER}/{filename}")
        if response.status_code == 200:
            os.makedirs(os.path.dirname(file_path), exist_ok=True)
            with open(file_path, 'wb') as f:
                f.write(response.content)
        else:
            abort(404)
 
    return send_from_directory(os.path.dirname(file_path), os.path.basename(file_path))
 
 
@app.route('/images/<path:filename>')
def serve_image(filename):
    if os.path.exists(os.path.join(CDN_ROOT, 'images', filename)):
        print("CACHE HIT!")
        return send_from_directory(os.path.join(CDN_ROOT, 'images'), filename)
 
    original_filename = filename
    resize_width = re.search(r'=w(\d+)$', filename)
    width = 0
 
    if resize_width:
        original_filename = original_filename.replace(resize_width.group(), '')
        width = resize_width.group(1)
 
    convert_to_webp = original_filename.endswith('.webp')
 
    if convert_to_webp:
        original_filename = original_filename.replace('.webp', '')
 
    file_path = os.path.join(CDN_ROOT, 'images', filename)
    original_file_path = os.path.join(CDN_ROOT, 'images', original_filename)
    if not os.path.exists(original_file_path):
        # Fetch image from original server
        response = requests.get(f"{ORIGINAL_SERVER}/{original_filename}")
        if response.status_code == 200:
            os.makedirs(os.path.dirname(original_file_path), exist_ok=True)
            with open(original_file_path, 'wb') as f:
                f.write(response.content)
        else:
            abort(404)
 
    if width or convert_to_webp:
        img = Image.open(original_file_path)
        if width:
            mime_magic = magic.Magic(mime=True)
            mimetype = mime_magic.from_file(original_file_path)
 
            w_percent = (int(width)/float(img.size[0]))
            h_size = int((float(img.size[1])*float(w_percent)))
            img = img.resize((int(width), h_size), Image.ANTIALIAS)
            img.save(file_path, mimetype.split('/')[1], quality=90)
            return send_from_directory(os.path.dirname(file_path), os.path.basename(file_path), mimetype=mimetype)
        if convert_to_webp:
            img.save(file_path, 'WEBP', quality=90)
            return send_from_directory(os.path.dirname(file_path), os.path.basename(file_path), mimetype='image/webp')
 
    return send_from_directory(os.path.dirname(original_file_path), os.path.basename(original_file_path))
 
 
if __name__ == '__main__':
    app.run(port=41890)

server {
    # ...
    location /files/ {
        try_files $uri /cdn_root/files/$uri @backend;
    }
 
    location /images/ {
        try_files $uri /cdn_root/images/$uri @backend;
    }
 
    location @backend {
        proxy_pass http://localhost:4200;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

FROM python:3.10-slim as base
 
WORKDIR /app
 
RUN apt-get update && apt-get install -y magic libmagic-dev
 
COPY requirements.txt /app/requirements.txt
 
RUN pip install --no-cache-dir -r requirements.txt
RUN pip install gunicorn
 
FROM base as runner
 
COPY ./app.py /app/app.py
 
EXPOSE 41890
 
CMD ["gunicorn", "-b", "0.0.0.0:41890", "app:app"]

interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
    forceSize?: number;
}
 
const IMAGE_SIZE = [480, 600, 860, 1180];
 
function Image({ src, alt, width, height, forceSize, ...rest }: ImageProps) {
    return (
        <img
            src={`${process.env.NEXT_PUBLIC_CDN_URL}${src}${
                forceSize && process.env.NEXT_PUBLIC_CDN_URL !== "" ? `=w${forceSize}` : ""
            }`}
            srcSet={
                width && height && process.env.NEXT_PUBLIC_CDN_URL !== ""
                    ? IMAGE_SIZE.filter((size) => size < Number(width))
                          .map((size) => `${process.env.NEXT_PUBLIC_CDN_URL}${src}=w${size} ${size}w`)
                          .join(", ")
                    : undefined
            }
            alt={alt || ""}
            width={width}
            height={height}
            loading="lazy"
            {...rest}
        />
    );
}

function simplifyAspectRatio(width: number, height: number): { width: number; height: number } {
    const gcd = (a: number, b: number): number => (b === 0 ? a : gcd(b, a % b));
    const factor = gcd(width, height);
    return {
        width: width / factor,
        height: height / factor,
    };
}
 
export function makeIframeResponsive(this: Processor) {
    return async function transformer(tree: Node, _: VFile) {
        visit(tree, "mdxJsxFlowElement", (node: IframeNode, index, parent: Parent) => {
            if (node.name !== "iframe") {
                return;
            }
 
            const width = Number(node.attributes.find((attr) => attr.name === "width")?.value || 0);
            const height = Number(node.attributes.find((attr) => attr.name === "height")?.value || 0);
            let className = "iframe-container";
 
            if (width && height) {
                const ratio = simplifyAspectRatio(width, height);
                className += ` iframe-container--ratio-${ratio.width}-${ratio.height}`;
            }
 
            const wrapperNode = {
                type: "mdxJsxFlowElement",
                name: "div",
                attributes: [{ type: "mdxJsxAttribute", name: "className", value: className }],
                children: [] as IframeNode[],
            };
 
            if (parent && Array.isArray(parent.children)) {
                parent.children.splice(index, 1, wrapperNode);
                wrapperNode.children.push(node);
            }
        });
    };
}

{
    "index": 2,
    "hidden": false,
    "name": "잡담",
    "icon": "chat-bubble",
    "color": "#ffdb4d"
}