feat: build client as static files

Dockerfile

@@ -13,11 +13,13 @@ RUN npm ci --prefix server
 
 COPY . .
 
+ARG SERVER_PORT=5000
 ARG VERSION
-ENV NEXT_PUBLIC_COGNITO_POOL_ENDPOINT=http://localhost:5000
-ENV NEXT_PUBLIC_COGNITO_POOL_ID=ap-northeast-1_randomPoolId
-ENV NEXT_PUBLIC_COGNITO_CLIENT_ID=random-client-id
-ENV DATABASE_URL=file:../../data/app.db
+ARG API_ORIGIN=http://localhost:$SERVER_PORT
+ARG NEXT_PUBLIC_COGNITO_POOL_ENDPOINT=http://localhost:$SERVER_PORT
+ARG NEXT_PUBLIC_COGNITO_POOL_ID=ap-northeast-1_randomPoolId
+ARG NEXT_PUBLIC_COGNITO_CLIENT_ID=random-client-id
+ARG DATABASE_URL=file:../../data/app.db
 
 RUN npm run batch:writeVersion -- $VERSION
 RUN npm run build
@@ -26,36 +28,34 @@ FROM node:20-alpine
 
 WORKDIR /usr/src/app
 
-ENV NEXT_PUBLIC_COGNITO_POOL_ENDPOINT=http://localhost:5000
-ENV NEXT_PUBLIC_COGNITO_POOL_ID=ap-northeast-1_randomPoolId
-ENV NEXT_PUBLIC_COGNITO_CLIENT_ID=random-client-id
-ENV PORT=5000
-ENV API_ORIGIN=http://localhost:5000
-ENV CORS_ORIGIN=http://localhost:5001
+ARG SERVER_PORT=5000
+ARG CLIENT_PORT=5001
+
+ENV PORT=$SERVER_PORT
+ENV CLIENT_PORT=$CLIENT_PORT
+ENV API_ORIGIN=http://localhost:$SERVER_PORT
+ENV CORS_ORIGIN=http://localhost:$CLIENT_PORT
 ENV DATABASE_URL=file:../../data/app.db
 ENV SMTP_HOST=inbucket
 ENV SMTP_PORT=2500
 ENV SMTP_USER=fake_mail_user
 ENV SMTP_PASS=fake_mail_password
 
-COPY --from=builder /usr/src/app/client/.next ./client/.next
-COPY client/package.json client/package-lock.json ./client/
-RUN npm ci --omit=dev --prefix client
+COPY package.json .
+COPY --from=builder /usr/src/app/client/out ./client/out
 
 COPY server/package.json server/package-lock.json ./server/
 RUN npm ci --omit=dev --prefix server
 
 COPY --from=builder /usr/src/app/server/index.js ./server/index.js
 COPY --from=builder /usr/src/app/server/node_modules/.prisma ./server/node_modules/.prisma
 COPY --from=builder /usr/src/app/server/prisma ./server/prisma
-COPY package.json .
-RUN npm install -g npm-run-all
 RUN apk --no-cache add curl
 COPY --from=builder /usr/src/app/data ./data
 
 HEALTHCHECK --interval=5s --timeout=5s --retries=3 CMD curl -f $API_ORIGIN/health && curl -f $CORS_ORIGIN || exit 1
 
-EXPOSE 5000 5001
+EXPOSE ${SERVER_PORT} ${CLIENT_PORT}
 VOLUME ["/usr/src/app/data"]
 
 CMD ["npm", "start"]

client/next.config.js

@@ -2,6 +2,8 @@
 module.exports = {
   reactStrictMode: true,
   pageExtensions: ['page.tsx'],
+  output: 'export',
+  trailingSlash: true,
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
   env: { APP_VERSION: `v${require('../package.json').version}` },

client/package.json

@@ -7,7 +7,6 @@
     "dev:aspida": "aspida --watch",
     "dev:path": "pathpida --ignorePath .gitignore -s -w",
     "build": "npm run generate && next build",
-    "start": "next start -p 5001",
     "lint": "run-p lint:js lint:prettier lint:style",
     "lint:js": "eslint --ext .ts,.tsx,.js --ignore-path .gitignore .",
     "lint:prettier": "prettier --check \"./**/*.{ts,tsx,js}\" --ignore-path .gitignore",

package.json

@@ -11,9 +11,7 @@
     "build": "run-p build:*",
     "build:client": "npm run build --prefix client",
     "build:server": "npm run build --prefix server",
-    "start": "run-p start:*",
-    "start:client": "npm run start --prefix client",
-    "start:server": "npm run start --prefix server",
+    "start": "npm run start --prefix server",
     "generate": "run-p generate:*",
     "generate:client": "npm run generate --prefix client",
     "generate:server": "npm run generate --prefix server",

server/.env.example

@@ -1,4 +1,5 @@
 PORT=5000
+CLIENT_PORT=
 API_ORIGIN=http://localhost:5000
 CORS_ORIGIN=http://localhost:5001
 DATABASE_URL=file:../../data/app.db

server/entrypoints/index.ts

@@ -1,4 +1,5 @@
-import { init } from 'service/app';
-import { PORT } from 'service/envValues';
+import { init, serveClient } from 'service/app';
+import { CLIENT_PORT, PORT } from 'service/envValues';
 
 init().listen({ port: PORT, host: '0.0.0.0' });
+CLIENT_PORT && serveClient().listen({ port: CLIENT_PORT, host: '0.0.0.0' });