windows下若依前后端分离部署

本文主要讲述了，如何在windows下部署若依前后分离的框架。

一.成功运行若依前后端分离框架

1.在若依官网下载ruoyi-vue，并使用idea打开

2.根据doc目录下的文档配置环境，并成功运行。

如果运行不成功请参考别的文章，这里不再赘述。

二.使用jar包+NGINX的方式部署

前端部分

1.下载NGINX：网站

这里我下载的是  1.24.0版本

2.前端部分打包

进入ruoyi-ui文件夹目录下，运行npm run build:prod  ，结束后会生成一个dist文件夹.如下图所示：

cd ruoyi-ui
npm run build:prod  

新建一个文件夹，我这里建的是ruoyibushu文件夹。将之前下载的ngxin包放到这个文件夹下面：

打开nginx-1.22.1文件夹，将刚才打包好的前端文件夹dist放到html文件夹下面：

之后返回到上一级目录，进入conf文件夹，打开nginx.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       81;  #前端监听端口
        server_name  localhost;  #前端地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D://Codes//JAVA//ruoyibushu//nginx-1.22.1//nginx-1.22.1//html//dist;#之前放置的dist文件夹路径
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
		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/; #后端地址

}

        error_page   500 502 503 504  /50x.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;
    #    }
    #}

}

这里说一下里面几个最基本也是新手容易混淆的参数填写：

server {
        listen       81;  #前端监听端口
        server_name  localhost;  #前端地址

        location / {
            root   D://Codes//JAVA//ruoyibushu//nginx-1.22.1//nginx-1.22.1//html//dist;#之前放置的dist文件夹路径
            index  index.html index.htm;
        }

listen和server_name：

前端地址和端口，如果不知道自己是哪个地址和端口，可以重新运行下前端的程序，也就是npm run dev这行代码，最后会出现一个地址

root：

这里填的是dist文件夹的绝对路径。注意这里如果直接复制地址栏是D:\Codes\JAVA\ruoyibushu\nginx-1.22.1\nginx-1.22.1\html\dist;

需要把\全部修改为//,也就是如下格式

D://Codes//JAVA//ruoyibushu//nginx-1.22.1//nginx-1.22.1//html//dist;

我之前就是这里一直没弄好报错

剩余带#的为注释，可以删除

全部弄好之后，双击nginx.exe运行

运行成功：

如果出现这个页面则表示前端部署成功，注意如果按照我的步骤，这里应该是没有验证码的，并且会报一个错误，不过不用担心，只要出现了这个页面即可。

接下来我们打包后端部分

后端部分

打开idea

按照我下图的指示，先点击clean，再点击package

成功之后，系统会告诉你这个jar包在什么地方

我们进入到这个jar包的目录下，打开cmd输入

java -jar ruoyi-admin.jar

可以看见启动成功。

这个时候我们再重新进入前端的地址，就发现已经可以正常访问了

输入验证码

成功。

问题总结

1.在打包和部署前一定要按照若依给出的文档确保可以正常运行，这样可以保证前后端的代码是没有问题的

2.前端打包的时候如果报404错误，很可能是nginx哪个地方没有配置好。比如端口，后端地址不对