若依Vue入门——服务器部署篇

目录

前端，ruoyi-ui

编译

部署

后端，ruoyi

使用若依前后端分离的Vue+Springboot脚手架，进行编译与在Windows Server服务器上的部署。

使用IDEA作为IDE。使用Springboot编译Jar包部署。

前提：需要服务器安装Java环境，Mysql，Redis，Nginx。具体参见ruoyi文档：环境部署 | RuoYi。安装教程暂且不再赘述。

前端，ruoyi-ui

编译

首先是前端项目进行编译，ruoyi_ui，此处使用IDEA。在package.json上点击右键，选择Show npm Scripts，显示出可以运行的npm脚本。

显示的npm脚本：

双击build:prod就可以了。 当然此处在目录下使用命令行npm run build:prod也是可以的，一个意思。

编译后的文件就在 dist文件夹 下。将整个dist文件夹复制到服务器上。

部署

服务器上下载并配置Nginx，此处不再赘述。我的nginx版本是nginx-1.18.0。

在nginx安装目录下，启动nginx服务，start nginx（如果已经启动则不许重复启动）。

之后去nginx的安装目录下的conf文件夹下，修改nginx的 配置文件nginx.conf。

 按照ruoyi说明文档里的nginx配置文件进行配置，这个是我的：

worker_processes  1;
worker_rlimit_nofile 65535;

events {
    worker_connections  1024;
}

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

    server {
        listen       8094;
        server_name  localhost;

		location / {
            root   C:/Users/Administrator/Desktop/XXXX/0721/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/;
		}
		location /boom {
			proxy_redirect off;
			proxy_pass http://localhost:8080/;
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		}

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

需要注意的参数：

• listen       8094 ：这个是监听的端口，我在访问"服务器地址:8094"这个地址的时候，就会被nginx监听。
• location / {            root   C:/Users/Administrator/Desktop/XXXX/0721/dist…… ：这个就是我复制过来的经过编译的Vue的dist文件夹，在这里做静态资源。

每次修改自己的dist文件夹所在位置时候，比如我改成location / { root   C:/Users/Administrator/Desktop/XXXX/0722/dist……之后，需要nginx重启一下。

进入nginx目录并运行cmd，执行nginx -s reload命令，就可以重新加载nginx静态资源了。

这样就可以了。这样前端就部署好了。之后通过“服务器地址:8094”就可以访问到静态的网页了。

后端，ruoyi

后端使用maven。

首先在IDEA右侧找到Maven窗口：

如果没有的话，可以在View-> Tool Windows -> Maven点击出现：

 首先先来个Maven -> clean双击。反正先执行一遍是肯定没错啦，把之前编译过的老的先给删了。遇到奇奇怪怪的错误反正就先maven->clean一下。会把target目录下的东西都给删了。（当然有自信可以忽略这一步）

之后，再双击Maven -> package进行编译打jar包：

打完包之后就会在target目录下出现jar包，复制到服务器上即可。

最后，在服务器上jar包所在目录下，进行java -jar ruoyi.jar运行就可以了。

启动成功。这时候就可以访问并进行登录了。