如何合并React App与Express App实现单项目部署？方法与可行性咨询

This is a super common practice to cut down on hosting costs and streamline your deployment workflow. There are a few solid ways to host your Express API and React app on the same server—let’s walk through the most practical options.

Method 1: Integrate React into your Express project (simplest approach) #

This method bundles your React app directly with your Express backend, so you only need to deploy one project:

• First, build your React app for production:

  npm run build
  

  This creates a build folder with all static React assets.
• Copy the entire build folder into the root directory of your Express project.
• Update your Express main file (e.g., app.js or server.js) to serve the React static files and handle SPA routing:

  const path = require('path');
  
  // Make sure your API routes are defined BEFORE this static serve setup
  app.use('/api', yourApiRoutes);
  
  // Serve React static files
  app.use(express.static(path.join(__dirname, 'build')));
  
  // Catch all non-API routes and return React's index.html (for SPA routing)
  app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
  

• Deploy the combined Express project to your host, start the Express server, and you’re done! Visiting your server’s domain will load the React app, and all /api requests will be handled by your Express backend.

Method 2: Use Nginx as a reverse proxy (great for keeping projects separate) #

If you prefer to keep your Express and React projects as separate codebases, use Nginx to route traffic to the right service:

• On your host, start your Express API (e.g., let it listen on port 3001) and serve your React build with a static file server like serve:

  # Install serve globally if you haven't
  npm install -g serve
  # Serve React build on port 3000
  serve -s build -l 3000
  

• Install Nginx on your host, then edit its configuration file (usually at /etc/nginx/sites-available/default):

  server {
      listen 80;
      server_name your-domain.com; # Replace with your actual domain
  
      # Route root traffic to React
      location / {
          proxy_pass http://localhost:3000;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }
  
      # Route /api traffic to Express
      location /api {
          proxy_pass http://localhost:3001;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }
  }
  

• Test the Nginx config with nginx -t, then restart Nginx with sudo systemctl restart nginx. Now your domain will serve React at the root and forward API requests to your Express server.

Method 3: Dockerize both apps (ideal for isolated environments) #

If you want clean environment isolation (especially if you’re also hosting MongoDB on the same server), use Docker and Docker Compose:

• Create a Dockerfile for your Express API and another for your React app.
• Write a docker-compose.yml file to orchestrate all services (Express, React, MongoDB):

  version: '3.8'
  services:
    api:
      build: ./your-express-api-folder
      ports:
        - "3001:3001"
      environment:
        - MONGO_URI=mongodb://mongo:27017/your-database-name
      depends_on:
        - mongo
    react:
      build: ./your-react-app-folder
      ports:
        - "3000:3000"
    mongo:
      image: mongo:latest
      volumes:
        - mongo-data:/data/db # Persist MongoDB data
  volumes:
    mongo-data:
  

• Run docker-compose up -d to start all services in the background. You can then use Nginx (like Method 2) to route traffic to the React and API containers, or access them directly via their ports.

Key notes to keep in mind #

• API endpoint configuration: In your React app, make sure API requests use relative paths (e.g., /api/users instead of http://localhost:3001/api/users) so they work correctly in production.
• Port conflicts: Ensure no two services are listening on the same port, and open necessary ports (80, 443 for HTTPS) in your host’s firewall.
• MongoDB security: If you’re hosting MongoDB on the same server, set up authentication and restrict access to only your Express API to keep your data safe.

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