Deploy

.github/workflows/create_heroku_review_app.yaml

@@ -7,7 +7,7 @@ jobs:
   create-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
         with:
           action: create
         env:

.github/workflows/destroy_heroku_review_app.yaml

@@ -7,7 +7,7 @@ jobs:
   destroy-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
         with:
           action: destroy
         env:

workspaces/client/src/features/recommended/components/EpisodeItem.tsx

@@ -3,6 +3,7 @@ import { Flipped } from 'react-flip-toolkit';
 import { NavLink } from 'react-router';
 
 import { Hoverable } from '@wsh-2025/client/src/features/layout/components/Hoverable';
+import { removeVersionQuery } from '@wsh-2025/client/src/utils/remove-version-query';
 
 interface Props {
   episode: {
@@ -25,7 +26,7 @@ export const EpisodeItem = ({ episode }: Props) => {
             <>
               <Flipped stagger flipId={isTransitioning ? `episode-${episode.id}` : 0}>
                 <div className="relative overflow-hidden rounded-[8px] border-[2px] border-solid border-[#FFFFFF1F] before:absolute before:inset-x-0 before:bottom-0 before:block before:h-[64px] before:bg-gradient-to-t before:from-[#212121] before:to-transparent before:content-['']">
-                  <img alt="" className="h-auto w-full" src={episode.thumbnailUrl} />
+                  <img alt="" className="h-auto w-full" src={removeVersionQuery(episode.thumbnailUrl)} />
                   <span className="i-material-symbols:play-arrow-rounded absolute bottom-[4px] left-[4px] m-[4px] block size-[20px] text-[#ffffff]" />
                   {episode.premium ? (
                     <span className="absolute bottom-[8px] right-[4px] inline-flex items-center justify-center rounded-[4px] bg-[#1c43d1] p-[4px] text-[10px] text-[#ffffff]">

workspaces/client/src/features/recommended/components/SeriesItem.tsx

@@ -3,6 +3,7 @@ import { Flipped } from 'react-flip-toolkit';
 import { NavLink } from 'react-router';
 
 import { Hoverable } from '@wsh-2025/client/src/features/layout/components/Hoverable';
+import { removeVersionQuery } from '@wsh-2025/client/src/utils/remove-version-query';
 
 interface Props {
   series: {
@@ -21,7 +22,7 @@ export const SeriesItem = ({ series }: Props) => {
             <>
               <div className="relative overflow-hidden rounded-[8px] border-[2px] border-solid border-[#FFFFFF1F]">
                 <Flipped stagger flipId={isTransitioning ? `series-${series.id}` : 0}>
-                  <img alt="" className="h-auto w-full" src={series.thumbnailUrl} />
+                  <img alt="" className="h-auto w-full" src={removeVersionQuery(series.thumbnailUrl)} />
                 </Flipped>
               </div>
               <div className="p-[8px]">

workspaces/client/src/main.tsx

@@ -17,7 +17,9 @@ declare global {
 
 function main() {
   const store = createStore({});
-  const router = createBrowserRouter(createRoutes(store), {});
+  const router = createBrowserRouter(createRoutes(store), {
+    hydrationData: window.__staticRouterHydrationData,
+  });
 
   hydrateRoot(
     document,

workspaces/client/src/pages/home/components/HomePage.tsx

@@ -1,6 +1,6 @@
 import { createStore } from '@wsh-2025/client/src/app/createStore';
 import { RecommendedSection } from '@wsh-2025/client/src/features/recommended/components/RecommendedSection';
-import { useRecommended } from '@wsh-2025/client/src/features/recommended/hooks/useRecommended';
+import { useLoaderData } from 'react-router';
 
 export const prefetch = async (store: ReturnType<typeof createStore>) => {
   const modules = await store
@@ -10,7 +10,7 @@ export const prefetch = async (store: ReturnType<typeof createStore>) => {
 };
 
 export const HomePage = () => {
-  const modules = useRecommended({ referenceId: 'entrance' });
+  const { modules } = useLoaderData<Awaited<ReturnType<typeof prefetch>>>();
 
   return (
     <>

workspaces/client/src/utils/remove-version-query.ts

@@ -0,0 +1,4 @@
+// ?version= のクエリを削除する
+export const removeVersionQuery = (url: string) => {
+  return url.replace(/\?version=[^&]+/, '');
+};

workspaces/client/webpack.config.mjs

@@ -4,7 +4,6 @@ import webpack from 'webpack';
 
 /** @type {import('webpack').Configuration} */
 const config = {
-  devtool: 'inline-source-map',
   entry: './src/main.tsx',
   mode: 'none',
   module: {

workspaces/server/src/index.ts

@@ -13,8 +13,14 @@ async function main() {
 
   const app = fastify();
 
+  // 画像のみキャッシュする
   app.addHook('onSend', async (_req, reply) => {
-    reply.header('cache-control', 'no-store');
+    const contentType = reply.getHeader('Content-Type');
+    if (reply.statusCode === 200 && typeof contentType === 'string' && contentType.startsWith('image/')) {
+      reply.header('Cache-Control', 'public, max-age=31536000');
+    } else {
+      reply.header('Cache-Control', 'no-store');
+    }
   });
   app.register(cors, {
     origin: true,

workspaces/server/src/ssr.tsx

@@ -1,4 +1,3 @@
-import { readdirSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -8,23 +7,10 @@ import { createRoutes } from '@wsh-2025/client/src/app/createRoutes';
 import { createStore } from '@wsh-2025/client/src/app/createStore';
 import type { FastifyInstance } from 'fastify';
 import { createStandardRequest } from 'fastify-standard-request-reply';
-import htmlescape from 'htmlescape';
 import { StrictMode } from 'react';
 import { renderToString } from 'react-dom/server';
 import { createStaticHandler, createStaticRouter, StaticRouterProvider } from 'react-router';
 
-function getFiles(parent: string): string[] {
-  const dirents = readdirSync(parent, { withFileTypes: true });
-  return dirents
-    .filter((dirent) => dirent.isFile() && !dirent.name.startsWith('.'))
-    .map((dirent) => path.join(parent, dirent.name));
-}
-
-function getFilePaths(relativePath: string, rootDir: string): string[] {
-  const files = getFiles(path.resolve(rootDir, relativePath));
-  return files.map((file) => path.join('/', path.relative(rootDir, file)));
-}
-
 export function registerSsr(app: FastifyInstance): void {
   app.register(fastifyStatic, {
     prefix: '/public/',
@@ -51,38 +37,16 @@ export function registerSsr(app: FastifyInstance): void {
     }
 
     const router = createStaticRouter(handler.dataRoutes, context);
-    renderToString(
+    const html = renderToString(
       <StrictMode>
         <StoreProvider createStore={() => store}>
           <StaticRouterProvider context={context} hydrate={false} router={router} />
         </StoreProvider>
       </StrictMode>,
     );
 
-    const rootDir = path.resolve(__dirname, '../../../');
-    const imagePaths = [
-      getFilePaths('public/images', rootDir),
-      getFilePaths('public/animations', rootDir),
-      getFilePaths('public/logos', rootDir),
-    ].flat();
-
     reply.type('text/html').send(/* html */ `
-      <!DOCTYPE html>
-      <html lang="ja">
-        <head>
-          <meta charSet="UTF-8" />
-          <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-          <script src="/public/main.js"></script>
-          ${imagePaths.map((imagePath) => `<link as="image" href="${imagePath}" rel="preload" />`).join('\n')}
-        </head>
-        <body></body>
-      </html>
-      <script>
-        window.__staticRouterHydrationData = ${htmlescape({
-          actionData: context.actionData,
-          loaderData: context.loaderData,
-        })};
-      </script>
+      <!DOCTYPE html>${html}
     `);
   });
 }