若依前后端分离版本,Windows下使用Nginx代理的方式进行部署(全流程,图文教程)

2023-11-10

场景

若依官网:

http://doc.ruoyi.vip/

前提:

服务器上安装Mysql,并将数据库导入,在SpringBoot中的application-druid.yml配置mysql数据库连接。

服务器安装Redis服务端,并在application.yml中配置连接。

具体可以参照:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107486313

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

后端部署

首先将后台项目进行打包,在application.yml配置后台端口,这里是8080。

 

然后在IDEA中将后台系统打成jar包,然后将jar包复制到服务器上,然后运行后台jar包。

这块比较简单,可以具体参照下面的官网教程。

后端部署
bin/package.bat 在项目的目录下执行
然后会在项目下生成 target文件夹包含 war 或jar (多模块生成在ruoyi-admin)

1、jar部署方式
使用命令行执行:java –jar ruoyi.jar 或者执行脚本:bin/run.bat

2、war部署方式
pom.xml packaging修改为war 放入tomcat服务器webapps

提示

SpringBoot去除内嵌tomcat

<!-- 多模块排除内置tomcat -->
<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 <exclusions>
  <exclusion>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-tomcat</artifactId>
  </exclusion>
 </exclusions>
</dependency>
<!-- 单应用排除内置tomcat -->  
<exclusions>
 <exclusion>
  <artifactId>spring-boot-starter-tomcat</artifactId>
  <groupId>org.springframework.boot</groupId>
 </exclusion>
</exclusions>

这里推荐使用Nginx代理的方式,所以需要将其打成jar包运行的方式,不用再搭建Tomcat运行war包。

最终将后台项目运行之后,访问后台接口

http://localhost:8080/captchaImage

此接口是登录时的验证码接口,是不需要权限验证的。

对应的后台接口位置

com.ruoyi.project.common下的CaptchaController

 

设置此接口放开不需要验证的配置的地方

 

部署成功后台项目后访问验证码接口如果出现以下界面则是部署成功

 

前端部署

这里是用VSCode作为前端的IDE,首先打开前端项目的vue.config.js

找到devServer下的proxy代理部分

 

这里的target是代理的请求后台的接口,对应上面部署的后台接口的url,下面还有一个路径重写,添加了一个

process.env.VUE_APP_BASE_API]:

此路径的配置在

 

所以在使用

npm run dev

运行项目时,请求都会被代理到你设置的localhost:8080/dev-api下

所以要保证你在自己的本地运行前端项目和后台项目后能代理成功,即本地的前端能访问到本地的后台接口。

接下来将前端打包。

首先打包之前确保已经安装完依赖项,即

npm install 成功且没问题。

然后打开vue.config.js

 

首先将上面的这个端口改为你要在打包后访问的端口,即使用nginx代理前的接口。

这个端口默认是80端口,这里把其修改为不会冲突的70端口,不推荐使用80端口。

因为80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。

除了这个70端口外,下面的target的url和端口要和你服务器上能访问到后台的接口一致。

然后在VSCode中新建终端,或者在前端项目下打开cmd

 npm run build:prod

进行前端项目的打包

 

打包前端成功之后

 

此时会在项目目录下生成dist目录

 

此目录就是打包之后的前端的资源。

然后将此dist目录放在服务器上的某个目录下,下面使用Nginx代理会用

 

不要动dist下文件的路径

 

下载安装Nginx

Nginx下载地址

http://nginx.org/en/download.html

这里点击相应版本的Windows版本

 

下载之后是一个压缩包,将其解压到服务器上的某个目录

 

Nginx代理配置

进入到上面解压的conf目录下,编辑Nginx的配置文件nginx.conf

 

找到server节点

 

首先这里的listen下的端口就是代理前的接口,要与前面前端项目的vue.config.js中的端口一致。

    server {
        listen       70;
        server_name  10.229.36.158;

然后下面的server_name是你服务器的ip,这里即使是使用的本地也建议不要用localhost,避免修改hosts文件导致的问题。

所以这里就直接设置你要部署项目的服务器的ip。

然后下面的location /下面配置的就是代理前前端静态资源的路径等。

root 对应的就是在服务器上前端资源的dist目录的全路径,即代表根路径。

下面的两个配置保持默认不要更改,配置的是防止404和入口页面。

        location / {
            root   D:/www/kaoqin/dist/;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

然后再下面的location /prod-api/ 就是配置的代理后的地址。

  location /prod-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;
   proxy_pass http://localhost:8080/;
        }

这里的 /prod-api/就是跟前面前端项目设置代理的路径重写一致。

下面的一些是设置请求头等,防止出现跨域问题。

然后最下面的proxy_pass就是设置的代理后的地址,即你的服务器上后台接口的url。

通过上面两个配置就能实现在服务器上所有的请求

只要是通过

http://10.229.36.158/70/dev-api/

发送过来的请求全部会被代理到

http://localhost:8080/

下。这样就能实现前后端项目的请求代理。

完整conf代码

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       70;
        server_name  10.229.36.158;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:/www/kaoqin/dist/;
   try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

  location /prod-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;
   proxy_pass http://localhost:8080/;
        }
  
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

