[Feature] #10 Sitemap

.github/workflows/lighthouse.yml

@@ -38,6 +38,8 @@ jobs:
           NODE_AUTH_TOKEN: ''
 
       - name: Build project
+        env:
+          BASE_URL: ${{ secrets.BASE_URL }}
         run: npm run build
 
       - name: Run Lighthouse CI

package.json

@@ -51,6 +51,7 @@
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-mkcert": "^1.17.6",
     "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-sitemap": "^0.7.1",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.2",
     "workbox-core": "^7.1.0",

public/robots.txt

@@ -1,6 +1,8 @@
 User-agent: *
-Disallow: /login
-Disallow: /mypage
 Allow: /assets/
 Allow: /log/
-Allow: /walk/
+Allow: /walk/
+Disallow: /login
+Disallow: /mypage
+
+Sitemap: https://localhost:3000/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+    <url>
+        <loc>
+            https://localhost:3000/
+        </loc>
+        <lastmod>
+            2024-11-20T01:41:28.876Z
+        </lastmod>
+        <changefreq>
+            weekly
+        </changefreq>
+        <priority>
+            1.0
+        </priority>
+    </url>
+    <url>
+        <loc>
+            https://localhost:3000/log
+        </loc>
+        <lastmod>
+            2024-11-20T01:41:28.876Z
+        </lastmod>
+        <changefreq>
+            weekly
+        </changefreq>
+        <priority>
+            0.8
+        </priority>
+    </url>
+    <url>
+        <loc>
+            https://localhost:3000/login
+        </loc>
+        <lastmod>
+            2024-11-20T01:41:28.876Z
+        </lastmod>
+        <changefreq>
+            weekly
+        </changefreq>
+        <priority>
+            0.8
+        </priority>
+    </url>
+    <url>
+        <loc>
+            https://localhost:3000/walk
+        </loc>
+        <lastmod>
+            2024-11-20T01:41:28.876Z
+        </lastmod>
+        <changefreq>
+            weekly
+        </changefreq>
+        <priority>
+            0.8
+        </priority>
+    </url>
+    <url>
+        <loc>
+            https://localhost:3000/mypage
+        </loc>
+        <lastmod>
+            2024-11-20T01:41:28.876Z
+        </lastmod>
+        <changefreq>
+            weekly
+        </changefreq>
+        <priority>
+            0.8
+        </priority>
+    </url>
+</urlset>

src/sw.ts

@@ -1,23 +1,55 @@
 /// <reference lib="webworker" />
 import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { NetworkFirst, CacheFirst } from 'workbox-strategies'
 
 declare let self: ServiceWorkerGlobalScope
 
 self.addEventListener('message', event => {
   if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting()
 })
 
-// self.__WB_MANIFEST is the default injection point
 precacheAndRoute(self.__WB_MANIFEST)
 
-// clean old assets
 cleanupOutdatedCaches()
 
+const EXCLUDED_PATHS = ['/sitemap.xml']
+
 /** @type {RegExp[] | undefined} */
 let allowlist
-// in dev mode, we disable precaching to avoid caching issues
+
 if (import.meta.env.DEV) allowlist = [/^\/$/]
 
-// to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html'), { allowlist }))
+registerRoute(
+  new NavigationRoute(
+    createHandlerBoundToURL('index.html'),
+    {
+      allowlist,
+      denylist: EXCLUDED_PATHS.map(path => new RegExp(path))
+    }
+  )
+)
+
+registerRoute(
+  ({ request, url }) => {
+    if (url.pathname.endsWith('sitemap.xml')) {
+      return false
+    }
+    return request.destination === 'style' ||
+           request.destination === 'script' ||
+           request.destination === 'image'
+  },
+  new CacheFirst({
+    cacheName: 'static-assets'
+  })
+)
+
+
+registerRoute(
+  ({ url }) => {
+    return !url.pathname.endsWith('sitemap.xml')
+  },
+  new NetworkFirst({
+    cacheName: 'dynamic-content'
+  })
+)

vite.config.ts

@@ -1,5 +1,6 @@
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
+import Sitemap from 'vite-plugin-sitemap'
 import { compression } from 'vite-plugin-compression2'
 import dts from 'vite-plugin-dts'
 import mkcert from 'vite-plugin-mkcert'
@@ -9,6 +10,9 @@ import tsconfigPaths from 'vite-tsconfig-paths'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const baseUrl = mode === 'production' ? env.BASE_URL : 'https://localhost:3000'
+
   return {
     server: {
       port: 3000,
@@ -41,6 +45,7 @@ export default defineConfig(({ mode }) => {
 
         injectManifest: {
           globPatterns: ['**/*.{js,css,html,svg,png,ico}'],
+          globIgnores: ['**/sitemap.xml'],
         },
 
         devOptions: {
@@ -50,6 +55,39 @@ export default defineConfig(({ mode }) => {
           type: 'module',
         },
       }),
+      Sitemap({
+        hostname: baseUrl,
+        dynamicRoutes: [
+          '/',
+          '/log',
+          '/login',
+          '/walk',
+          '/mypage'
+        ],
+        exclude: [],
+        changefreq: 'weekly',
+        priority: {
+          '/': 1.0,
+          '*': 0.8
+        },
+        lastmod: new Date(),
+        outDir: mode === 'development' ? 'public' : 'dist',
+        readable: true,
+        robots: [
+          {
+            userAgent: '*',
+            allow: [
+              '/assets/',
+              '/log/',
+              '/walk/'
+            ],
+            disallow: [
+              '/login',
+              '/mypage'
+            ]
+          }
+        ]
+      }),
     ],
     build: {
       rollupOptions: {