如何在AWS EC2部署Vue.js SPA与Node.js Express服务？是否需Nginx？

Hey there! Great question—let’s break this down clearly so you can get your Vue SPA up and running alongside your Node/Express backend on that EC2 instance, even with your existing ELB in place.

Short answer: Yes, you should probably use Nginx, but it’s not strictly mandatory. Let’s cover both angles to help you decide:

Why Nginx Makes Sense (Even With ELB) #

• Efficient Static File Serving: Vue SPAs are just static HTML/CSS/JS files after building, and Nginx is optimized for serving static content far faster than Node.js would be. No need to waste your Node process on file serving when Nginx handles it better.
• Simplified Routing & CORS Avoidance: You can configure Nginx to route requests to your Express/socket.io backend based on URL paths (like /api or /socket.io), keeping everything on the same domain/port. This eliminates CORS issues that pop up when frontend and backend are on separate ports.
• Flexible SSL & Traffic Control: While ELB can handle SSL termination, Nginx gives you more granular control over SSL settings, redirects, rate limiting, and other traffic rules. You can even let ELB handle SSL and pass HTTP traffic to Nginx if that fits your workflow.
• Reliable Process Management: Nginx runs as a system service, so it’s more stable than serving static files directly from your Node app. Pair it with tools like pm2 for your Express app, and you’ll have both services auto-restarting if they crash.

When You Could Skip Nginx (Not Recommended) #

If you really want to avoid Nginx, you have two options—but both have tradeoffs:

• Serve Vue’s static files directly from your Express app using express.static(). This works for small projects but is inefficient for high traffic and mixes static serving with your API logic.
• Use ELB path-based routing to send frontend requests to one port and backend requests to another. But since both apps are on the same EC2 instance, this requires running them on separate ports and adds complexity to your ELB setup. You’ll also miss out on Nginx’s performance and reliability benefits.

Let’s walk through the most reliable approach: building your Vue SPA, setting up Nginx to serve it, and proxying backend requests to your Express/socket.io app.

1. Build Your Vue SPA Locally #

First, generate the production build of your Vue app—this creates a folder of static files ready for deployment:

npm run build

You’ll end up with a dist folder containing all the files you need to upload.

2. Transfer the dist Folder to EC2 #

Use scp to copy the folder to your EC2 instance (replace your-ec2-ip and username with your actual details):

scp -r ./dist username@your-ec2-ip:/home/username/vue-spa

3. Install Nginx on EC2 #

Connect to your EC2 instance via SSH and install Nginx:

sudo apt update
sudo apt install nginx

4. Configure Nginx to Serve Vue and Proxy Backend #

Create a new Nginx config file for your site (replace your-domain.com with your actual domain or EC2 public IP):

sudo nano /etc/nginx/sites-available/your-site.conf

Paste this config (adjust paths and ports to match your Express app’s setup):

server {
    listen 80;
    server_name your-domain.com; # Or your EC2 public IP

    # Serve Vue SPA static files
    root /home/username/vue-spa/dist;
    index index.html;

    # Handle Vue Router deep links (so refresh works on nested routes)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Proxy API requests to Express backend
    location /api {
        proxy_pass http://localhost:3000; # Replace with your Express port
        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;
    }

    # Proxy socket.io connections
    location /socket.io {
        proxy_pass http://localhost:3000; # Same Express port
        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;
    }
}

Save the file (Ctrl+O, press Enter, then Ctrl+X).

5. Enable the Config and Restart Nginx #

Enable your site by creating a symlink to the enabled sites directory:

sudo ln -s /etc/nginx/sites-available/your-site.conf /etc/nginx/sites-enabled/

Test the Nginx config for errors:

sudo nginx -t

If no errors show up, restart Nginx to apply the changes:

sudo systemctl restart nginx

6. Update ELB Settings #

Since your ELB is already pointing to your EC2 instance, make sure it’s routing traffic to port 80 (where Nginx is listening). If your ELB was previously targeting your Express port (like 3000), update your target group to use port 80 instead.

7. Keep Your Express App Running Reliably #

Use pm2 to manage your Express/socket.io app so it auto-restarts if it crashes or the instance reboots:

npm install -g pm2
pm2 start your-express-app.js # Replace with your app's entry file
pm2 startup # Configure pm2 to start on system boot
pm2 save # Save your current process list

Make sure your Vue app connects to socket.io using the same domain (not directly to the Express port). In your Vue code, the socket connection should look like this:

import { io } from 'socket.io-client';
const socket = io('/', { path: '/socket.io' });

That’s it! Your Vue SPA will be served efficiently by Nginx, API requests and socket.io connections will be proxied to your Express app, and your ELB will handle incoming traffic to the instance. This setup is stable, performant, and plays perfectly with your existing AWS infrastructure.

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