启动Nginx

来到上面Nginx解压之后的目录下(服务器上)即含有nginx.exe的目录下,在此处打开命令行

start nginx.exe

启动nginx

 

如果对nginx的配置文件进行修改的话

nginx -s reload

如果没配置环境变量或者提示不行的话前面使用nginx.exe的全路径。

正常停止或关闭Nginx

nginx -s quit

启动Nginx成功后打开浏览器验证,输入

http://10.229.36.158:70/

如果能出现页面,即对应的前端静态资源的index.html的页面,并且能显示验证码,验证码是通过代理后的

后台接口获取。那么就是代理成功,记住不要关闭此nginx的命令行。

 

如果访问服务器上的地址不成功后检查70端口是否开放

控制面板-防火墙-高级设置

 

入站规则-新建规则-端口,添加70

 

点击下一步

 

选择允许连接

 

配置连接域点击下一步

 

设置名称点击保存。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

若依前后端分离版本,Windows下使用Nginx代理的方式进行部署(全流程,图文教程) 的相关文章

  • 我的 s3 存储桶如何使用 nginx 在不同文件夹中托管多个网站?

    我在 Amazon 上有一个 s3 Cloudfront 解决方案 我想在存储桶内的不同文件夹中托管不同的网站 并通过以下两种方式之一访问它们 子域 gt mywebsite1 mydomain com 或者 路径 gt www mydom
  • NGINX 和 Spark Java 之间的跨源通信

    我正在将 NGINX 和 Sparkjava 用于我的 Web 应用程序 我确信我已正确启用所有 CORS 标头 尽管如此 我还是得到了 XMLHttpRequest 无法加载http localhost 3003 platformAPI
  • 在 Nginx 中使用查询参数绕过基本身份验证

    在我的 nginx 配置中 我打开了基本身份验证来限制对站点的访问 如下所示 auth basic Restricted Area auth basic user file path to htpasswd 这适用于用户 但我们使用的一些工
  • 使用 Nginx 时缺少 HTTP 状态代码名称

    我正在使用 Nginx 将所有 HTTP 请求重定向到 HTTPS 在我的 Spring Boot 应用程序中 这是我正在使用的 nginx 配置 通过它我可以将所有请求重定向到 Https 但是当我这样做时 我得到了状态码返回正确 但没有
  • iFrame 在 Facebook Canvas 应用程序中显示为空白

    我有一个非常简单的页面 我试图在 Facebook iframe 中查看它 它是一个 Django 视图 但它不依赖于请求是通过 POST 还是 GET 提交 它所做的只是返回一些简单的 HTML 如果我们直接点击链接 它会正确显示 如果在
  • 将 docker-compose.yml 中的包安装到 docker 容器中

    我是 docker 和 docker compose 的初学者 我需要你的帮助 我正在使用 docker compose 制作 PHP NGINX PostgresQL symfony 开发环境 这里是 web image nginx 1
  • 防止 NGINX 中的一个 WebSocket 连接泛滥?

    我使用这个配置来防止我的服务器上出现类似 DOS 的洪水 limit req zone binary remote addr zone one 10m rate 10r s limit req zone binary remote addr
  • 如何让Nginx镜像模块不等待响应

    我们正在尝试使用 Nginx 的模块 ngx http mirror module 将流量镜像到我们的新网络服务器 这似乎会导致我们的产品网络服务器出现延迟问题 打开镜像X小时后 我们观察到Nginx错误日志 2018 07 25 15 5
  • 生产中的静态文件出现 Django 301 和 403 禁止错误

    我正在尝试使用 nginx 和 Gunicorn 在 ubuntu 14 04 vps 上部署 django 网站 但是我的 css 文件和 js 文件没有加载 我在默认的 django 开发服务器上开发了它 它运行得很好 但是当我部署我的
  • 由于 try_files $uri 别名错误,Nginx 别名中断

    我有一个版本化的 Symfony API 实例 我想按以下方式配置它 api com api v1 gt srv api v1 public index php api com api v2 gt srv api v2 public ind
  • 将虚拟主机分配给 Docker 端口

    我设置了通配符 DNS 以便对自定义域 foo 的所有 Web 请求都映射到 Docker 主机的 IP 地址 如果我有多个运行 Apache 或 Nginx 实例的容器 每个容器都会将 Apache 端口 80 映射到某个外部入站端口 我
  • Nginx:在同一服务器上为多个 React 应用程序提供服务

    我正在尝试在同一服务器上设置多个 React 应用程序 问题是在我构建项目之后 index html from build 已找到 但辅助文件来自build static不是 最初 我只用一个应用程序location static 有别名
  • 静态资源和非静态资源有什么区别?

    我主要是一名前端开发人员 设计师 但最近我一直在探索端到端解决方案 昨天 我使用平均堆栈完成了一个 TODO 应用程序 并想开始探索我的 VPS 的部署选项 话虽这么说 有人建议我使用 nginx 作为反向代理来提供静态资源 不幸的是 我陷
  • 使用 nginx 将 PATCH 请求代理为 POST

    我尝试使用 nginx 将 HTTP PATCH 请求重定向到 HTTP POST 请求 我还尝试了以下配置 但它不起作用 我收到 400 错误请求 http map request method my method default req
  • GitLab 发布临时 IP 禁令 - 403 禁止

    我的 GitLab 实例设置有时会对我们自己的 IP 地址实施 IP 禁令 导致办公室中的所有用户在任何网页或 git 请求上都会收到 403 Forbidden 该禁令的实施是由于身份验证重复出现错误 这完全是一个单独的问题 但我想防止我
  • 强制 nginx 立即关闭连接

    如何让nginx在请求完成后立即关闭tcp连接 我刚刚找到了解决方案 location ip keepalive timeout 0
  • Nginx 位置、别名、重写、根

    我正在通过 proxypass 提供 foo bar 服务 并希望继续这样做 但是 我想从 var www mystatic baz swf 等静态地提供 foo bar baz swf 服务 我希望我能做类似的事情 location fo
  • 使用 nginx 在云上部署 django 和 React

    我有一个 digitalocean 服务器 并且已经使用 Gunicorn 和 nginx 部署了 Django 后端服务器 如何在同一台服务器上部署 React 应用程序 您可以构建 React 应用程序并使用 Nginx 提供其静态文件
  • 在同一个 nginx 服务器块上公开多个 api uri

    Goal 我的目标是在同一个 nginx 服务器上设置多个后端 api 容器 http localhost 80 api account gt 调用 http account service 9000 http localhost 80 a
  • 获取请求的客户端 IP 地址而不是 Cloudflare 的 IP 地址

    Cloudflare 会更改传入请求的 IP 地址 因为 Cloudflare 是我的网站和互联网之间的中间件 代理 我该怎么办获取请求的初始IP地址 而不是 Cloudflare 的 IP 地址 我听说过mod cloudflare但是这

