开发喵星球

RuoYi-App 服务器部署教程(359)

1. 修改 RuoYi-App 的 config.js

首先,在项目根目录下的 config.js 文件中设置应用的全局配置,如下所示:

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

2. 部署流程

前提:RuoYi-App 是前后端分离的项目,因此在部署前,需要确保 RuoYi-Vue 的后端已经成功部署。
可以参考 RuoYi-Vue 后端部署教程:https://gitee.com/y_project/RuoYi-Vue

完成项目开发后,使用 HBuilderx 进行打包发布。具体步骤如下:
1. 点击菜单栏中的 发行 -> 网站-PC WEB 或手机 H5
2. 输入项目的标题和域名信息。
3. 点击 发行 按钮,系统会生成打包文件。

打包成功后,生成的静态资源文件会位于 unpackage/dist/build/h5 文件夹中,包含了 ***.js***.cssindex.html 等文件。这些静态文件可以发布到你的 nginx 或其他静态服务器上,index.html 是该应用的入口页面。

如果是 H5 部署,建议通过 Nginx 代理的方式进行配置,并将 config.js 中的 baseUrl 修改为 /prod-api

发布 Android、iOS、小程序
发布流程与 H5 类似。在 HBuilderx 中选择对应的发行方式即可。小程序和 APP 的 baseUrl 使用域名或 IP 进行访问。

3. Nginx 配置

在服务器上配置 Nginx 用于部署 RuoYi-App 项目的 H5 版本,以下为基本配置示例:

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;  // H5 文件的存放目录
            try_files uriuri/ /index.html;      // 匹配路径处理
            index  index.html index.htm;
        }

        # 代理后端 API 请求
        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;
        }
    }
}

通过以上配置,RuoYi-App 的 H5 版本即可在服务器上运行,并通过 Nginx 代理与后端服务进行通信。

   
分类:Java/OOP 作者:无限繁荣, 吴蓉 发表于:2024-10-11 23:19:41 阅读量:92
<<   >>


powered by kaifamiao