yudao-vue-pro+yudao-go-view大屏设计器前后端部署

3个月前发布

后端部署

因为后端已经整合了go-View的后端代码，我们只需要根据芋道的文档打开大屏模块就行，这里我就不过多赘述了。

修改配置文件

我们这里激活的是local,所以相关的配置再local.yaml文件里面，我们只需要配置好local里面的配置就可以了
在local.yaml文件里面修改数据库的配置，换成自己数据库的地址，数据库名称，账号和密码
Redis改成自己的Redis服务器地址
验证码我也关闭了,因为系统是给研究所内部开发的
最后，在application.yaml中租户配置也选择false

在修改完成配置项之后，就可以打包部署了。

yudao-ui-admin-vue3

这个是yudao框架的vue3前端项目，可以直接从gitee上clone下来，我已经进行了二次开发，下来我们进入部署环节
我们首先关注这几个文件：

dev代表的是开发环境 local代表的是本地环境 prod代表的是生产环境，我们如果要线上部署的话，就修改.env
和prod.env下边的配置就行。

.env需要修改以下几个配置项
因为后端我们已经关闭了租户和验证码，前后端的配置项必须一致，否则会报错，这里都设置为false。
.env.prod中如果基础路径不是自己后端的路径已经要改成自己后端的路径。
在package.json中查看打包命令
build:local表示打包时加载.env和.env.local的配置文件。
build:prod表示打包时加载.env和.env.prod的配置文件，以此论推，这里我们执行的是npm run build:prod

打包好项目的根目录下会生成一个dist文件，这个时候我们需要配置NGINX的conf文件负责前端的反向代理,后边等GO-View打包好之后一起配置

yudao-ui-go-view：下载地址

我们可以看到yudao-ui-go-view项目下只有一个.env的配置文件，我们只需要修改这个相关配置就行
必须把租户和验证码的配置都改为false，和后端保持一致，然后把VITE_PRO_PATH的路径改为后端的地址，这里是http://127.0.0.1:48080

修改完毕之后执行npm run build命令,然后也会生成一个dist文件，重命名为dist2

前端部署(使用NGINX方法)

我们把打包好的dist和dist2复制到nginx目录下的html下面，然后修改nignx.conf配置文件。

worker_processes  1;

events {
    worker_connections  1024;
}

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

    gzip on;
    gzip_min_length 1k;     # 设置允许压缩的页面最小字节数
    gzip_buffers 4 16k;     # 用来存储 gzip 的压缩结果
    gzip_http_version 1.1;  # 识别 HTTP 协议版本
    gzip_comp_level 2;      # 设置 gzip 的压缩比 1-9。1 压缩比最小但最快，而 9 相反
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 指定压缩类型
    gzip_proxied any;       # 无论后端服务器的 headers 头返回什么信息，都无条件启用压缩

    #  监听 80 端口的前端（yudao前台）
    server {
        listen       80;
        server_name  localhost; ## 重要！！！修改成你的外网 IP/域名

        location / { ## 前端项目
            root   html\\dist;  #dist的路径
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /admin-api/ { ## 后端项目 - 管理后台
            proxy_pass http://localhost:48080/admin-api/;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            # 添加 CORS 允许跨域
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;

            # 处理 OPTIONS 预检请求
            if ($request_method = 'OPTIONS') {
                return 204;
            }
        }

        location /app-api/ { ## 后端项目 - 用户 App
            proxy_pass http://localhost:48080/app-api/;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            # 添加 CORS 允许跨域
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;

            # 处理 OPTIONS 预检请求
            if ($request_method = 'OPTIONS') {
                return 204;
            }
        }
    }

    #  监听 3000 端口的前端（go-view前端）
    server {
        listen 3000;
        server_name  localhost;

        location / {
            root   html\\dist2; # 指定dist2的路径
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

然后在终端使用nginx -t检查语法，没有问题就输入nginx -s reload重新加载conf配置文件