feat: 一旦RRv7で作り直した

.dockerignore

@@ -1 +1,4 @@
-**/node_modules
+.react-router
+build
+node_modules
+README.md

.gitignore

@@ -1,11 +1,6 @@
-node_modules
+.DS_Store
+/node_modules/
 
-/.cache
-/build
-.env
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-/screenshots/
-public/entry.worker.js
+# React Router
+/.react-router/
+/build/

Dockerfile

@@ -1,44 +1,22 @@
-# ベースイメージ
-FROM node:lts-buster-slim as base
-
-WORKDIR /usr/server
-
-# 依存関係のインストールとキャッシュ
-COPY package.json pnpm-lock.yaml ./
-RUN corepack enable
-RUN pnpm fetch
-
-RUN apt-get update -y && apt-get install -y openssl curl wget git jq
-
-# ビルドステージ
-FROM base as build
-
-WORKDIR /usr/server
-
-# 残りのソースコードをコピー
-COPY ./ ./
-
-# インストールされた依存関係をリンク
-RUN pnpm install --offline
-
-# ビルド
-ENV NODE_ENV=production
-RUN pnpm prisma generate && pnpm build && pnpm prisma migrate deploy
-
-# 最終ステージ
-FROM node:lts-buster-slim as final
-
-WORKDIR /usr/server
-
-# pnpmをインストール
-RUN corepack enable
-
-# opensslをインストール(prismaの依存関係)
-RUN apt-get update -y && apt-get install -y openssl curl wget git jq
-
-
-# ビルド成果物をコピー
-COPY --from=build /usr/server /usr/server
-
-# アプリケーションの起動
-CMD ["pnpm", "start"]
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

Dockerfile.bun

@@ -0,0 +1,25 @@
+FROM oven/bun:1 AS dependencies-env
+COPY . /app
+
+FROM dependencies-env AS development-dependencies-env
+COPY ./package.json bun.lockb /app/
+WORKDIR /app
+RUN bun i --frozen-lockfile
+
+FROM dependencies-env AS production-dependencies-env
+COPY ./package.json bun.lockb /app/
+WORKDIR /app
+RUN bun i --production
+
+FROM dependencies-env AS build-env
+COPY ./package.json bun.lockb /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN bun run build
+
+FROM dependencies-env
+COPY ./package.json bun.lockb /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["bun", "run", "start"]

Dockerfile.pnpm

@@ -0,0 +1,26 @@
+FROM node:20-alpine AS dependencies-env
+RUN npm i -g pnpm
+COPY . /app
+
+FROM dependencies-env AS development-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --frozen-lockfile
+
+FROM dependencies-env AS production-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --prod --frozen-lockfile
+
+FROM dependencies-env AS build-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN pnpm build
+
+FROM dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["pnpm", "start"]

README.md

@@ -1,29 +1,100 @@
-# AkariNext Web
+# Welcome to React Router!
 
-AkariNextの公式サイトです。
+A modern, production-ready template for building full-stack React applications using React Router.
 
-## 免責事項
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
 
-同じディレクトリにLICENSEが配置されているファイルやフォルダはそのLICENSEによって提供される物です。
+## Features
 
-## 実行方法（開発者向け）
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
 
-postgresqlが必要です
+## Getting Started
 
-```
-cp .env.example .env
+### Installation
 
-# .envを編集
+Install the dependencies:
 
+```bash
 npm install
+```
+
+### Development
+
+Start the development server with HMR:
 
+```bash
 npm run dev
 ```
 
-## 本番環境
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+This template includes three Dockerfiles optimized for different package managers:
+
+- `Dockerfile` - for npm
+- `Dockerfile.pnpm` - for pnpm
+- `Dockerfile.bun` - for bun
+
+To build and run using Docker:
+
+```bash
+# For npm
+docker build -t my-app .
+
+# For pnpm
+docker build -f Dockerfile.pnpm -t my-app .
+
+# For bun
+docker build -f Dockerfile.bun -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
 
-k8s内にあるpsql-configmap.yamlのpassword等を変更したうえで apply しておく必要があります
+---
 
-```sh
-kubectl create secret generic akarinext-web-config --from-env-file=./.env
-```
+Built with ❤️ using React Router.

app/app.css

@@ -0,0 +1,114 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+	@apply bg-white dark:bg-gray-950;
+
+	@media (prefers-color-scheme: dark) {
+		color-scheme: dark;
+	}
+}
+
+.ball::before {
+	background: radial-gradient(#2290ff 1px, transparent 1px);
+	background-size: 10px 10px;
+	animation: right-bottom-to-left-top 30s linear infinite;
+}
+
+.ball::after {
+	background-image: radial-gradient(#f48fb1 1px, transparent 1px);
+	background-size: 10px 10px;
+
+	animation: left-top-to-right-bottom 30s linear infinite;
+}
+
+@keyframes right-bottom-to-left-top {
+	0% {
+		background-position-x: 100%;
+		background-position-y: 100%;
+	}
+
+	100% {
+		background-position-x: 0%;
+		background-position-y: 0%;
+	}
+}
+
+@keyframes left-top-to-right-bottom {
+	0% {
+		background-position-x: 0%;
+		background-position-y: 0%;
+	}
+
+	100% {
+		background-position-x: 100%;
+		background-position-y: 100%;
+	}
+}
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+		--primary: 0 0% 9%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+		--ring: 0 0% 3.9%;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 0 0% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 0 0% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 0 0% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 0 0% 9%;
+		--secondary: 0 0% 14.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 0 0% 14.9%;
+		--muted-foreground: 0 0% 63.9%;
+		--accent: 0 0% 14.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 14.9%;
+		--input: 0 0% 14.9%;
+		--ring: 0 0% 83.1%;
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}