NextとReactのバージョンのアップデート

.github/workflows/auto-prettier.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: npm
           cache-dependency-path: view/next-project/package-lock.json
       - name: npm install

Makefile

@@ -12,3 +12,9 @@ down:
 seed:
 	docker compose run --rm api go mod tidy
 	docker compose run --rm api go run /app/tools/seeds/teacher_seeds.go
+local-prod-run:
+	docker compose -f docker-compose.local-prod.yml build
+	docker compose -f docker-compose.local-prod.yml up
+prod-run:
+	docker compose -f docker-compose.prod.yml build
+	docker compose -f docker-compose.prod.yml up -d

api/drivers/db/db.go

@@ -3,9 +3,10 @@ package db
 import (
 	"database/sql"
 	"fmt"
+	"os"
+
 	_ "github.com/go-sql-driver/mysql"
 	"github.com/joho/godotenv"
-	"os"
 )
 
 type client struct {
@@ -18,9 +19,11 @@ type Client interface {
 }
 
 func ConnectMySQL() (client, error) {
-	err := godotenv.Load("env/dev.env")
-	if err != nil {
-		fmt.Println(err)
+	if os.Getenv("ENV") == "develop" {
+		err := godotenv.Load("env/dev.env")
+		if err != nil {
+			fmt.Println(err)
+		}
 	}
 	dbUser := os.Getenv("NUTMEG_DB_USER")
 	dbPassword := os.Getenv("NUTMEG_DB_PASSWORD")

api/prod.Dockerfile

@@ -1,19 +1,16 @@
-FROM golang:latest
-
+# Build用 コンテナ
+FROM golang:latest AS builder
 WORKDIR /app
 COPY . /app
+ENV CGO_ENABLED=0 \
+    GOOS=linux
+RUN go mod tidy
+RUN go build -o ./main ./main.go
 
-RUN apt-get update
-RUN apt-get upgrade -y
-RUN apt-get install -y locales \
-  && locale-gen ja_JP.UTF-8 \
-  && echo "export LANG=ja_JP.UTF-8" >> ~/.bashrc
-
-RUN export LANG=C.UTF-8
-RUN export LANGUAGE=en_US:
-
-ENV CGO_ENABLED=0
-ENV GOOS=linux
-#ENV GOARCH=amd64
-
-
+# 本番用 軽量 Debian
+FROM gcr.io/distroless/base-debian11:nonroot AS runner
+LABEL org.opencontainers.image.source="https://github.com/NUTFes/FinanSu"
+COPY --from=builder --chown=nonroot /app/main .
+USER nonroot
+EXPOSE 1323
+CMD ["./main"]

docker-compose.local-prod.yml

@@ -0,0 +1,55 @@
+version: "3"
+services:
+  db:
+    image: mysql:8.0
+    container_name: "nutfes-finansu-db"
+    volumes:
+      - ./mysql/db:/docker-entrypoint-initdb.d # 初期データ
+      - ./my.cnf:/etc/mysql/conf.d/my.cnf
+    environment:
+      MYSQL_DATABASE: finansu_db
+      MYSQL_USER: finansu
+      MYSQL_PASSWORD: password
+      MYSQL_ROOT_PASSWORD: root
+      TZ: "Asia/Tokyo"
+    ports:
+      - "3306:3306"
+    restart: always
+
+  view:
+    build:
+      context: ./view
+      dockerfile: local-prod.Dockerfile
+    container_name: "nutfes-finansu-view"
+    command: "npm run start"
+    ports: ["3000:3000"]
+    depends_on: ["api"]
+
+  api:
+    build:
+      context: ./api
+      dockerfile: prod.Dockerfile
+    container_name: "nutfes-finansu-api"
+    volumes: ["./api:/app"]
+    ports: ["1323:1323"]
+    env_file: ["./api/env/dev.env"]
+    environment:
+      ENV: "production"
+      NUTMEG_MAIL_SENDER: "[email protected]"
+      NUTMEG_MAIL_PASSWORD: "xmifwkbpiybisqto"
+      RESET_PASSWORD_URL: "http://localhost:3000/reset_password"
+    depends_on:
+      db:
+        condition: service_started
+
+  minio:
+    image: minio/minio:latest
+    ports:
+      - "9000:9000"
+      - "9001:9001"
+    volumes:
+      - ./tmp/minio/data:/data
+    command: "server /data --console-address :9001"
+    environment:
+      MINIO_ROOT_USER: user
+      MINIO_ROOT_PASSWORD: password

docker-compose.prod.yml

@@ -7,13 +7,12 @@ services:
     command: tunnel run
 
   view:
-    build: "./view"
+    build:
+      context: ./view
+      dockerfile: prod.Dockerfile
     container_name: "nutfes-finansu-view"
-    volumes: ["./view:/app"]
     command: "npm run start"
     ports: ["3000:3000"]
-    environment:
-      NEXT_PUBLIC_APP_ENV: "production"
     depends_on: ["api"]
 
   api:
@@ -22,10 +21,10 @@ services:
       dockerfile: prod.Dockerfile
     container_name: "nutfes-finansu-api"
     volumes: ["./api:/app"]
-    command: "go run main.go"
     env_file: ["./finansu.env"]
     ports: ["1323:1323"]
     environment:
+      ENV: "production"
       NUTMEG_MAIL_SENDER: "[email protected]"
       NUTMEG_MAIL_PASSWORD: "xmifwkbpiybisqto"
       RESET_PASSWORD_URL: "https://finansu.nutfes.net/reset_password"

docker-compose.yml

@@ -24,12 +24,14 @@ services:
     command: sh -c "npm install && npm run dev"
     ports:
       - "3000:3000"
+      - "6006:6006"
     stdin_open: true
     environment:
       NEXT_PUBLIC_ENDPOINT: minio
       NEXT_PUBLIC_PORT: 9000
       NEXT_PUBLIC_BUCKET_NAME: finansu
       NEXT_PUBLIC_MINIO_ENDPONT: http://localhost:9000
+      RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: false
     tty: true
 
   api:
@@ -40,6 +42,7 @@ services:
     volumes:
       - ./api:/app
     environment:
+      ENV: "develop"
       NUTMEG_MAIL_SENDER: "[email protected]"
       NUTMEG_MAIL_PASSWORD: "xmifwkbpiybisqto"
       RESET_PASSWORD_URL: "http://localhost:3000/reset_password"

prod.view.Dockerfile

@@ -1,12 +1,12 @@
 # Build用 コンテナ
-FROM node:16.13.0 AS builder
+FROM node:20.14 AS builder
 WORKDIR /app/next-project
 COPY ./view/next-project /app/next-project
 RUN npm install
 RUN npm run build
 
-# 本番用 軽量 nodejs16
-FROM gcr.io/distroless/nodejs16-debian11:nonroot
+# 本番用 軽量 nodejs 20.14
+FROM node:20.14-slim
 WORKDIR /app
 LABEL org.opencontainers.image.source="https://github.com/NUTFes/FinanSu"
 ENV NODE_ENV production

view/Dockerfile

@@ -1,7 +1,7 @@
 # ベースイメージの作成
-FROM node:16.13.0
+FROM node:20.14
 # コンテナ内で作業するディレクトリを指定
 WORKDIR /app/next-project
 COPY ./ /app
 
-ENV API_URL='http://localhost:1323'
+ENV NEXT_PUBLIC_APP_ENV "develop"

view/local-prod.Dockerfile

@@ -0,0 +1,9 @@
+FROM node:20.14
+WORKDIR /app/next-project
+COPY ./next-project /app/next-project
+
+ENV NODE_ENV production
+ENV NEXT_PUBLIC_APP_ENV "develop"
+
+RUN npm install --production
+RUN npm run build

view/next-project/.eslintrc.json

@@ -4,11 +4,15 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:import/errors"
+    "plugin:import/errors",
+    "plugin:storybook/recommended"
   ],
   "plugins": ["@typescript-eslint", "unused-imports", "import"],
   "parser": "@typescript-eslint/parser",
-  "env": { "node": true, "es6": true },
+  "env": {
+    "node": true,
+    "es6": true
+  },
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

view/next-project/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+export default config;

view/next-project/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

view/next-project/next.config.js

@@ -4,11 +4,6 @@ const isProd = process.env.NEXT_PUBLIC_APP_ENV === 'production';
 module.exports = {
   reactStrictMode: true,
   env: {
-    // SSR_API_URI: isProd ? 'https://finansu-api.nutfes.net' : 'https://finansu-api.nutfes.net',
-    // CSR_API_URI: isProd ? 'https://finansu-api.nutfes.net' : 'https://finansu-api.nutfes.net',
-    // SSR_API_URI: isProd ? 'http://nutfes-finansu-api:1323' : 'http://nutfes-finansu-api:1323',
-    // CSR_API_URI: isProd ? 'http://localhost:1323' : 'http://localhost:1323',
-
     SSR_API_URI: isProd ? 'https://finansu-api.nutfes.net' : 'http://nutfes-finansu-api:1323',
     CSR_API_URI: isProd ? 'https://finansu-api.nutfes.net' : 'http://localhost:1323',
   },