无法将React应用容器化：无法连接PostgreSQL数据库

Hey there! I see you're stuck getting your React app connected to PostgreSQL in Docker Compose—let's break this down and fix the issue.

The Core Problem #

Your React app container is trying to connect to PostgreSQL using 127.0.0.1:5432, but here's the catch: in Docker Compose's default network, each container has its own "localhost". So 127.0.0.1 inside the sample container points to itself, not the db container. Docker Compose automatically sets up DNS for service names, so you need to use db (the name of your PostgreSQL service) as the database host instead.

Step-by-Step Fixes #

1. Update Your Database Connection String #

In your React app's database configuration (or your backend API, if you have a separate server layer), replace 127.0.0.1 with db as the host address. For example:

// Example config (adjust to match your code structure)
const dbConnection = {
  host: 'db',
  port: 5432,
  database: 'your_db_name',
  user: 'your_db_user',
  password: 'your_db_password'
};

2. Account for the depends_on Limitation #

Your depends_on: [db] setting ensures the db container starts before sample, but it doesn't wait for PostgreSQL to finish initializing and be ready to accept connections. If your app boots faster than the database, you'll still hit connection errors. Here's how to fix that:

• Create a wait-for-db.sh script in your project root:

  #!/bin/sh
  set -e
  
  # Wait for PostgreSQL to be ready
  until pg_isready -h db -p 5432 -U your_db_user; do
    echo "Waiting for PostgreSQL to start..."
    sleep 2
  done
  
  echo "PostgreSQL is ready! Starting app..."
  npm start
  

• Update your Dockerfile to use this script instead of directly running npm start:

  # Add this line before CMD to install PostgreSQL client tools (for pg_isready)
  RUN apk add --no-cache postgresql-client
  CMD ["sh", "./wait-for-db.sh"]
  

3. Simplify Configuration with Environment Variables #

Add database-related environment variables to your sample service in docker-compose.yml so your app can pick them up easily:

services:
  sample:
    # ... other settings ...
    environment:
      - CHOKIDAR_USEPOLLING=true
      - DB_HOST=db
      - DB_PORT=5432
      - DB_NAME=your_db_name
      - DB_USER=your_db_user
      - DB_PASSWORD=your_db_password
    # ... other settings ...

Then in your app, use these variables (e.g., process.env.DB_HOST) to build your connection string—this makes it easier to adjust settings without hardcoding.

Quick Checks to Confirm #

• Use Adminer (your port 8080 service) to test the database connection: when logging in, use db as the host, along with your PostgreSQL credentials. If this works, the database is reachable from the Compose network.
• Check the logs of the sample container with docker logs sample to confirm your connection string is using db instead of 127.0.0.1.

内容的提问来源于stack exchange，提问作者Yuuya