如何在AWS EC2上部署create-react-app并实现后台持久运行

Got it, let's break this down step by step. Deploying a Create React App (CRA) with React Router to AWS EC2 and keeping it running permanently is totally doable, plus there are some easier alternative deployment options I'll cover too.

1. Prep Your React App Locally #

• First, build your production-ready bundle: run npm run build in your project root. This generates a build folder with all static assets (HTML, CSS, JS) that we'll deploy.
• Since you're using React Router's client-side routing, we need to make sure the server redirects all routes to index.html—otherwise, users will get 404s when refreshing pages.

2. Set Up Your AWS EC2 Instance #

• Launch an EC2 instance (Ubuntu or Amazon Linux are solid choices). Make sure your security group allows inbound traffic on port 22 (for SSH) and port 80 (for HTTP; add 443 later if you want HTTPS).
• Connect to your instance via SSH:

  ssh -i "your-key-pair.pem" ec2-user@your-ec2-public-ip
  # For Ubuntu, use ubuntu@your-ec2-public-ip instead
  

3. Install a Web Server (Nginx Recommended) #

Nginx is perfect for serving static files and handling React Router's routing rules:

• Update your server's package list:

  # Ubuntu
  sudo apt update
  # Amazon Linux
  sudo yum update
  

• Install Nginx:

  # Ubuntu
  sudo apt install nginx -y
  # Amazon Linux
  sudo yum install nginx -y
  

• Start Nginx and set it to run on boot:

  sudo systemctl start nginx
  sudo systemctl enable nginx
  

4. Upload Your Build Files to EC2 #

• Use SCP to transfer the local build folder to your EC2 instance:

  scp -i "your-key-pair.pem" -r ./build ec2-user@your-ec2-public-ip:/home/ec2-user/
  

• Move the files to Nginx's default static content directory:

  # Ubuntu
  sudo mv /home/ec2-user/build/* /var/www/html/
  # Amazon Linux
  sudo mv /home/ec2-user/build/* /usr/share/nginx/html/
  

5. Configure Nginx for React Router #

• Edit Nginx's configuration file to handle client-side routing:

  # Ubuntu
  sudo nano /etc/nginx/sites-available/default
  # Amazon Linux
  sudo nano /etc/nginx/nginx.conf
  

• Find the location / block and update it to include try_files—this ensures all routes fall back to index.html:

  location / {
      root /var/www/html; # Use /usr/share/nginx/html for Amazon Linux
      index index.html index.htm;
      try_files $uri $uri/ /index.html; # Critical for React Router
  }
  

• Test the config for errors:

  sudo nginx -t
  

• If everything checks out, restart Nginx to apply changes:

  sudo systemctl restart nginx
  

6. Keep It Running Permanently #

• Nginx is managed by systemd, so it will run in the background automatically, even if the server reboots. No extra tools needed here for static CRA apps.
• If you have a Node.js backend paired with your React app, use pm2 to keep it running:

  npm install -g pm2
  pm2 start your-server-file.js
  pm2 startup # Follow the prompt to set pm2 to run on boot
  

EC2 gives you full control, but it requires server management. If you want to skip that, here are better options:

1. AWS S3 + CloudFront #

• Upload your build folder to an S3 bucket, enable static website hosting, and set both the index and error documents to index.html (fixes React Router 404s).
• Add CloudFront as a CDN to speed up global access, enable HTTPS, and hide your S3 bucket directly from the public. It's cheaper than EC2 and requires zero server maintenance.

2. AWS Amplify #

• Amplify is built for frontend apps—connect your GitHub/GitLab repo, and it automatically builds and deploys your CRA app on every commit. It handles React Router routing out of the box, plus you can add HTTPS and custom domains in a few clicks.

3. Vercel/Netlify #

• These third-party platforms are perfect for quick, free static app deployments. Connect your repo, they handle the build and hosting, and they natively support React Router's client-side routing. Both offer custom domains, HTTPS, and preview deployments for branches—way less work than EC2.

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