将Webpack与Node后端对接：React项目基于Express部署咨询

Great question! Since you’ve got a custom React boilerplate built with Webpack (no create-react-app) and want to deploy it using Node.js + Express, here’s a practical, step-by-step guide aligned with the freeCodeCamp-style approach you mentioned:

First, make sure your Webpack setup is configured to output optimized production files:

• Check your webpack.config.js to ensure it has production-specific settings:

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin'); // If you use this
  
  module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
      filename: 'bundle.[contenthash].js', // Content hash for cache busting
      path: path.resolve(__dirname, 'dist'),
      clean: true, // Automatically clear old files in dist
    },
    // Add your loaders (Babel, CSS, etc.) and plugins here
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html', // Your base HTML file
        minify: true, // Minify HTML for production
      }),
    ],
  };
  

• Update your package.json to include a production build script:

  "scripts": {
    "dev-server": "webpack serve --mode development",
    "build": "webpack --mode production",
    "start": "node server.js"
  }
  

• Run npm run build to generate the dist folder with your bundled static assets. Verify the folder contains index.html, bundle.js, and any other assets your app needs.

Create a simple Express server to serve your static React files and handle client-side routing (critical for single-page apps):

• Install Express: npm install express --save
• Create a server.js file in your project root:

  const express = require('express');
  const path = require('path');
  const app = express();
  const PORT = process.env.PORT || 3000;
  
  // Serve static files from the dist directory
  app.use(express.static(path.join(__dirname, 'dist')));
  
  // Catch all routes and return the React app (for client-side routing)
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
  });
  
  app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
  });
  

• Test this locally first: Run npm run build then npm start, and visit http://localhost:3000 to confirm your app loads correctly (including routing when you refresh pages).

Here are three reliable platforms to deploy your app:

Option 1: Heroku (Free Tier) #

• Install the Heroku CLI, then log in with heroku login.
• Create a Procfile (no file extension) in your root directory with: web: node server.js
• Add a heroku-postbuild script to your package.json to trigger the production build on deployment:

  "scripts": {
    // ... existing scripts
    "heroku-postbuild": "npm run build"
  }
  

• Initialize Git (if not already done): git init, git add ., git commit -m "Prepare for deployment".
• Create your Heroku app: heroku create your-unique-app-name
• Push code to Heroku: git push heroku main
• Visit https://your-unique-app-name.herokuapp.com once deployment finishes.

Option 2: Vercel (Great for React + Node) #

• Connect your GitHub repo to Vercel via its dashboard.
• In deployment settings:
  • Set Build Command to npm run build
  • Set Output Directory to dist
• For the Express server, add a vercel.json file to your root:

  {
    "builds": [{ "src": "server.js", "use": "@vercel/node" }],
    "routes": [{ "src": "/(.*)", "dest": "server.js" }]
  }
  

• Vercel will auto-deploy changes to your repo and give you a custom domain.

Option 3: DigitalOcean App Platform (Free Trial) #

• Link your GitHub repo to DigitalOcean’s App Platform.
• Configure the deployment as a Node.js app:
  • Build Command: npm run build
  • Start Command: node server.js
• Set any environment variables your app needs, then deploy. DigitalOcean will host your app and handle scaling.

• Environment Variables: If your app uses env vars, inject them into Webpack with DefinePlugin to make them available in production:

  const webpack = require('webpack');
  
  module.exports = {
    // ... other config
    plugins: [
      new webpack.DefinePlugin({
        'process.env.REACT_APP_API_URL': JSON.stringify(process.env.REACT_APP_API_URL),
      }),
    ],
  };
  

  Then set these variables in your deployment platform’s dashboard.
• Cache Busting: The [contenthash] in your Webpack output filename ensures users get the latest code instead of cached old files.
• Client-Side Routing: The app.get('*') rule in Express ensures all routes redirect to index.html, so React Router (or other routing libraries) works correctly when users refresh pages.

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