为何Dockerfile无法执行多条命令？React+Node.js+MongoDB项目部署疑问

Let's break down the issues with your current setup and walk through the fixes:

Core Problem: Blocking Foreground Process #

The biggest issue here is that npm start (for a typical React app created with Create React App) runs a foreground development server that never exits. Since you're running commands sequentially with &&, the second command node ./server/server.js will never execute—because the first command is still running and holding onto the process.

Additionally, using nohup in Docker is unnecessary: Docker containers are tied to their main process, so if you background a process with nohup, the container might exit unexpectedly when the shell process finishes, leaving your app running unmanaged.

Recommended Fix: Production-Ready Deployment (Single Process) #

For production, you shouldn't run the React development server. Instead, build your React app into static files, then serve those files directly from your Node.js server. This way, you only need one process running in the container.

Step 1: Update Your Dockerfile #

FROM node:8.9-alpine
ENV NODE_ENV production
WORKDIR /usr/src/app

# Install dependencies first (caching optimization)
COPY package*.json ./
RUN npm install --production --silent

# Copy all project files
COPY . .

# Build React into static files (this creates a `build` folder)
RUN npm run build

# Start your Node.js server (which will also serve the static React files)
CMD ["node", "./server/server.js"]

Step 2: Configure Your Node.js Server to Serve Static Files #

If you're using Express, add this to your server/server.js to serve the React build files:

const express = require('express');
const path = require('path');
const app = express();

// Serve React static files from the build folder
app.use(express.static(path.join(__dirname, '../build')));

// Your existing API routes go here
app.get('/api/hello', (req, res) => {
  res.send({ message: 'Hello from the server!' });
});

// Catch-all route to serve React's index.html for SPA routing
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Alternative: Run Multiple Processes (Not Recommended for Production) #

If you really need to run two separate processes (e.g., for development), use a process manager like pm2 instead of trying to chain commands. Docker best practice is to run one process per container, but here's how to do it if you must:

Updated Dockerfile with pm2 #

FROM node:8.9-alpine
ENV NODE_ENV production
WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install --production --silent && npm install -g pm2

COPY . .

# Start both processes with pm2 runtime (keeps the container alive)
CMD ["pm2-runtime", "start", "ecosystem.config.js"]

Create an ecosystem.config.js File #

module.exports = {
  apps: [
    {
      name: 'react-dev-server',
      script: 'npm',
      args: 'start',
      env: {
        NODE_ENV: 'development'
      }
    },
    {
      name: 'node-api-server',
      script: './server/server.js',
      env: {
        NODE_ENV: 'production'
      }
    }
  ]
};

Better Development Setup: Split Services with Docker Compose #

For development, it's cleaner to split your React app, Node server, and MongoDB into separate containers. Here's an updated docker-compose.yml:

version: '2.1'
services:
  react-app:
    build: ./client # Assuming your React code is in a `client` folder
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: development
    volumes:
      - ./client:/usr/src/app # Hot reload for development

  node-server:
    build: ./server # Your Node.js code in a `server` folder
    ports:
      - "5000:5000"
    environment:
      NODE_ENV: development
      MONGO_URI: mongodb://mongo:27017/your-db-name
    depends_on:
      - mongo

  mongo:
    image: mongo:latest
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db # Persist MongoDB data

volumes:
  mongo-data:

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