要干嘛

本文是要在云服务器部署一个前后端分离的项目。

前端是一个Vue项目，将直接部署在nginx（端口80）上。
后端是Spring Boot项目，将使用jar包的方式运行（内置的tomcat端口8080）。

所以，你要有

一台装了jdk、mysql、nginx的云服务器（我的是阿里云的服务器）
- 没用过云服务器的话可以看【云服务器部署1】java web项目(war包）
- 安装nginx【Nginx 学习笔记1 —— 入门和使用】
一个Vue项目，和一个Spring Boot项目
- 没有的话下次再来。。。
确保两个项目在本地能正常运行

对下版本

前端：Vue CLI 4

"dependencies": {
    "core-js": "^3.4.4",
    "element-ui": "^2.4.5",
    "js-cookie": "^2.2.1",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  }

后端： Spring Boot 2.x

打包前端Vue项目

1.修改axios实例的baseURL或ajax请求路径

配置请求路径为代理路径

// 创建axios实例
const service = axios.create({
  baseURL: "/api", // 我们配置的代理路径，得和等下nginx配置的后端服务路径匹配
  // baseURL: "process.env.BASE_URL", 
  timeout: 60 * 1000 // 请求超时时间
})
复制代码

如果你不是像我这样使用同一个axios实例去进行的ajax，那你就要修改你的所有请求路径前缀为/api/** 或写全了 http://ip/api/**。

如url:http://ip:8080/user/login 改为 http://ip/api/user/login

2.打包

使用npm run build生成dist文件夹。

打包后端项目

将Spring Boot工程打成jar包。

主要注意以下几点：

配置文件中的一些其他服务器的配置参数要修改，如mysql的连接参数账号密码啥的、redis的连接参数等
数据库要一并移入云服务器里

有文件图片的上传下载得修改静态资源文件路径映射配置

  /*registry.addResourceHandler("/uploads/**")
            .addResourceLocations("file:F:/uploads/user/");
  linux没有盘符的，所以直接改成你放哪了如，等会nginx配置也要是这个路径 */
    registry.addResourceHandler("/uploads/**")
            .addResourceLocations("file:/home/money/uploads/");

移入云服务器

需要移入云服务的有

前端项目 dist文件夹
后端项目 jar文件
sql文件（记得加载入数据库），如果你用本地图形化连接直接在本地运行sql文件就不用传了
如果你有图片文件那些，也要放入服务器

我使用的传输工具是FileZilla

部署前端项目

1. 配置nginx

进入你的nginx文件夹（默认的好像在/usr/local/下，不知道的话可以输入 whereis nginx命令查看），修改nginx/conf/nginx.conf文件。慌的话，建议先备份。

2. 修改配置

主要配置一个server块

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80; #监听的端口
        server_name  ip;
        
        # 本机的其他路径都调到nginx的主页面
        location / {
            try_files $uri $uri/ /index.html;
        }
        # 指向前端项目的位置,这里后面也有斜杠哦
        location /appstore-web/ {
            alias   /server/dist/;
            # 下面这句是如果请路由失败将会回到哪里，或者是主页面
            # 没有这句的话vue router会失效，他找不到基点
            try_files $uri $uri/ /appstore-web/index.html;
        }
        # 指向后端服务的路径
        location ^~ /api/ {
            rewrite  ^/api/(.*)$ /$1 break;
            proxy_pass http://127.0.0.1:8080/;
        }
        # 文件路径
        location /uploads {
            alias /home/money/uploads/;
        }

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

3. 启动nginx

在 nginx/sbin/目录下运行命令

./nginx -t 可以检查配置文件是否有错
./nginx 启动
./nginx -s reload 重启

此时可访问下http://ip/appstore-web/，看出现什么页面，

你前端项目设置的主页面或其他你的页面（因为我没设主页面跑到了我的404页面了）代表成功了
nginx的欢迎页面，路径配置有问题，或者你输入错了，检查vue.config.js文件和nginx的配置文件，主要是路径的问题
nginx的错误页面那就是nginx配置文件配置的路径哪里错了

部署后端项目

因为是jar包，但我们要让他在后台运行，所以得使用命令（在jar文件目录下）：

nohup java -jar  xxx.jar >/dev/null 2>&1 &

输入命令后会显示pid进程码，也就是此时服务所属进程，要关闭就kill -9 pid；忘了就输入jps -l | grep xxx.jar，第一位就是其对应的pid。

这一步倒是没遇到什么错误，刚开始是前端登录请求被Spring Sercurity拦下了，但我明明放行了登录来着，原来是在nginx里也得配置跨域代理，就是这段

# 跨域的关键，这个路径就是vue.config.js配置的proxy代理路径
 location ^~ /api/ {
      rewrite  ^/api/(.*)$ /$1 break;
      proxy_pass http://127.0.0.1:8080;
  }

如果有报关于什么DataSource啥的，应该是你数据库没导入或参数没改成云服务器的mysql，像我本地的mysql密码和云服务器的就不一样。

重启脚本

因为在后台运行每次改东西重新部署都要先查看pid，然后kill，在重新nohup，于是写了个restart.sh脚本（放和jar同目录下）。每次更新替换jar包后sh restart.sh下就好了

pid=`jps -l | grep xxx.jar | awk '{print $1}'`

if [ -z "$pid" ]

then

echo '服务未启动不需要kill '

else

echo "$pid"

kill -9 "$pid"

fi


nohup java -jar  xxx.jar>/dev/null 2>&1 &

【云服务器部署2】前后端分离项目（nginx）

要干嘛