DockerでNode.js + Redis + PostgreSQL + React 環境構築します

2025/7/14 Docker

こんにちは、さるまりんです🐒

最近は何か新しいことをする機会がなぜか増えています。

今回はDocker Compose を使って、Node.js（Express）＋React＋PostgreSQL＋Redis の開発環境を一発で立ち上げる方法をメモしておきます。

構成

プロジェクトの構成です。こんな感じを想定しています。

my-app/
├── backend/          # Node.js (Express)
├── frontend/         # React
├── db/               # PostgreSQLデータ永続化
├── redis-data/       # Redis永続化
└── docker-compose.yml

docker-compose.yml の作成

まずはdocker-compose.ymlです。

version: '3.8'
services:
  backend:
    build: ./backend
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgres://postgres:postgres@db:5432/mydb
      - REDIS_URL=redis://redis:6379
    depends_on:
      - db
      - redis

  frontend:
    build: ./frontend
    ports:
      - "5173:5173"
    depends_on:
      - backend

  db:
    image: postgres:16
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: mydb
    volumes:
      - ./db:/var/lib/postgresql/data
    ports:
      - "5432:5432"

  redis:
    image: redis:alpine
    volumes:
      - ./redis-data:/data
    ports:
      - "6379:6379"

Node.js (Express) の準備

箱？器？の準備ができたので、それぞれを準備していきます。

まずはサーバーサイド！

backend/Dockerfile

FROM node:20
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "run", "dev"]

backend/server.js

const express = require('express');
const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('Hello from Node.js backend!');
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

backend/package.json

{
  "name": "backend",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "dev": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

React の準備

次はフロントです。

frontend/Dockerfile

FROM node:20
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "run", "dev"]

frontend/package.json

ビルドツールのViteを使う設定があります。

{
  "name": "frontend",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}

frontend/vite.config.js

Viteを使っているのでその設定です。

export default {
  server: {
    host: true, // 外部アクセスを許可
    port: 5173
  }
}

そこで動くhtml/jsも最低限こんな感じで。

frontend/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/main.jsx"></script>
  </body>
</html>

frontend/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => <h1>Hello from React!</h1>;

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

起動！

ここまできたら起動できます。

docker-compose up -d --build

成功したらそれぞれ以下で動いてます。

  • http://localhost:3000 → Node.js backend
  • http://localhost:5173 → React frontend
  • PostgreSQLは localhost:5432 で接続できます。
  • Redisは localhost:6379 です。

これでNode.js + React + DB/Redisをぱぱっと試せます。

ここからスタートして、本格的なものに発展していける最低限の準備は整ったと思います。

Dockerってダメならダメでパッとやり直せるのもいいですよね。

ここにAPIや認証、色々加えてどうなっていくか。進めていけたらと思います。

読んでくださってありがとうございました。

それではまた！