Linux上部署前端html

一、安装Nginx

# 安装EPEL仓库
sudo yum install epel-release -y

# 安装Nginx
sudo yum install nginx -y

# 启动Nginx并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx

二、部署前端文件

1. 创建网站目录：

   sudo mkdir -p /var/www/myweb
   sudo chown -R nginx:nginx /var/www/myweb

   

2. 上传前端文件到服务器：

 三、配置Nginx

1. 编辑配置文件：

   sudo vim /etc/nginx/conf.d/myweb.conf

   

2. 输入以下内容：

   server {
       listen       80;
       server_name  your_server_ip;  # 替换为实际IP或域名
       
       # 前端配置
       location / {
           root   /var/www/myweb;
           index  index.html;
           try_files $uri $uri/ /index.html;
       }
       # 后端API代理配置
       location /api/ {
           proxy_pass http://localhost:8080/;  # 假设Java服务运行在8080端口
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
   }

   

3. 测试并重载配置：

   sudo nginx -t
   sudo systemctl reload nginx

   

四、防火墙配置 

# 开放80端口
sudo firewall-cmd --permanent --zone=public --add-port=80/tcp
sudo firewall-cmd --reload

五、前端代码适配

在前端JavaScript请求代码中，将API地址改为：

// 直接使用相对路径（会被Nginx代理）
fetch('/api/getData').then(...)
// 或明确指定地址
fetch('http://服务器IP:80/api/getData').then(...)

六、验证部署

http://服务器IP

常见问题排查：

1. 403 Forbidden错误：

   # 检查目录权限
   sudo chmod -R 755 /var/www/myweb
   sudo chown -R nginx:nginx /var/www/myweb

2. API无法连接：

   # 确认Java服务正在运行
   netstat -tulnp | grep java
   # 测试本地访问
   curl http://localhost:8080/api/test

3. 查看Nginx日志：

   tail -f /var/log/nginx/error.log