如何配置Apache2服务器根目录？新手部署Node/React/Express网站遇阻

Hey there! Let's break down what's going wrong here and fix it step by step—you're mixing up how Apache serves static files vs. how Node.js/Express apps run, which is super common for first-time deployments. Here's what you missed:

1. You misunderstood how Apache and Node.js work together #

Apache is a web server, but your Express app is its own independent HTTP server that needs to run and listen on a port (like 3000). Apache can't directly execute your index.js file—right now, it's just treating your src folder as a directory of static files, which is why you see the "Index of /" listing. Instead, you need to set up Apache as a reverse proxy to forward requests to your running Node.js service.

2. React projects usually need a build step (for client-side apps) #

If your React app is a standard client-side project (like one created with create-react-app), you can't just serve the src folder directly. You need to compile it into production-ready static files first:

• Navigate to your React project directory: cd myapp/packages/hotel
• Run the build command: npm run build
  This will generate a build folder with optimized HTML, CSS, and JS files that can be served statically (either by Apache or your Express server).

3. Correct Deployment Steps to Fix This #

Let's walk through the right workflow:

Step 1: Verify your Node/Express app runs locally #

First, make sure your app works on your server before involving Apache:

cd myapp/packages/hotel/src
node index.js # Or use npm start if that's defined in your package.json

Visit http://localhost:3000 (or whatever port your Express app uses) to confirm it loads correctly.

Step 2: Set up Apache as a reverse proxy #

Apache needs to forward incoming requests to your running Node service. First enable the required modules:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo systemctl restart apache2

Then edit your 000-default.conf file (replace the root directory settings with this):

<VirtualHost *:80>
    ServerName your-server-ip-or-domain.com
    # Forward all requests to your Node app's port
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>

Restart Apache again to apply changes: sudo systemctl restart apache2

Step 3: Keep your Node app running in the background #

If you close your terminal, node index.js will stop. Use a process manager like pm2 to keep it running:

sudo npm install -g pm2
cd myapp/packages/hotel/src
pm2 start index.js --name hotel-app

You can check the app status with pm2 status or view logs with pm2 logs hotel-app.

Alternative: Serve static React files directly via Apache #

If your React app is completely client-side (no Express backend needed), you can skip the reverse proxy:

• Copy the contents of your build folder to Apache's default directory: sudo cp -r myapp/packages/hotel/build/* /var/www/html/
• Update 000-default.conf to point to the static files and prioritize index.html:

  <VirtualHost *:80>
      DocumentRoot /var/www/html
      <Directory /var/www/html>
          Options Indexes FollowSymLinks MultiViews
          AllowOverride All
          Require all granted
          DirectoryIndex index.html # Ensure Apache loads index.html first
      </Directory>
  </VirtualHost>
  

• Restart Apache: sudo systemctl restart apache2

4. Quick Fixes for Your Earlier Actions #

• You deleted the default /var/www/html folder—while not critical, it's better to keep this directory intact and place your project files inside it instead of replacing it.
• Your git clone command had a typo: www.xyz123.. has an extra dot. Make sure you use the full, correct repository URL (like https://github.com/your-username/your-repo.git).

Take it slow, test each step one by one—first get your Node app running locally, then set up the proxy, then ensure it runs in the background. You've got this!

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