如何在AWS EC2 Ubuntu部署Next.js应用？无需npm命令运行项目

一、前期准备 #

• 给EC2 Ubuntu实例的安全组开放80、443端口，确保外部能正常访问
• 安装Node.js（用于构建项目）和Nginx（静态资源托管）：

  sudo apt update
  sudo apt install nodejs nginx npm -y
  

• 把你的Next.js项目代码传到EC2，比如用git clone或者scp命令完成传输

二、生成Next.js静态构建产物 #

直接执行next build生成的.next目录是服务端渲染产物，没法直接用Nginx静态托管。必须搭配next export生成纯静态的out目录：

1. 进入项目目录，先安装依赖：

   cd /path/to/your/nextjs/app
   npm install
   

2. 如果package.json里没有export脚本，手动添加：

   "scripts": {
     "build": "next build",
     "export": "next export",
     "build-export": "next build && next export"
   }
   

3. 执行构建并导出静态文件：

   npm run build-export
   

   执行完成后，项目根目录会生成一个out文件夹，里面就是可直接托管的静态资源文件。

三、配置Nginx托管静态产物 #

你之前的配置错误在于指向了.next/build（这是服务端渲染的中间产物，不能直接静态托管），以下是修正后的配置：

server {
    listen 80;
    server_name 你的EC2公网IP或域名; # 替换成实际访问地址

    location / {
        root /path/to/your/nextjs/app/out; # 指向生成的out目录
        index index.html;
        try_files $uri $uri/ /index.html; # 处理Next.js单页应用的路由跳转
    }

    # 给静态资源设置缓存（可选，提升页面加载速度）
    location /_next/static/ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

配置完成后执行以下操作：

• 将配置文件保存到/etc/nginx/sites-available/nextjs-app
• 创建软链接到启用目录，让Nginx加载该配置：

  sudo ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled/
  

• 检查配置是否合法：

  sudo nginx -t
  

• 重启Nginx使配置生效：

  sudo systemctl restart nginx
  

四、常见问题排查 #

• 页面404：检查out目录的路径是否正确，给目录设置可读权限：sudo chmod -R 755 /path/to/your/nextjs/app/out
• 样式/静态资源加载失败：确认Nginx配置里的root路径正确，直接访问静态资源的URL测试是否能打开
• 构建失败：检查Node.js版本是否符合Next.js要求，依赖是否安装完整

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