开发喵星球

需求提出

在服务器上启动 RuoYi-App，并通过 Nginx 进行代理配置，使其能够正常访问和运行。

相关介绍

RuoYi-App 是一个基于 RuoYi-Vue 的前端项目，通过 HBuilderX 进行开发和打包，可以生成适用于网站、Android、iOS 和小程序的静态文件。项目与后端完全分离，需要将后端服务和前端静态文件分别部署。

解决思路

1. 修改 RuoYi-App 的配置文件 config.js，设置后端 API 的 baseUrl。
2. 使用 HBuilderX 打包 RuoYi-App 项目，生成静态文件。
3. 将打包生成的静态文件部署到服务器上的 Nginx。
4. 配置 Nginx 进行静态文件的服务和后端 API 的反向代理。

所需技术

• HBuilderX
• Nginx
• RuoYi-Vue 后端服务
• Linux 服务器

项目结构

ruoyi-app
├── config.js
├── unpackage
│   └── dist
│       └── build
│           └── h5
│               ├── index.html
│               ├── *.js
│               └── *.css

注意事项

1. 确保后端服务已部署并可以访问。
2. 确保服务器上已安装并配置了 Nginx。
3. 确保 Nginx 配置文件路径和静态文件路径正确。

完整代码

第一步: 编辑 config.js

在 RuoYi-App 目录下，编辑 config.js 文件，设置后端 API 的 baseUrl。

// 应用全局配置
module.exports = {
  baseUrl: 'https://vue.ruoyi.vip/prod-api',
  // baseUrl: 'http://localhost:8080',
  // 应用信息
  appInfo: {
    // 应用名称
    name: "ruoyi-app",
    // 应用版本
    version: "1.0.0",
    // 应用logo
    logo: "/static/logo.png",
    // 官方网站
    site_url: "http://ruoyi.vip",
    // 政策协议
    agreements: [{
        title: "隐私政策",
        url: "https://ruoyi.vip/protocol.html"
      },
      {
        title: "用户服务协议",
        url: "https://ruoyi.vip/protocol.html"
      }
    ]
  }
}

第二步: 使用 HBuilderX 打包项目

1. 打开 HBuilderX，加载 RuoYi-App 项目。
2. 点击菜单 发行 -> 网站-PC WEB或手机H5。
3. 填写标题及域名，点击发行按钮，成功打包后会在 unpackage/dist/build/h5 目录下生成静态文件。

第三步: 将静态文件部署到服务器

1. 将 unpackage/dist/build/h5 目录下的所有文件上传到服务器，例如 /home/ruoyi/projects/ruoyi-h5 目录。

第四步: 配置 Nginx

在服务器上编辑 Nginx 配置文件（例如 /etc/nginx/nginx.conf），添加以下配置：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        charset utf-8;

        location / {
            root   /home/ruoyi/projects/ruoyi-h5;
            try_files uriuri/ /index.html;
            index  index.html index.htm;
        }

        # 默认所有路径
        location /prod-api/ {
            proxy_set_header Host http_host;
            proxy_set_header X-Real-IPremote_addr;
            proxy_set_header REMOTE_HOST remote_addr;
            proxy_set_header X-Forwarded-Forproxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-NginX-Proxy true;

            # 反向代理配置
            proxy_pass http://localhost:8080/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

运行结果

1. 启动 Nginx：

   sudo nginx -s reload
   

2. 访问前端页面：
   • 在浏览器中访问 http://<服务器IP>，可以看到 RuoYi-App 的首页。
3. 测试 API 代理：
   • 在前端页面中进行操作，确保可以正常调用后端 API。

总结

通过上述步骤，我们成功地在服务器上启动了 RuoYi-App，并通过 Nginx 进行代理配置，使其能够正常访问和运行。这样可以充分利用 Nginx 的静态文件服务和反向代理功能，保证前后端分离架构的高效运行。