在 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)部署
-
构建静态文件:
bash cd /path/to/your/react-project npm run build -
将构建后的文件(
build目录)复制到 Nginx 的静态目录:bash sudo mkdir -p /var/www/myapp/client sudo cp -r build/* /var/www/myapp/client/
后端(Koa)部署
-
确保 Koa 服务已启动(推荐用
pm2管理):bash cd /path/to/your/koa-project npm install -g pm2 pm2 start app.js # 假设入口文件是 app.js -
检查 Koa 是否监听正确端口(如
3000):bash netstat -tulnp | grep 3000
5. 访问测试
-
打开浏览器访问:
- 前端:
http://your_domain.com(或服务器 IP)。 - 后端 API:
http://your_domain.com/api/xxx(测试是否代理到 Koa)。
- 前端:
常见问题排查
-
Nginx 启动失败:
-
检查错误日志:
bash sudo tail -f /var/log/nginx/error.log
-
-
静态文件 404:
- 确认
root路径是否正确,文件是否已复制到目标目录。
- 确认
-
反向代理失败:
-
确认 Koa 服务是否运行,且
proxy_pass地址正确。 -
检查防火墙是否放行端口(如
3000):bash sudo ufw allow 3000
-
总结
- 配置文件位置:
/etc/nginx/sites-available/myapp。 - 关键配置:静态文件
root+ 后端proxy_pass。 - 启用配置:符号链接 +
nginx -t+ 重启。 - 部署项目:React 构建文件放到
root目录,Koa 用pm2启动。
按此流程操作后,你的 Koa + React 项目应该能通过 Nginx 反向代理正常访问!