library version updates

updated pnpm version
added dockerignore
revert the standalone output

.dockerignore

@@ -0,0 +1,5 @@
+**/node_modules
+.git
+.gitignore
+.local
+.env*

.gitignore

@@ -5,6 +5,8 @@
 /.pnp
 .pnp.js
 
+/.local/
+
 # testing
 /coverage
 
@@ -25,7 +27,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*
+.env.development
 
 # vercel
 .vercel

.idea/dataSources.local.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="dataSourceStorageLocal" created-in="WS-241.15989.105">
+    <data-source name="devblog@mysql-server" uuid="32913bc6-cafd-416c-b070-eee7c73cf755">
+      <database-info product="MySQL" version="8.3.0" jdbc-version="4.2" driver-name="MySQL Connector/J" driver-version="mysql-connector-java-8.0.25 (Revision: 08be9e9b4cba6aa115f9b27b215887af40b159e0)" dbms="MYSQL" exact-version="8.3.0" exact-driver-version="8.0">
+        <extra-name-characters>#@</extra-name-characters>
+        <identifier-quote-string>`</identifier-quote-string>
+      </database-info>
+      <case-sensitivity plain-identifiers="exact" quoted-identifiers="exact" />
+      <secret-storage>master_key</secret-storage>
+      <user-name>devblog</user-name>
+      <schema-mapping>
+        <introspection-scope>
+          <node kind="schema">
+            <name qname="@" />
+            <name qname="devblog" />
+          </node>
+        </introspection-scope>
+      </schema-mapping>
+      <ssl-config use-ide-store="true" use-java-store="true" use-system-store="true">
+        <ca-cert>$USER_HOME$/Documents/db-ssl/ca.crt</ca-cert>
+        <client-cert>$USER_HOME$/Documents/db-ssl/mbp.crt</client-cert>
+        <client-key>$USER_HOME$/Documents/db-ssl/mbp.key</client-key>
+        <enabled>true</enabled>
+        <mode>VERIFY_FULL</mode>
+      </ssl-config>
+    </data-source>
+  </component>
+</project>

.idea/dataSources.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="devblog@mysql-server" uuid="32913bc6-cafd-416c-b070-eee7c73cf755">
+      <driver-ref>mysql.8</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
+      <jdbc-url>jdbc:mysql://mysql-server.suyono.dev:13306/devblog</jdbc-url>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>

.idea/sqldialects.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SqlDialectMappings">
+    <file url="PROJECT" dialect="MySQL" />
+  </component>
+</project>

.tool-versions

@@ -0,0 +1,2 @@
+nodejs 20.12.2
+pnpm 9.0.6

Dockerfile

@@ -0,0 +1,37 @@
+FROM node:lts-alpine as base
+
+FROM base as builder
+USER 1000:1000
+ADD --chown=1000:1000 . /home/node/nextts
+WORKDIR /home/node/nextts
+RUN wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION="8.15.3" ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
+ENV PATH=/home/node/.local/share/pnpm:$PATH
+RUN pnpm install && pnpm run build
+
+FROM base as runtime
+
+RUN npm install -g pm2
+
+
+COPY --from=builder /home/node/nextts/public /home/node/nextts/public
+COPY --from=builder /home/node/nextts/.next/standalone /home/node/nextts
+COPY --from=builder /home/node/nextts/.next/static /home/node/nextts/.next/static
+ADD --chown=1000:1000 pm2.config.js /home/node/nextts/
+ADD --chown=1000:1000 dummies /home/node/nextts/dummies
+
+RUN chown -R 1000:1000 /home/node/nextts
+
+USER 1000:1000
+WORKDIR /home/node/nextts
+
+ENV PORT 3000
+ENV NODE_ENV production
+ENV HOME /home/node
+ENV HOSTNAME "0.0.0.0"
+
+RUN wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION="8.15.3" ENV="/home/node/.shrc" SHELL="$(which sh)" sh -
+ENV PATH=/home/node/.local/share/pnpm:$PATH
+RUN pnpm install
+
+CMD ["pm2-runtime", "pm2.config.js"]
+#CMD ["node", "server.js"]

app/dbcheck/page.tsx

@@ -1,9 +1,9 @@
-import { promisePool } from "@/backend/db";
+import { getPromisePool } from "@/backend/db";
 import {RowDataPacket} from "mysql2";
 
 async function query() {
     try {
-        const [rows, fields] = await promisePool.query<RowDataPacket[]>('select slug from post limit 1;')
+        const [rows, fields] = await getPromisePool().query<RowDataPacket[]>('select slug from post limit 1;')
         return(rows[0]['slug'] as string)
     } catch (e) {
         console.log(e)
@@ -11,11 +11,18 @@ async function query() {
     }
 }
 
-export default async function DbCheck() {
+export default async function DbCheck({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined }}) {
+    let flag = "empty";
+
+    if (typeof searchParams["flag"] === 'string') {
+        flag = searchParams["flag"]
+    }
+
     return(
         <div className={`flex flex-col`}>
             <p>Env: { process.env.MYSQL_HOST }</p>
             <p>Result: { await query() }</p>
+            <p>Flag: { flag }</p>
         </div>
     )
 }

app/page.tsx

@@ -4,66 +4,73 @@ import { raleway, syne, questrial } from "@/app/fonts";
 
 export default function Home() {
   return (
-    <div className={`flex flex-col`}>
-      <div className={`bg-cover bg-center flex flex-col-reverse bg-blog-cover`}>
-        <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10`}>
-          <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
-            SUYONO
-          </p>
-          <p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
-            A Tech Archive
-          </p>
-        </div>
-        <div className={`h-64`}></div> {/* spacer */}
-        <div className={`h-64`}></div> {/* spacer */}
-      </div>
-      <div className={`flex flex-row justify-center my-8`}>
-        <div className={`border border-slate-100 flex flex-col`}>
-          <Link
-            href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
-            className={`flex flex-row max-w-4xl items-center`}
-          >
-            <Image
-              src="/assets/pthumb.webp"
-              alt="post thumbnail"
-              width={454}
-              height={341}
-            />
-            <div className={`flex flex-col mx-10`}>
-              <p className={`${syne.className} text-2xl`}>
-                Nginx + SSL Client Certificate Verification: Manage Access to a
-                site
+      <div className={`flex flex-col`}>
+        <div className={`grid grid-rows-1 grid-cols-1 justify-items-center`}>
+          <Image
+              src={`https://assets.suyono.me/placeholder.webp`}
+              alt={`blog cover`}
+              className={`object-cover col-start-1 row-start-1 w-screen h-192 z-0`}
+              width={1581}
+              height={759}
+          />
+          <div className={`flex flex-col-reverse col-start-1 row-start-1 w-screen`}>
+            <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10 z-10`}>
+              <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
+                SUYONO
               </p>
-              <p className={`${questrial.className} line-clamp-3 mt-4`}>
-                Access control is a fundamental part of security. Most entities
-                rely on the combination of username and password, sometimes with
-                additional multi-factor authentication to improve security. Some
-                entities also use the SSL client certificate verification to
-                manage access to specific resources. One of the use cases where
-                SSL client certificate verification fits perfectly is managing
-                access to internet-facing development or staging servers. In
-                this post, I&apos;ll share how to set up the certificates and
-                configure nginx to verify users based on their certificates.
+              <p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
+                A Tech Archive
               </p>
             </div>
-          </Link>
+          </div>
+        </div>
+        <div className={`flex flex-row justify-center my-8`}>
+          <div className={`border border-slate-100 flex flex-col`}>
+            <Link
+                href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
+                className={`flex flex-row max-w-4xl items-center`}
+            >
+              <Image
+                  src="https://assets.suyono.me/pthumb.webp"
+                  alt="post thumbnail"
+                  width={454}
+                  height={341}
+              />
+              <div className={`flex flex-col mx-10`}>
+                <p className={`${syne.className} text-2xl`}>
+                  Nginx + SSL Client Certificate Verification: Manage Access to a
+                  site
+                </p>
+                <p className={`${questrial.className} line-clamp-3 mt-4`}>
+                  Access control is a fundamental part of security. Most entities
+                  rely on the combination of username and password, sometimes with
+                  additional multi-factor authentication to improve security. Some
+                  entities also use the SSL client certificate verification to
+                  manage access to specific resources. One of the use cases where
+                  SSL client certificate verification fits perfectly is managing
+                  access to internet-facing development or staging servers. In
+                  this post, I&apos;ll share how to set up the certificates and
+                  configure nginx to verify users based on their certificates.
+                </p>
+              </div>
+            </Link>
+          </div>
+        </div>
+        <div className={`flex flex-row bg-teal-50 justify-center`}>
+          <div className={`max-w-4xl py-28 px-10`}>
+            <p className={`text-3xl ${raleway.className}`}>Hi There</p>
+            <p className={`text-base ${raleway.className} my-4`}>
+              a new take on experience is the best teacher
+            </p>
+            <p className={`${raleway.className} text-sm`}>
+              I started this blog as an archive of my experiences and knowledge.
+              By writing them out, I hope it will help me unlearn and relearn the
+              various knowledge and skills I&apos;ve accumulated. I hope the
+              articles, source code examples, and server config examples I wrote
+              will help you somehow. Read on and enjoy!
+            </p>
+          </div>
         </div>
       </div>
-      <div className={`flex flex-row bg-teal-50 justify-center`}>
-        <div className={`max-w-4xl py-28 px-10`}>
-          <p className={`text-3xl ${raleway.className}`}>Hi There</p>
-          <p className={`text-base ${raleway.className} my-4`}>
-            a new take on experience is the best teacher
-          </p>
-          <p className={`${raleway.className} text-sm`}>
-            I started this blog as an archive of my experiences and knowledge.
-            By writing them out, I hope it will help me unlearn and relearn the
-            various knowledge and skills I&apos;ve accumulated. I hope the
-            articles, source code examples, and server config examples I wrote
-            will help you somehow. Read on and enjoy!
-          </p>
-        </div>
-      </div>
-    </div>
   );
 }

app/post/[slug]/nodeHandler.tsx

@@ -0,0 +1,109 @@
+import {ReactElement} from "react";
+import {domToReact, Element} from "html-react-parser";
+import {nunito_sans, raleway} from "@/app/fonts";
+import {Code} from "bright";
+import {mark} from "@/bright-extension/mark";
+
+export type nodeHandlerResult = {match :boolean, element? :ReactElement}
+export type nodeHandler = (node :Element) => nodeHandlerResult
+
+function h1(node: Element): nodeHandlerResult {
+    if (node.name === "h1") {
+        if (node.attribs.class === "title") {
+            return {
+                match: true,
+                element: (
+                    <h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>
+                        {domToReact(node.children)}
+                    </h1>
+                ),
+            };
+        }
+        return {
+            match: true,
+            element: (
+                <h1 className={`${raleway.className} mx-auto w-224 text-3xl`}>
+                    {domToReact(node.children)}
+                </h1>
+            ),
+        };
+    }
+
+    return { match: false};
+}
+
+function h2(node: Element): nodeHandlerResult {
+    if (node.name === "h2") {
+        return {
+          match: true,
+          element: (
+              <h1 className={`${raleway.className} mx-auto w-224 text-2xl`}>
+                  {domToReact(node.children)}
+              </h1>
+          )
+        };
+    }
+
+    return {match: false};
+}
+
+function h3(node: Element): nodeHandlerResult {
+    if (node.name === "h3") {
+        return {
+            match: true,
+            element: (
+                <h1 className={`${raleway.className} mx-auto w-224 text-xl`}>
+                    {domToReact(node.children)}
+                </h1>
+            )
+        };
+    }
+    return {match: false};
+}
+
+function code(node: Element): nodeHandlerResult {
+    if (node.name === "code") {
+        let linenumber = false;
+        if ("class" in node.attribs) {
+            const classes = node.attribs.class.split(" ");
+            if (classes.includes("linenumber")) {
+                linenumber = true;
+            }
+        }
+
+        return {
+            match: true,
+            element: (
+                <div className={`w-224 mx-auto`}>
+                    <Code
+                        lang={`${node.attribs.lang}`}
+                        lineNumbers={linenumber}
+                        extensions={[mark]}
+                    >
+                        {domToReact(node.children)}
+                    </Code>
+                </div>
+            )
+        };
+    }
+
+    return {match: false};
+}
+
+function p(node: Element): nodeHandlerResult {
+    if (node.name === "p") {
+        if (node.attribs.class === "paragraph") {
+            return {
+                match: true,
+                element: (
+                    <h1 className={`${nunito_sans.className} mx-auto w-224`}>
+                        {domToReact(node.children)}
+                    </h1>
+                )
+            };
+        }
+    }
+    return {match: false};
+}
+
+export const handlers: nodeHandler[] = [h1, h2, h3, code, p];

app/post/[slug]/page.tsx

@@ -1,62 +1,21 @@
 import { getPost } from "@/backend/post";
 import DOMPurify from "dompurify";
 import { JSDOM } from "jsdom";
-import { nunito_sans, raleway } from "@/app/fonts";
 import parse, {
-  domToReact,
   Element,
+  // domToReact,
   HTMLReactParserOptions,
 } from "html-react-parser";
 import { DummyPostSlug, DummyPostString } from "@/components/dummyPost";
+import { handlers } from "@/app/post/[slug]/nodeHandler";
 
 const options: HTMLReactParserOptions = {
   replace: (domNode) => {
-    if (domNode instanceof Element && domNode.attribs) {
-      // console.log(domNode.attribs)
-      if (domNode.name === "h1") {
-        if (domNode.attribs.class === "title") {
-          return (
-            <h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>
-              {domToReact(domNode.children)}
-            </h1>
-          );
-        } else {
-          return (
-              <h1 className={`${raleway.className} mx-auto w-224 text-3xl`}>
-                  {domToReact(domNode.children)}
-              </h1>
-          );
-        }
-      } else if (domNode.name === "h2") {
-        return (
-            <h1 className={`${raleway.className} mx-auto w-224 text-2xl`}>
-                {domToReact(domNode.children)}
-            </h1>
-        );
-      } else if (domNode.name === "h3") {
-        return (
-            <h1 className={`${raleway.className} mx-auto w-224 text-xl`}>
-                {domToReact(domNode.children)}
-            </h1>
-        );
-      } else if (domNode.name === "p") {
-        if (domNode.attribs.class === "paragraph") {
-          return (
-              <h1 className={`${nunito_sans.className} mx-auto w-224`}>
-                  {domToReact(domNode.children)}
-              </h1>
-          );
-        } else {
-          const classes = domNode.attribs.class.split(" ");
-          if (classes.includes("code")) {
-              if (classes.includes("shell")) {
-
-              } else if (classes.includes("go") || classes.includes("golang")) {
-
-              } else {
-
-              }
-          }
+    for (let handler of handlers) {
+      if (domNode instanceof Element && domNode.attribs) {
+        let result = handler(domNode)
+        if (result.match && typeof result.element !== 'undefined') {
+          return result.element
         }
       }
     }
@@ -64,12 +23,12 @@ const options: HTMLReactParserOptions = {
 };
 
 export default async function Post({ params }: { params: { slug: string } }) {
-  let content = "";
+  let content;
 
   const dummySlug = await DummyPostSlug();
   if (dummySlug === params.slug) {
     content = await DummyPostString();
-    console.log(content);
+    // console.log(content);
   } else {
     content = await getPost(params.slug);
   }
@@ -78,5 +37,9 @@ export default async function Post({ params }: { params: { slug: string } }) {
   // console.log(content)
   const elem = parse(content, options);
 
-  return <div className={`flex flex-col`}>{elem}</div>;
+  return (
+  <div className={`flex flex-col`}>
+    {elem}
+  </div>
+  );
 }

backend/db.ts

@@ -1,20 +1,42 @@
-import mysql, { PoolOptions } from "mysql2";
+import mysql, { PoolOptions, Pool } from "mysql2";
+import { Pool as pPool } from "mysql2/promise"
+import * as fs from 'fs';
+import * as appEnv from "./env";
 
-const access: PoolOptions = {
-    host: process.env.MYSQL_HOST,
-    port: 'MYSQL_PORT' in process.env && typeof process.env.MYSQL_PORT === 'string' ? parseInt(process.env.MYSQL_PORT) : 3306,
-    user: process.env.MYSQL_USER,
-    password: process.env.MYSQL_PASSWORD,
-    database: 'MYSQL_DATABASE' in process.env ? process.env.MYSQL_DATABASE : 'blog',
-    waitForConnections: true,
-    connectionLimit: 10,
-    maxIdle: 10,
-    idleTimeout: 60000,
-    queueLimit: 0,
-    enableKeepAlive: true,
-    keepAliveInitialDelay: 0,
+let pool: Pool | undefined;
+let promisePool: pPool | undefined;
+
+export function getPool(): Pool {
+    const access: PoolOptions = {
+        host: appEnv.getMysqlHost(),
+        port: appEnv.getMysqlPort(),
+        user: appEnv.getMysqlUser(),
+        password: appEnv.getMysqlPassword(),
+        database: appEnv.getMysqlDatabase(),
+        waitForConnections: true,
+        connectionLimit: 10,
+        maxIdle: 10,
+        idleTimeout: 60000,
+        queueLimit: 0,
+        enableKeepAlive: true,
+        keepAliveInitialDelay: 0,
+        ssl: {
+            ca: fs.readFileSync(appEnv.getMysqlSslCaFile()),
+            key: fs.readFileSync(appEnv.getMysqlSslKeyFile()),
+            cert: fs.readFileSync(appEnv.getMysqlSslCertFile())
+        }
+    }
+
+    if (typeof pool === 'undefined') {
+        pool = mysql.createPool(access)
+    }
+
+    return pool
 }
 
-export const pool = mysql.createPool(access)
-
-export const promisePool = pool.promise()
+export function getPromisePool(): pPool {
+    if (typeof promisePool === 'undefined') {
+        promisePool = getPool().promise()
+    }
+    return promisePool
+}

backend/env.ts

@@ -0,0 +1,63 @@
+export function getMysqlHost(): string {
+    if (typeof process.env.MYSQL_HOST === 'undefined') {
+        throw new Error("missing env MYSQL_HOST")
+    }
+
+    return process.env.MYSQL_HOST
+}
+
+export function getMysqlPort(): number {
+    if (typeof process.env.MYSQL_PORT === 'undefined') {
+        throw new Error("missing env MYSQL_PORT")
+    }
+
+    return parseInt(process.env.MYSQL_PORT)
+}
+
+export function getMysqlUser(): string {
+    if (typeof process.env.MYSQL_USER === 'undefined') {
+        throw new Error("missing env MYSQL_USER")
+    }
+
+    return process.env.MYSQL_USER
+}
+
+export function getMysqlPassword(): string {
+    if (typeof process.env.MYSQL_PASSWORD === 'undefined') {
+        throw new Error("missing env MYSQL_PASSWORD")
+    }
+
+    return process.env.MYSQL_PASSWORD
+}
+
+export function getMysqlDatabase(): string {
+    if (typeof process.env.MYSQL_DATABASE === 'undefined') {
+        throw new Error("missing env MYSQL_DATABASE")
+    }
+
+    return process.env.MYSQL_DATABASE
+}
+
+export function getMysqlSslCaFile(): string {
+    if (typeof process.env.MYSQL_SSL_CA === 'undefined') {
+        throw new Error("missing env MYSQL_SSL_CA")
+    }
+
+    return process.env.MYSQL_SSL_CA
+}
+
+export function getMysqlSslCertFile(): string {
+    if (typeof process.env.MYSQL_SSL_CERT === 'undefined') {
+        throw new Error("missing env MYSQL_SSL_CERT")
+    }
+
+    return process.env.MYSQL_SSL_CERT
+}
+
+export function getMysqlSslKeyFile(): string {
+    if (typeof process.env.MYSQL_SSL_KEY === 'undefined') {
+        throw new Error("missing env MYSQL_SSL_KEY")
+    }
+
+    return process.env.MYSQL_SSL_KEY
+}

backend/post.ts

@@ -1,9 +1,9 @@
 import { RowDataPacket } from "mysql2";
-import { promisePool } from "@/backend/db";
+import { getPromisePool } from "@/backend/db";
 
 export async function getPost(slug: string): Promise<string> {
     try {
-        const [rows, fields] = await promisePool.query<RowDataPacket[]>(
+        const [rows, fields] = await getPromisePool().query<RowDataPacket[]>(
             'select content from post where slug = ?', [slug])
         return rows[0]['content']
     } catch (e) {

bright-extension/lineNumbers.tsx

@@ -0,0 +1,11 @@
+import { Extension } from 'bright';
+
+export const lineNumbers :Extension = {
+    name: "lineNumbers",
+    beforeHighlight: (props, annotations) => {
+        console.log(annotations);
+        if (annotations.length > 0 ) {
+            return { ...props, lineNumbers: true }
+        }
+    }
+}

bright-extension/mark.tsx

@@ -0,0 +1,15 @@
+import { Extension } from "bright";
+
+export const mark: Extension = {
+  name: "mark",
+  InlineAnnotation: ({ children, query }) => {
+    return (
+        <mark style={{ background: query }}>{children}</mark>
+    )
+  },
+  MultilineAnnotation: ({ children, query }) => {
+    return (
+        <div style={{ background: query }}>{children}</div>
+    )
+  },
+};

components/dummyPost.tsx

@@ -1,78 +1,13 @@
+import { promises as fsp } from 'fs'
+
 export async function DummyPostString() {
-    const ReactDOMServer = (await import('react-dom/server')).default
-    const component = await DummyPost()
-    return ReactDOMServer.renderToStaticMarkup(component)
+    let path = ""
+    if ('DUMMY_HTML_DIR' in process.env && typeof process.env.DUMMY_HTML_DIR === "string") {
+        path = process.env.DUMMY_HTML_DIR + "test1.html";
+    }
+    return await fsp.readFile(path, "utf-8")
 }
 
 export async function DummyPostSlug() {
     return "dummy-post"
-}
-
-export async function DummyPost() {
-    return(
-        <div>
-            <h1 className="title">Nginx + SSL Client Certificate Verification: Manage access to a site</h1>
-            <p className="paragraph">Access control is a fundamental part of security. Most entities rely on
-                the combination of username and password, sometimes with additional multi-factor authentication
-                to improve security. Some entities also use the SSL client certificate verification to manage access
-                to specific resources. One of the use cases where SSL client certificate verification fits perfectly is
-                managing access to internet-facing development or staging servers. In this post, I&apos;ll share how
-                to set up the certificates and configure nginx to verify users based on their certificates.</p>
-            <h1>Preparing the certificates</h1>
-            <p className="paragraph">There are two certificates we are going to create. The first one is the root
-                certificate. It will be placed in the Nginx server. The second one is the client certificate. It will
-                be installed in the client machine/browsers.</p>
-            <h2>Root CA</h2>
-            <p className="paragraph">For generating a root CA, execute these two steps:</p>
-            <h3>Generate RSA Key</h3>
-            <p className="code">openssl genrsa -aes256 -out ca.key 4096</p>
-            <h3>Create Root CA crt file.</h3>
-            <p className="code">openssl req -new -x509 -days 3650 -key ca.key -out ca.crt</p>
-            <h2>Setup CA configuration</h2>
-            <p className="paragraph">This is an optional step, but if you want to be able to revoke access you
-                previously granted, you need to do this step.</p>
-            <p className="paragraph">Create a file named ca.cnf in the same directory as the ca.key and ca.crt.</p>
-            <p className="code">[ ca ]
-                default_ca = gca
-
-                [ crl_ext ]
-                authorityKeyIdentifier=keyid:always
-
-                [ gca ]
-                dir = ./
-                new_certs_dir = $dir
-                unique_subject = no
-                certificate = $dir/ca.crt
-                database = $dir/certindex
-                private_key = $dir/ca.key
-                serial = $dir/certserial
-                default_days = 365
-                default_md = sha256
-                policy = gca_policy
-                x509_extensions = gca_extensions
-                crlnumber = $dir/crlnumber
-                default_crl_days = 365
-
-                [ gca_policy ]
-                commonName = supplied
-                stateOrProvinceName = supplied
-                countryName = optional
-                emailAddress = optional
-                organizationName = supplied
-                organizationUnitName = optional
-
-                [ gca_extensions ]
-                basicConstraints = CA:false
-                subjectKeyIdentifier = hash
-                authorityKeyIdentifier = keyid:always
-                keyUsage = digitalSignature,keyEncipherment
-                extendedKeyUsage = serverAuth
-                crlDistributionPoints = URI:http://example.com/root.crl
-                subjectAltName = @alt_names
-
-                [ alt_names ]
-                DNS.1 = example.com
-                DNS.2 = *.example.com</p>
-        </div>
-    )
 }

dummies/test1.html

@@ -0,0 +1,130 @@
+<h1 class="title">Nginx + SSL Client Certificate Verification: Manage access to a site</h1>
+<p class="paragraph">Access control is a fundamental part of security. Most entities rely on
+    the combination of username and password, sometimes with additional multi-factor authentication
+    to improve security. Some entities also use the SSL client certificate verification to manage access
+    to specific resources. One of the use cases where SSL client certificate verification fits perfectly is
+    managing access to internet-facing development or staging servers. In this post, I&apos;ll share how
+    to set up the certificates and configure nginx to verify users based on their certificates.</p>
+<h1>Preparing the certificates</h1>
+<p class="paragraph">There are two certificates we are going to create. The first one is the root
+    certificate. It will be placed in the Nginx server. The second one is the client certificate. It will
+    be installed in the client machine/browsers.</p>
+<h2>Root CA</h2>
+<p class="paragraph">For generating a root CA, execute these two steps:</p>
+<h3>Generate RSA Key</h3>
+<code lang="shell">openssl genrsa -aes256 -out ca.key 4096</code>
+<h3>Create Root CA crt file.</h3>
+<code lang="shell">openssl req -new -x509 -days 3650 -key ca.key -out ca.crt</code>
+<h2>Setup CA configuration</h2>
+<p class="paragraph">This is an optional step, but if you want to be able to revoke access you
+    previously granted, you need to do this step.</p>
+<p class="paragraph">Create a file named ca.cnf in the same directory as the ca.key and ca.crt.</p>
+<code lang="ini" class="linenumber">[ ca ]
+default_ca = gca
+
+[ crl_ext ]
+authorityKeyIdentifier=keyid:always
+
+[ gca ]
+dir = ./
+new_certs_dir = $dir
+unique_subject = no
+certificate = $dir/ca.crt
+database = $dir/certindex
+; mark(1[9:11]) dimgrey
+private_key = $dir/ca.key
+serial = $dir/certserial
+default_days = 365
+default_md = sha256
+policy = gca_policy
+x509_extensions = gca_extensions
+crlnumber = $dir/crlnumber
+default_crl_days = 365
+
+[ gca_policy ]
+commonName = supplied
+stateOrProvinceName = supplied
+countryName = optional
+emailAddress = optional
+organizationName = supplied
+organizationUnitName = optional
+
+[ gca_extensions ]
+basicConstraints = CA:false
+subjectKeyIdentifier = hash
+authorityKeyIdentifier = keyid:always
+keyUsage = digitalSignature,keyEncipherment
+extendedKeyUsage = serverAuth
+crlDistributionPoints = URI:http://example.com/root.crl
+subjectAltName = @alt_names
+
+[ alt_names ]
+DNS.1 = example.com
+DNS.2 = *.example.com</code>
+<p class="paragraph">Initialize an empty file for the CA database.</p>
+<code lang="shell">touch certindex</code>
+<p class="paragraph">Initialize value for certserial and crlnumber</p>
+<code lang="shell">echo 01 > certserial
+echo 01 > crlnumber</code>
+<h2>User Certificates</h2>
+<h3>Generate the user RSA key.</h3>
+<code lang="shell">openssl genrsa -aes256 -out client01/user.key 4096</code>
+<h3>Create Certificate-Signing Request (CSR)</h3>
+<code lang="shell">openssl req -new -key client01/user.key -out client01/user.csr</code>
+<h3>Sign the CSR.</h3>
+<p class="paragraph">If you did the setup CA configuration step, sign the CSR file by running this command.</p>
+<code lang="shell">openssl ca -config ca.cnf -in client01/user.csr -out client01/user.crt</code>
+<p class="paragraph">If you skipped the setup CA configuration step, sign the CSR file by running this command.</p>
+<code lang="shell">openssl x509 -req -days 365 -in client01/user.csr -CA ca.crt -CAkey ca.key -set_serial 01 -out client01/user.crt</code>
+<h3>Convert the crt file to pfx/p12 file.</h3>
+<p class="paragraph">Most of the time, browsers/client machines only accept a certificate in the pfx format. Run this
+    command to convert the crt file to the pfx/p12 format.</p>
+<code lang="shell">openssl pkcs12 -export -out client01/user.pfx -inkey client01/user.key -in client01/user.crt -certfile ca.crt</code>
+<p class="paragraph">You'll be prompted to enter an export password. You must input the exact password when adding
+    the certificate to a browser.</p>
+<br/>
+<h1>Setting up nginx with client certificates verification</h1>
+<p class="paragraph">Add these lines to a server block in your nginx configuration</p>
+<code lang="shell" class="linenumber">ssl_client_certificate /path/to/client/verfication/ca.crt;
+ssl_verify_client optional;
+ssl_verify_depth 2;</code>
+<p class="paragraph">You can do location-based access control. Location-based here refers to a location block in your
+    nginx configuration, for example:</p>
+<code lang="shell">    location /private {
+# mark(1[13:41]) dimgrey
+        if ($ssl_client_verify != SUCCESS) {
+            return 403;
+        }
+
+        ....
+
+    }
+</code>
+<p class="paragraph">Here is a complete example of a server block in the nginx configuration</p>
+<code lang="shell">server {
+    listen 443 ssl http2;
+    listen [::]:443 ssl http2;
+
+    server_name www.example.com;
+    ssl_certificate /path/to/your/https/certificate.pem;
+    ssl_certificate_key /path/to/your/https/private-key.pem;
+    include snippets/ssl-params.conf;
+
+# mark(1:3) dimgrey
+    ssl_client_certificate /path/to/client/verification/ca.crt;
+    ssl_verify_client optional;
+    ssl_verify_depth 2;
+
+    root /usr/share/nginx/html;
+    index  index.html index.htm;
+
+    location / {
+# mark(1[13:41]) dimgrey
+        if ($ssl_client_verify != SUCCESS) {
+            return 403;
+        }
+
+    }
+}</code>
+<br/>
+<h1>Adding the User Certificates to the client machine/browsers</h1>

next.config.js

@@ -1,8 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+    output: "standalone",
     webpack: (config) => {
         config.externals = [...config.externals, "jsdom"];
         return config;
+    },
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "assets.suyono.me",
+                pathname: "/**"
+            },
+        ]
     }
 }
 

package.json

@@ -9,23 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/dompurify": "^3.0.3",
-    "@types/jsdom": "^21.1.3",
+    "@types/dompurify": "^3.0.5",
+    "@types/jsdom": "^21.1.6",
     "@types/node": "20.6.5",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.16",
-    "dompurify": "^3.0.6",
-    "eslint": "8.50.0",
-    "eslint-config-next": "13.5.2",
-    "html-react-parser": "^4.2.2",
+    "bright": "^0.8.5",
+    "dompurify": "^3.1.2",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.2.3",
+    "html-react-parser": "^4.2.10",
     "jsdom": "^22.1.0",
-    "mysql2": "^3.6.1",
-    "next": "13.5.2",
+    "mysql2": "^3.9.7",
+    "next": "14.2.3",
     "postcss": "8.4.30",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "redis": "^4.6.10",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "redis": "^4.6.13",
+    "sharp": "^0.33.3",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   },

pm2.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    apps: [{
+        script: "server.js",
+        instances: 4,
+        exec_mode: "cluster"
+    }]
+}

tailwind.config.ts

@@ -12,10 +12,12 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'blog-cover': "url('/assets/placeholder.webp')"
       },
       width: {
         '224': '56rem',
+      },
+      height: {
+        '192': '48rem',
       }
     },
   },