随机推荐

  • 并行单边jacobi算法 奇偶序列

    单边jacobi算法大家都非常熟悉 就是不停地计算旋转矩阵 简单说就是计算c和s 然后旋转 然而其中做一轮旋转 任何两列都需要旋转一次 需要n n 1 2次单独的旋转 这样的旋转其实是可以并行来实现的 这也就是为何jacobi算法最近比较热
  • SpringDataRedis 使用

    1 SpringDataRedis 特点 2 使用 SpringDataRedis 步骤 3 自定义 RedisTemplate 序列化 4 SpringDataRedis 操作对象 1 SpringDataRedis 特点 提供了对不同
  • C#开发学习~~~Console.WriteLine()

    前言 奥利给 冲冲冲 概述 Console WriteLine 是system名称空间中Console类中的一个方法 用于向控制台写入字符串并换行 其格式项采用如下形式 index alignment formatString index
  • 关于返回值RESULT

    关于返回值RESULT HRESULT Here s the RESULT 值分成32位值 HRESULT值中16到30这15个比特位包含的是设备代码 设备代码标识的是可以返回HRESULT返回代码的操作系统部分 由于Windows操作系统
  • P1089 津津的储蓄计划

    题目描述 津津的零花钱一直都是自己管理 每个月的月初妈妈给津津300300元钱 津津会预算这个月的花销 并且总能做到实际花销和预算的相同 为了让津津学习如何储蓄 妈妈提出 津津可以随时把整百的钱存在她那里 到了年末她会加上20 20 还给津
  • Spring 事件发布

    前言 事件发布是 Spring 框架中最容易被忽视的功能之一 但实际上它是一个很有用的功能 使用事件机制可以将同一个应用系统内互相耦合的代码进行解耦 并且可以将事件与 Spring 事务结合起来 实现我们工作中的一些业务需求 和 Sprin
  • 各大知名游戏引擎分析报告

    游戏引擎之争就像编程语言之争一样 在游戏开发圈永远是一个火爆的话题 目前市面上主流的一些游戏引擎 我们来给他们做一些比较 了解他们的历史 特点 为了严谨 备注一下写这个文章的时间编写时间是2021年4月20日 目前国内主流在用的游戏引擎有
  • git未在指定分支修改,保存并切换到正确分支(解决未在指定分支修改问题)

    我们在开发一个需求的时候 可能会忘记切换到开发分支上面 下面是切换到正确分支并保存修改的操作 1 将修改的代码暂存到stash git stash 2 切换到正确的分支 git checkout 正确的分支 3 从stash中取出暂存的代码
  • oracle修改临时表出现已使用的事务正在处理临时表问题

    错误提示 ORA 14450 试图访问已经在使用的事务处理临时表 解决方法 通过第一句sql来查找临时表的object id 然后代入第二局sql来生成第三句sql语句 最后再执行第三句sql语句即可kill session 执行修改表的操
  • 查看Quartz 调度任务 job 的状态

    首先 明确一点什么是 jobkey JobKey jobkey new JobKey name group jobkey相当于一把钥匙连接 所有从 schedule 中 获取 信息的钥匙 如果想获取 初始化信息 则 scheduler ge
  • 使用git rebase压缩提交(commits)

    我使用 git 有一段时间了 但老实说 我很少关注凌乱的提交历史 最近在学习 git rebase 想分享一下如何使用这个命令来压缩整理提交 Commits 五步完成 简而言之 总共有五个步骤 运行git rebase i head x x
  • 【具有路由 WSN 模拟器的随机方式移动】具有路由 WSN 模拟器的随机方式移动(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 经过我们的研究和实践 我们提出了一种具有路
  • vim: 未找到命令

    解决 一键配置所有 yum y install vim 检查是否安装 rpm qa grep vim 出现以下的的命令即安装完毕
  • 如何提高链表的查询效率

    使用跳表 1 链表的变形 跳表 跳表是一种我们不常见的数据结构 但由于其优秀的特性 在工业中 常常被用来代替红黑树 进行查找 插入和删除 Redis的有序集合就是用跳表来实现的 跳表本质上是采用 二分 的思路来改造链表 所以这要求链表必须是
  • HCIP-H12-221练习题

    HCIP H12 221练习题 习题1 由于属性AS PATH不能在AS内起作用 所以规定BGP路由器不会宣告任何从IBGP对等体来的更新信息给其IBGP对等体 A 正确 B 错误 答案 A 习题2 通过重发布命令注入BGP的路由 其Ori
  • Unity3D中的JavaScript语言基础

    Unity中的JS 也称UnityScript 和基于浏览器的JS有比较大的区别 因为UnityScript是基于Mono的 net 的IL语言规范 CLR运行环境 Mono虚拟机 上设计的语言 0 基本概念 Unity3d中的脚本可以与游
  • 使用Matlab对传递函数进行z变换

    一 建立传递函数 在这里插入代码片 s tf s Gc 100 s s 100 二 进行z变换 在这里插入代码片 c2d Gc 0 01 z dsys c2d sys ts method 传函离散 这里面的method有好多种 zoh 零阶
  • (二)Docker部署Tomcat及Web应用

    Docker部署Tomcat及Web应用 这里只拉起一个Tomcat容器 运行一个简单的web项目 确保整个docker可以正常运行 查看Tomcat镜像 docker search tomcat 下载下来官方的镜像Starts最高的那个
  • 【Android】Bluetooth(蓝牙)连接与数据传输(一)

    目录 简介 权限声明 蓝牙扫描 开始扫描 取消扫描 获取蓝牙信息 蓝牙配对 配对 取消配对 获取已配对蓝牙 最终效果 简介 蓝牙技术是一种无线数据和语音通信开放的全球规范 它是基于低成本的近距离无线连接 为固定和移动设备建立通信环境的一种特
  • 若依前后端分离版本,Windows下使用Nginx代理的方式进行部署(全流程,图文教程)

    场景 若依官网 http doc ruoyi vip 前提 服务器上安装Mysql 并将数据库导入 在SpringBoot中的application druid yml配置mysql数据库连接 服务器安装Redis服务端 并在applica