Dockerで環境構築する

[Suntory-Y-Water]

対象範囲

フロントエンドは1個でOK
バックエンドはJava、JavaScript、Pythonそれぞれのコンテナを作成し起動させる。

[Suntory-Y-Water]

以前使ったイメージを使い回してみる

# ベースイメージ
FROM node:20.9.0

# 作業ディレクトリの設定
WORKDIR /app

# 依存関係のインストール
COPY package.json package-lock.json ./
RUN npm install

# ポートの公開
EXPOSE 3000

# 実行コマンド
CMD ["npm", "run", "dev"]

[Suntory-Y-Water]

起動したらJsonサーバーの生き残りがいて思いっきりエラーになった。
Javaのパスにとんでも500番えらーになったので改善したい

[Suntory-Y-Water]

ホットリロードできない問題

1. ボリュームマウント設定をオンにするため、名前つきでnode_modulesを設定する。
2. next.config.jsに以下の内容を追加する。

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['source.unsplash.com'],
  },
  // このへん
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, context) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    };
    return config;
  },
  // このへん
};

module.exports = nextConfig;

参考になりそうなもの
[Docker環境構築におけるnextjsのホットリロード不可問題 - Qiita](https://qiita.com/fur_orannge/items/90339eab0cd9142dc830)

vercel/next.js#36774

[Suntory-Y-Water]

json-serverはシンプルにcompose.yamlに設定を追加すればOK

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000" 
      - "3001:3001" # 追加
    environment:
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./frontend:/app
      - react_node_modules:/app/node_modules
    command: sh -c "npm run json & npm run dev" # 追加

[Suntory-Y-Water]

バックエンドではAPIのエンドポイントが異なる
SSRではURLのヘッダー部をheaders()で取得していたため気づかなかったが、localhostではなくfrontendになっている。

例えばDocker コンテナ内での frontend サービスから見た backend サービスは http://localhost:8080 ではなく、http://backend:8080 になる。

[Suntory-Y-Water]

CORS設定もバックエンド側で設定しないと反映されない。

package com.example.backendapi;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
public class BackendApiApplication {

    public static void main(String[] args) {
        SpringApplication.run(BackendApiApplication.class, args);
    }

    // CORSの設定
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**") // すべてのエンドポイントに適用
                        .allowedOrigins(
                            "http://localhost:3000", // ローカルホスト
                            "http://frontend:3000"   // Docker 内のサービス名
                        )
                        .allowedMethods("GET", "POST", "PUT", "DELETE"); // 許可するHTTPメソッド
            }
        };
    }
}