From 4bc0c4ce7ff4ab92df926dfa66e1ac50cae6fefd Mon Sep 17 00:00:00 2001 From: "Satsuki Akiba (aider)" Date: Wed, 4 Jun 2025 11:07:42 +0900 Subject: [PATCH] feat: Implement frontend build and server configuration for Vite and React --- frontend/index.html | 13 +++++++++++++ frontend/src/App.tsx | 12 ++++++++++++ frontend/src/main.tsx | 9 +++++++++ frontend/vite.config.ts | 9 +-------- server.ts | 16 ++++++++++------ 5 files changed, 45 insertions(+), 14 deletions(-) create mode 100644 frontend/index.html create mode 100644 frontend/src/App.tsx create mode 100644 frontend/src/main.tsx diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..dc66979 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,13 @@ + + + + + + ポッドキャスト管理画面 + + + +
+ + + diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx new file mode 100644 index 0000000..93460ed --- /dev/null +++ b/frontend/src/App.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import './app/globals.css'; +import RootLayout from './app/layout'; +import Home from './app/page'; + +export default function App() { + return ( + + + + ); +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx new file mode 100644 index 0000000..9707d82 --- /dev/null +++ b/frontend/src/main.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 55557d7..ad0a407 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -8,15 +8,8 @@ export default defineConfig({ }, build: { outDir: "dist", - // distフォルダにビルドされるので、distをベースパスにする - assetsDir: '', - // dist配信を前提にパスを調整 rollupOptions: { - output: { - entryFileNames: `assets/[name].js`, - chunkFileNames: `assets/[name].js`, - assetFileNames: `assets/[name].[ext]`, - }, + input: "index.html", }, }, }); diff --git a/server.ts b/server.ts index b52ffd1..3e8fd44 100644 --- a/server.ts +++ b/server.ts @@ -20,7 +20,7 @@ db.exec(fs.readFileSync(path.join(projectRoot, "schema.sql"), "utf-8")); // 静的ファイルパスの設定 const frontendPublicDir = path.join(projectRoot, "frontend", "public"); -const frontendBuildDir = path.join(projectRoot, "frontend", ".next"); +const frontendBuildDir = path.join(projectRoot, "dist"); const podcastAudioDir = path.join(projectRoot, "static", "podcast_audio"); const generalPublicDir = path.join(projectRoot, "public"); @@ -68,10 +68,12 @@ app.get("/_next/*", async (c) => { const file = Bun.file(filePath); if (await file.exists()) { let contentType = "application/octet-stream"; - if (filePath.endsWith(".js")) contentType = "application/javascript; charset=utf-8"; + if (filePath.endsWith(".js")) + contentType = "application/javascript; charset=utf-8"; else if (filePath.endsWith(".css")) contentType = "text/css; charset=utf-8"; else if (filePath.endsWith(".png")) contentType = "image/png"; - else if (filePath.endsWith(".jpg") || filePath.endsWith(".jpeg")) contentType = "image/jpeg"; + else if (filePath.endsWith(".jpg") || filePath.endsWith(".jpeg")) + contentType = "image/jpeg"; return c.body(file, 200, { "Content-Type": contentType }); } return c.notFound(); @@ -94,7 +96,9 @@ app.get("/podcast.xml", async (c) => { try { const file = Bun.file(filePath); if (await file.exists()) { - return c.body(file, 200, { "Content-Type": "application/xml; charset=utf-8" }); + return c.body(file, 200, { + "Content-Type": "application/xml; charset=utf-8", + }); } } catch (e) { console.error(`Error serving podcast.xml ${filePath}:`, e); @@ -104,7 +108,7 @@ app.get("/podcast.xml", async (c) => { // フォールバックとして index.html（ルートパス） app.get("/", async (c) => { - const indexPath = path.join(frontendBuildDir, "server", "app", "index.html"); + const indexPath = path.join(frontendBuildDir, "index.html"); const file = Bun.file(indexPath); if (await file.exists()) { console.log(`Serving index.html from ${indexPath}`); @@ -146,5 +150,5 @@ serve( }, (info) => { console.log(`Server is running on http://localhost:${info.port}`); - } + }, );