阿里云ESC windws服务器部署springboot+vue前后端分离项目_window部署springboot+vue项目

window服务器部署springboot+vue项目

前期准备：

1、完整的项目源码

我这里的项目前端是vue，后端是springboot + redis +mysql

2、服务器

我使用的是阿里云的ESC服务器（偷偷告诉你们，新手都可以白嫖一个月的服务器）

服务器系统是windows

至于我为什么不用linux，害别说了，新手还是先用window先吧。

3、服务器环境搭建

我们部署项目需要搭建项目的环境，其实仔细想想就相当于在自己的电脑上运行项目，在服务器> > 上部署项目就是为了其他主机在公网上可以访问我们的项目网站。经此而已。

重点环节：

后端项目springboot 因为是内置了tomcat所以我们就不需要安装了，因为项目还是用了redis、mysql所以我们带得在服务器上安装redis、mysql（最好是安装与开发环境一样的版本）至于redis、mysql的账号密码可以随意。可以与开发环境一致（这样方便），还有服务器上也要安装JDK ,djk好像是编译+运行，jre可以运行编译好的class文件，直接安装jre好像也可以（这里我没有试过，我安装的是JDK）

前端项目vue 因为这个项目采用的是前后端分离架构，所以需要考虑到前端请求跨域的问题，这里在服务器安装nginx来解决此问题。

---

现在就来将项目部署在服务器端:

1、首先部署后端吧 （后端没那么麻烦）

我用的编辑器的IDEA,打包步骤如下:

将此jar包上传至服务器。

若不知道如何将本机文件上传服务器 请查阅

将本地文件上传至window服务器

然后打开jar包在服务器上的文件夹 在路径里面输入cmd打开命令面板

​ 使用java -jar 启动jar包的名称.jar命令启动项目

这样后端项目就成功在服务器上部署好了（断开远程连接的时候，不需要关闭此cmd窗口。不然你懂吧 哈哈）。

2、部署前端

2.1 修改nginx配置

首先我们可以先来修改nginx的配置文件,该文件位于nginx路径下的/conf/nginx.conf可以使用记事本打开编辑

这里我就截取一个server模块

server {
        listen       8070;  # 这里是nginx监控的端口
        server_name  127.12.12.1; # 这里服务器的ip地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root html; # html：vue打包好的文件存放的根路径
    
    	# 这就通过访问 nginx运行端口(http://127.12.12.1:8070) 访问到 前端项目的主页面
        location / {
            #root   html;
            try_files $uri $uri/ @router; # 这里是解决vue项目部署在nginx之后，刷新页面之后404问题
            index  index.html index.htm; # index.html 前端页面的入口
        }
    
    	# 这也是解决刷新页面之后404问题
	    location @router {
            rewrite ^.*$ /index.html last; 
        }
		
    # 这里的/prod-api 是为了将路径携带/prod-api的请求转发到http://localhost:8888;端口上
       location /prod-api { 
		rewrite  "^/prod-api/(.*)$"  /$1 break; # 将标志路径替换掉 与后端接口就可以对应上了
		proxy_pass  http://localhost:8888; # 这就是后端运行的端口
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2.2 启动nginx

启动nginx命令

start nginx

若已经启动，然后修改了配置，可以使用一下命令重新加载命令

nginx -t 检查配置文件是否有错误

nginx -s reload 重新加载配置文件

nginx -s reopen 加载配置文件后重新启动

退出nginx命令

nginx -s quit

2.3 打包vue项目

打包前，先将vue.config.js文件中解决开发环境跨域的proxy的target（目标服务器路径）修改，

这里要修改成nignx监听的端口号(http://localhost: nginx的端口号) http://localhost:8070

使用命令npm run build打包vue项目

若有错误，可以根据错误信息一般是打包命令错误，根据错误信息来就可以

打包好后项目根路径会出现一个dist文件夹，此文件夹里面就是打包好后的文件

2.4 将打包后的文件上传至服务器

将dist文件夹里面的文件全部上传至服务器nginx安装了路径下的html文件夹中（弹出提示：覆盖已有的文件就ok）

2.5 服务器安全组

这里还需要将nginx运行的端口暴露出去，去阿里云ESC服务器安全组添加一条将8070端口开放出来.

---

到这里前端后端的部署就完成啦，快去本机上使用 服务器ip + nginx监听端口 访问前端页面吧

小编到这里很为大家感到欣慰，因为我也是花费了三四天时间才独自部署好了项目，大家一起加油啊！最后希望给我点关注、赞呗!!!