如何配置React-Boilerplate生产环境端口/域名以实现无端口访问？

Hey there! Let's get your React-Boilerplate app accessible without that annoying :3000 port suffix. Here are the most reliable ways to set this up on your DigitalOcean VPS:

方案1：直接修改应用端口为80（简单但不推荐生产环境） #

This is the quickest fix, but not ideal for production since it requires running your app with elevated privileges and lacks the security/performance benefits of a reverse proxy.

• Locate your React-Boilerplate's production config file—usually config/production.js or src/config/env/production.js.
• Find the port setting (it’s probably port: 3000) and change it to port: 80.
• Since port 80 is a privileged port, you’ll need to run your app with sudo:

  sudo npm run start:production
  

• To keep your app running even after logging out or server restarts, use pm2 (a process manager):
  • Install pm2: sudo npm install -g pm2
  • Start your app: sudo pm2 start npm --name "react-boilerplate" -- run start:production
  • Set pm2 to start on boot: Run sudo pm2 startup and follow the on-screen command to enable auto-start.

方案2：用Nginx做反向代理（生产环境推荐） #

Nginx is a robust web server that handles traffic routing, static files, and security far better than running your React app directly. Here’s how to set it up:

1. 安装Nginx #

For Ubuntu/Debian-based VPS (the most common on DigitalOcean):

sudo apt update && sudo apt install nginx
sudo systemctl start nginx && sudo systemctl enable nginx

Verify it’s running by visiting your VPS IP in a browser—you should see the default Nginx welcome page.

2. 配置反向代理 #

• Back up the default config first:

  sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak
  

• Edit the config file:

  sudo nano /etc/nginx/sites-available/default
  

• Replace the entire content with this (replace XXX.XXX.XXX.XXX with your VPS IP, and add your domain if you have one):

  server {
      listen 80 default_server;
      listen [::]:80 default_server;
  
      # Add your IP and/or domain here
      server_name XXX.XXX.XXX.XXX my-domain.com;
  
      location / {
          # Forward traffic to your React app running on port 3000
          proxy_pass http://localhost:3000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
      }
  }
  

• Check for config errors:

  sudo nginx -t
  

• If the test passes, restart Nginx to apply changes:

  sudo systemctl restart nginx
  

3. 保持React应用持续运行 #

Use pm2 to manage your app process (no sudo needed since it’s on port 3000):

sudo npm install -g pm2
pm2 start npm --name "react-boilerplate" -- run start:production
pm2 startup  # Follow the command to enable auto-start on boot
pm2 save     # Save your process list

方案3：配置自定义域名（如果有域名的话） #

• Go to your domain registrar’s dashboard and create an A record pointing your domain (e.g., my-domain.com) and subdomain (e.g., www.my-domain.com) to your VPS IP.
• Update the server_name line in your Nginx config to include your domain:

  server_name XXX.XXX.XXX.XXX my-domain.com www.my-domain.com;
  

• Restart Nginx: sudo systemctl restart nginx
• Now you can access your app via http://my-domain.com without any port suffix!

额外福利：添加HTTPS（用Let's Encrypt免费实现） #

For a secure, HTTPS-enabled connection (required for most modern apps), use Let's Encrypt:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d my-domain.com -d www.my-domain.com

Follow the prompts, and Certbot will automatically configure Nginx to use HTTPS and set up auto-renewal for your certificate.

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