넥슨 크리에이터즈 플랫폼의 전세계 도약을 위한 검색 엔진 최적화 여정

// 클라이언트 라우팅을 관리하는 컴포넌트 useEffect(() => { if (!isProfilePath) return; const title = `${creatorsInfo.nickname} (${creatorsInfo.creatorCode})님의 프로필 | 넥슨 크리에이터즈`; document.title = title; // javascript으로 title을 동적으로 변경합니다. // ... document.querySelector('meta[property="og:description"]') .setAttribute('content', title) // ... }, [isProfilePath, creatorsInfo]);

// AWS Lambda의 경우 런타임으로 Nodejs 18.x 를 사용할 수 있으며 ESM을 기본적으로 지원합니다. export const handler = async (event) => { const host = event.headers.host; // 유입한 호스트가 무엇인지를 판단 ex: creators-support.nexon.com const { rawPath, rawQueryString } = event; // pathname과 querystring을 추출 const rawHTML = await getS3Object(host, rawPath, rawQueryString, /* ... */); // 기본적인 index.html 템플릿 파일을 얻어옵니다. const HTMLMetaAttached = await getHTMLMetaAttached(rawHTML, frontUrl); // API 서버와 통신하여 템플릿에 opengraph 메타 태그를 추가합니다. return { statusCode: 200, headers: { "content-type": "text/html; charset=UTF-8", }, body: HTMLMetaAttached, };

const open = async (frontUrl: string) => { const obj = createTestObject(frontUrl); return await awsHandler(obj); }; const getMetaTag:(node: Node, metaKey: string) => string | null = (node, metaKey) => { /* 해당 메타태그에서 value를 리턴 */ } test("Creators Platform 페이지 접속 점검", async () => { const result = await open("https://creators-support.nexon.com"); expect(result.statusCode).toBe(200); }); describe("정의된 Case 외 공통", async () => { it.concurrent("랜딩 페이지", async ({ expect }) => { const { body } = await open("https://creators-support.nexon.com/kr/landing"); const htmlNode = parse(body); expect(getMetaTag(htmlNode, "title"), "Nexon Creators"); expect(getMetaTag(htmlNode, "description"), "Have fun more with Nexon Creators"); expect(getMetaTag(htmlNode, "og:description"), "Have fun more with Nexon Creators"); expect(getMetaTag(htmlNode, "image"), "https://.../creators-platform/nexon_creators_og.png"); }); it.concurrent("크리에이터즈 둘러보기", async ({ expect }) => {/* ... */}); it.concurrent("크리에이터즈 후원", async ({ expect }) => {/* ... */}); });

const s3Client = new S3Client( process.env.NODE_ENV === "test" ? { region: "...", credentials: { accessKeyId: process.env.ACCESS_KEY_ID as string, secretAccessKey: process.env.SECRET_ACCESS_KEY as string, }, } : {} );

import { defineConfig } from "vitest/config"; export default defineConfig({ test: { // ... setupFiles: ["dotenv/config"], // this line, }, });

image: node:18.12.1 cache: paths: - ./node_modules/ stages: - build - deploy

build-lambda: stage: build script: - npm i - npm run build

artifacts: paths: - ./index.mjs when: on_success expire_in: "3 mos"

deploy-lambda: stage: deploy needs: [build-lambda] dependencies: - build-lambda

image: name: amazon/aws-cli:latest entrypoint: [""] script: - yum install -y zip - mkdir dist - zip -r dist/opengraph.zip . -i index.mjs - aws lambda update-function-code --function-name <람다 이름> --zip-file fileb://dist/opengraph.zip

FROM amazon/aws-cli RUN yum install -y zip

docker save -o aws-cli-with-zip.tar aws-cli-with-zip docker load -i aws-cli-with-zip.tar docker tag aws-cli-with-zip <private-registry-domain>/<repository>/aws-cli-with-zip:2.13.31 //태그를 지정하여 registry에 등록가능. aws-cli의 최신 버전이 2.13.31이었기에, 해당 버전을 달았습니다. docker image push <private-registry-domain>/<repository>/aws-cli-with-zip:2.13.31

const path = require("path"); module.exports = { entry: "./src/index.ts", mode: "production", target: "node18.12", module: { rules: [ { test: /\.ts$/, use: "ts-loader", exclude: /node_modules/, }, ], }, resolve: { extensions: [".ts", ".js"], }, output: { library: { type: "module", }, filename: "index.mjs", path: path.resolve(__dirname), }, experiments: { outputModule: true, }, };

const path = require("path"); module.exports = { // ... externals: { "@aws-sdk/client-s3": "@aws-sdk/client-s3", }, // ... };