Merge pull request #147 from softeerbootcamp4th/feat/#146/PreRendering

Feat/#146/PreRendering
softeerbootcamp4th · Aug 21, 2024 · b5b4c98 · b5b4c98
2 parents 9b2c979 + 6b2b951
commit b5b4c98
Show file tree

Hide file tree

Showing 10 changed files with 1,155 additions and 19 deletions.
diff --git a/service/index.html b/service/index.html
@@ -19,7 +19,7 @@
     />
     <meta
       property="og:image"
-      content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/%E1%84%86%E1%85%B5%E1%84%82%E1%85%B5+%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3+7.svg"
+      content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.svg"
     />
 
     <title>CasperEvent</title>

diff --git a/service/package.json b/service/package.json
@@ -11,8 +11,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@prerenderer/renderer-puppeteer": "^1.2.4",
+    "@prerenderer/rollup-plugin": "^0.3.12",
     "@svgr/webpack": "^8.1.0",
     "autoprefixer": "^10.4.19",
+    "dotenv": "^16.4.5",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-node": "^0.3.9",
     "eslint-plugin-import": "^2.29.1",
@@ -22,6 +25,7 @@
     "micro-slider": "^1.1.0",
     "postcss": "^8.4.39",
     "prop-types": "^15.8.1",
+    "puppeteer": "^23.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",

diff --git a/service/robot.txt → service/robots.txt b/service/robot.txt → service/robots.txt
@@ -1,3 +1,3 @@
 User-agent: *
-Allow: /public/
+Allow: /
 Sitemap: https://casper-event.store/sitemap.xml
diff --git a/service/src/pages/eventIntro/EventIntro.jsx b/service/src/pages/eventIntro/EventIntro.jsx
@@ -22,7 +22,7 @@ function EventIntro() {
         />
         <meta
           property="og:image"
-          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/%E1%84%86%E1%85%B5%E1%84%82%E1%85%B5+%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3+7.svg"
+          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.svg"
         />
       </Helmet>
       <EventIntroMain />

diff --git a/service/src/pages/joinEvent/JoinEventIntro.jsx b/service/src/pages/joinEvent/JoinEventIntro.jsx
@@ -25,7 +25,7 @@ function JoinEventIntro() {
         />
         <meta
           property="og:image"
-          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/%E1%84%86%E1%85%B5%E1%84%82%E1%85%B5+%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3+7.svg"
+          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.svg"
         />
       </Helmet>
       <div ref={refs.mainRef}>

diff --git a/service/src/pages/miniquiz/MiniQuiz.jsx b/service/src/pages/miniquiz/MiniQuiz.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import EventHeader from '@/components/header/EventHeader';
 import ExitModal from '@/components/modal/ExitModal';
 import MiniQuizMain from '@/pages/miniquiz/MiniQuizMain';
+import { Helmet } from 'react-helmet-async';
 
 function MiniQuiz() {
   const [openExitModal, setOpenExitModal] = useState(false);
@@ -11,6 +12,22 @@ function MiniQuiz() {
   return (
     <>
       <div className="relative min-h-[860px] text-nowrap">
+        <Helmet>
+          <title>캐스퍼 미니퀴즈</title>
+          <meta
+            name="description"
+            content="미니퀴즈을 통해 선착순 경품과 툴박스 아이템을 획득하세요!"
+          />
+          <meta property="og:title" content="캐스퍼 미니퀴즈" />
+          <meta
+            property="og:description"
+            content="미니퀴즈을 통해 선착순 경품과 툴박스 아이템을 획득하세요!"
+          />
+          <meta
+            property="og:image"
+            content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.svg"
+          />
+        </Helmet>
         <EventHeader
           eventTitle="Event 2. 도구 얻기"
           eventBody="월드컵 일일 미니퀴즈"

diff --git a/service/src/pages/newCarIntro/NewCarIntro.jsx b/service/src/pages/newCarIntro/NewCarIntro.jsx
@@ -17,7 +17,7 @@ function NewCarIntro() {
         />
         <meta
           property="og:image"
-          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/%E1%84%86%E1%85%B5%E1%84%82%E1%85%B5+%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3+7.svg"
+          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.svg"
         />
         /
       </Helmet>

diff --git a/service/src/pages/worldCup/WorldCupMain.jsx b/service/src/pages/worldCup/WorldCupMain.jsx
@@ -4,6 +4,7 @@ import worldCupData from '@/constants/worldCup/worldCupData';
 import { useNavigate } from 'react-router-dom';
 import shuffleArr from '@/utils/shuffleArr';
 import { postWorldCupResult } from '@/api/worldCup/index';
+import { Helmet } from 'react-helmet-async';
 
 const WorldCupMain = () => {
   const navigate = useNavigate();
@@ -66,6 +67,22 @@ const WorldCupMain = () => {
 
   return (
     <div>
+      <Helmet>
+        <title>캐스퍼 상황 월드컵</title>
+        <meta
+          name="description"
+          content="월드컵 게임을 통해 자동차 아이템을 획득하세요!"
+        />
+        <meta property="og:title" content="캐스퍼 상황 월드컵" />
+        <meta
+          property="og:description"
+          content="월드컵 게임을 통해 자동차 아이템을 획득하세요!"
+        />
+        <meta
+          property="og:image"
+          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.svg"
+        />
+      </Helmet>
       <WorldCupGame
         title={getTitle()}
         roundData={roundData}

diff --git a/service/vite.config.js b/service/vite.config.js
@@ -2,9 +2,36 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import { resolve } from 'path';
 import svgr from 'vite-plugin-svgr';
+import prerender from '@prerenderer/rollup-plugin';
+import dotenv from 'dotenv';
+
+dotenv.config();
 
 export default defineConfig({
-  plugins: [react(), svgr()],
+  plugins: [
+    react(),
+    svgr(),
+    prerender({
+      routes: [
+        '/',
+        '/event',
+        '/event/worldCup',
+        '/event/miniQuiz',
+        '/introduce',
+      ],
+      renderer: '@prerenderer/renderer-puppeteer',
+      rendererOptions: {
+        maxConcurrentRoutes: 1,
+        renderAfterTime: 500,
+      },
+      postProcess(renderedRoute) {
+        const apiUrl = process.env.VITE_API_URL;
+        renderedRoute.html = renderedRoute.html
+          .replace(/http:/i, 'https:')
+          .replace(/(https:\/\/)?(localhost|127\.0\.0\.1):\d*/i, apiUrl);
+      },
+    }),
+  ],
   resolve: {
     alias: [
       { find: '@', replacement: resolve(__dirname, 'src') },