我现在安装了nginx之后,要配置反向代理来部署我的koa+react项目,但是又不知道nginx安装到哪里去了,具体要去哪个文件里面配置呢

95 阅读3分钟

在 Ubuntu 上安装 Nginx 后,配置反向代理(如部署 Koa + React 项目)的步骤如下:


1. 确认 Nginx 安装路径

Nginx 的默认配置文件和目录结构如下:

  • 主配置文件/etc/nginx/nginx.conf(全局配置,一般不直接修改)
  • 站点配置目录/etc/nginx/sites-available/(存放具体站点的配置文件)
  • 启用站点目录/etc/nginx/sites-enabled/(存放符号链接,指向 sites-available 中的配置)
  • 默认配置文件/etc/nginx/sites-available/default(示例配置,可修改或删除)

快速检查

bash
ls /etc/nginx/sites-available/  # 查看已有配置
ls /etc/nginx/sites-enabled/    # 查看已启用的配置

2. 创建反向代理配置文件

为你的 Koa + React 项目创建一个新的配置文件(推荐在 sites-available 中创建,然后链接到 sites-enabled):

步骤 1:创建配置文件

bash
sudo nano /etc/nginx/sites-available/myapp

(将 myapp 替换为你的项目名称,如 koa-react-app

步骤 2:编写反向代理配置

假设:

  • React 前端:构建后静态文件放在 /var/www/myapp/client(通过 npm run build 生成)。
  • Koa 后端:运行在 http://localhost:3000(或你的服务器内网 IP + 端口)。

配置示例:

nginx
server {
    listen 80;
    server_name your_domain.com;  # 替换为你的域名或服务器IP
 
    # React 前端静态文件
    root /var/www/myapp/client;
    index index.html;
 
    location / {
        try_files $uri $uri/ /index.html;  # 支持前端路由(如 React Router)
    }
 
    # Koa 后端反向代理
    location /api/ {
        proxy_pass http://localhost:3000;  # 指向 Koa 服务
        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;
    }
}

关键参数说明

  • server_name:你的域名或服务器 IP(如 192.168.1.100)。
  • root:React 构建后的静态文件目录。
  • proxy_pass:Koa 服务的地址(如果是内网服务器,用内网 IP;如果是本机,用 localhost 或 127.0.0.1)。
  • try_files:确保前端路由(如 /dashboard)能正确返回 index.html

3. 启用配置

步骤 1:创建符号链接

bash
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

步骤 2:测试配置语法

bash
sudo nginx -t
  • 如果输出 syntax is ok 和 test is successful,则配置正确。
  • 如果有错误,根据提示修改配置文件。

步骤 3:重启 Nginx

bash
sudo systemctl restart nginx

4. 部署 Koa + React 项目

前端(React)部署

  1. 构建静态文件:

    bash
    cd /path/to/your/react-project
    npm run build
    
  2. 将构建后的文件(build 目录)复制到 Nginx 的静态目录:

    bash
    sudo mkdir -p /var/www/myapp/client
    sudo cp -r build/* /var/www/myapp/client/
    

后端(Koa)部署

  1. 确保 Koa 服务已启动(推荐用 pm2 管理):

    bash
    cd /path/to/your/koa-project
    npm install -g pm2
    pm2 start app.js  # 假设入口文件是 app.js
    
  2. 检查 Koa 是否监听正确端口(如 3000):

    bash
    netstat -tulnp | grep 3000
    

5. 访问测试

  • 打开浏览器访问:

    • 前端:http://your_domain.com(或服务器 IP)。
    • 后端 API:http://your_domain.com/api/xxx(测试是否代理到 Koa)。

常见问题排查

  1. Nginx 启动失败

    • 检查错误日志:

      bash
      sudo tail -f /var/log/nginx/error.log
      
  2. 静态文件 404

    • 确认 root 路径是否正确,文件是否已复制到目标目录。
  3. 反向代理失败

    • 确认 Koa 服务是否运行,且 proxy_pass 地址正确。

    • 检查防火墙是否放行端口(如 3000):

      bash
      sudo ufw allow 3000
      

总结

  1. 配置文件位置/etc/nginx/sites-available/myapp
  2. 关键配置:静态文件 root + 后端 proxy_pass
  3. 启用配置:符号链接 + nginx -t + 重启。
  4. 部署项目:React 构建文件放到 root 目录,Koa 用 pm2 启动。

按此流程操作后,你的 Koa + React 项目应该能通过 Nginx 反向代理正常访问!