淘先锋技术网

首页 1 2 3 4 5 6 7

笔记：springboot+vue项目部署到服务器上

一、部署springboot项目

把springboot项目用IDEA的package命令打包。得到一个demo-0.0.1-SNAPSHOT.jar。

Linux方法：

  1. 在linux服务器的根目录下建一个springboot_platform目录，把demo-0.0.1-SNAPSHOT.jar放在这里。
  2. 使用cd命令转到springboot_platform目录下，执行命令“nohup java -jar demo-0.0.1-SNAPSHOT.jar &” 来把springboot服务启动并挂载到后台。
  3. 可以用“ps -ef | grep java” 命令来查看java运行的几个端口号
  4. 用“kill -9 端口号” 来杀死进程关闭程序
  5. 这里springboot的端口号为8081

Windows方法：

  1. 直接双击demo-0.0.1-SNAPSHOT.jar运行
  2. 在cmd窗口中使用“netstat -ano | findstr 8081” （查看springboot的运行状态，springboot的端口号是8081）
  3. “taskkill -pid 27768 –f” （杀死springboot进程，27768是它的进程号）

二、部署Vue项目

在生产环境下转到vue目录，使用npm run build打包成dist文件夹。

在linux服务器上部署Vue项目需要使用nginx服务器，安装包为nginx-1.20.1.tar.gz。首先介绍nginx服务器的安装与设置。首先，先建立一个名为vue_platform的文件夹，这里存放vue的内容。把dist.rar解压，把dist文件夹里面的内容全复制到vue_platform，注意不是复制dist文件夹，是复制dist文件夹里面的内容。后面配置nginx的conf文件是，location里面需要用到这个路径。

Linux方法：

  1. 把nginx-1.20.1.tar.gz放到linux的 /home/xxx/nginx（这个目录自己定）下面
  2. 在此目录下执行命令“tar -xvf nginx-1.20.1.tar.gz”
  3. 然后执行“./configure --prefix=/home/xxx/nginx”
  4. 若是报错，就执行下面的命令安装所需的软件包：

sudo apt-get install libpcre3 libpcre3-dev

sudo apt-get install zlib1g-dev

sudo apt-get install openssl libssl-dev

  1. 注意，此时，仍未出现/home/xxx/nginx文件夹
  2. 执行命令“make”，进行编译
  3. 执行命令“make install”，进行安装
  4. 执行命令“./sbin/nginx –t” 查看是否安装成功，安装成功会输出下面的话

nginx: the configuration file /home/lb/nginx/conf/nginx.conf syntax is ok

nginx: configuration file /home/lb/nginx/conf/nginx.conf test is successful

  1. 要是输出第一句话ok，又多输出了23句话，那么就修改/home/xxx/nginx/conf/nginx.conf，用记事本编辑，把listen端口改成1024以上，因为1024以下的都需要权限
  2. 然后用cd命令转到/home/xxx/nginx目录下，执行命令./sbin/nginx打开服务器
  3. 然后在客户端浏览器地址栏输入”服务器ip:9999”(我这里改的端口号是9999)，如果出现welcome to nginx则表示成功，若不行就打开nginx下面的conf/nignx.conf文件，修改server{

                listen #这里填你想改的端口号，例如9999

此外：nginx的各种命令如下：

  1. cd转到nginx文件夹下：
  2. 启动：./sbin/nginx
  3. 停止：./sbin/nginx -s stop
  4. 退出：./sbin/nginx -s quit（优雅的停止）
  5. 重启：./sbin/nginx -s reopen
  6. 重新加载配置文件：./sbin/nginx -s reload（修改了conf配置文件之后执行这个）
  7. 查看帮助：./sbin/nginx -s –h

跨域问题：

首先，要明白，vue的npm run serve是在开发环境下，而npm run build是打包以后放到生产环境下。这两种环境都会碰到跨域问题。跨域问题是指浏览器不能向同源（ip，端口号有一个不同就是跨域）地址直接发送请求。比如vue前端端口是9999，后端是8081，同一个ip，前端向后端发送请求就是跨域，这样不行。

所以要配置代理服务器。

开发环境下是在vue这里设置，也就是设置vue.config.js文件为：

module.exports = {

   

    publicPath: './', // npm run build 之后设置默认路径'/'

    devServer: {

        proxy: {  //配置跨域

            '/api': {

                target: 'http://localhost:8081/platform',  //这里后台的地址模拟的;应该填写你们真实的后台接口

                changOrigin: true,  //允许跨域

                pathRewrite: {

                   

                    '^/api': ''

                }

            },

        }

    }

}

这个地方的意思是，发送请求的时候路径端口号后面里会带一个api（是在main.js里axios.defaults.baseURL='/api'设置的），这个api没什么用，而vue的代理会把这个api解析成target里面写的地址，target才是我们真正要请求的路径。

但注意，这是开发环境，也就是我们自己编写代码的时候用的，真正到生产环境，这个就没用了，需要用nginx代理。

nginx代理方法是配置conf/nginx.conf文件，内容如下：（以下内容在http{}里面）

#上传文件的大小设置

client_max_body_size 1000m;

server {

        # 表示监听ip为 服务器，端口为 9999的请求

        listen       9999;

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        # 监听到请求后 会去/home/xxx/vue_platform文件夹下寻找index.html页面

        location / {

            root   /home/xxx/vue_platform;

            index  index.html index.htm;

            #解决页面刷新404问题

            try_files $uri $uri/ /index.html;

        }

        #这里解决跨域问题，后端地址及端口号

        #拦截/api/请求，因为所有的请求在前端被处理成 '/api+后端接口'形式

        # 监听到请求中带有/api/后 通过代理会走http://服务器ip:8081/

        location /api/ {

            proxy_pass http://localhost:8081/platform/;

        }

Windows方法：

  1. 解压nginx-1.20.1.zip，直接双击nginx.exe，双击后一个黑色的弹窗一闪而过，nginx服务即启动。
  2. 默认端口是80，可以在conf/nginx.conf修改配置文件内容，修改内容如Linux方法中所述。

 三、Mysql相关

mysql在windows服务器下的安装不在赘述，这里着重讲一下在Linux服务器下的一些注意事项。

  1. 项目的数据库名字为project，字符编码是utf8。所以创建数据库的命令为：create database project default character set utf8 default collate utf8_general_ci;
  2. 导入数据库：

把project.sql放到某个目录下，比如放到/home/xxx/目录下

进入mysql数据库控制台，

如mysql -u root -p

mysql>use 数据库;

然后使用source命令，后面参数为脚本文件(如这里用到的.sql)

mysql>source /home/xxx/project.sql;

即可导入数据库

mysql数据库乱码问题总结：

情况：springboot是中文，前端是中文，在mysql中单独insert也是中文，但是从springboot发请求添加到mysql就是乱码

解决办法：

用mysql -u root -p进入mysql

然后show variables like 'character%';

看到除了character_set_filesystem之外有一些不是utf-8；要改过来

改的方法（Linux ubuntu）打开目录/etc/mysql/找到my.cnf，打开并在最后一行添加：

[mysqld]

character-set-server=utf8

若是提示无权限（Permission is not allowed），就用sudo chmod 777 /etc/mysql/my.cnf把它设置为所有用户可读写，改完回去以后再执行sudo chmod 644 /etc/mysql/my.cnf把权限改回来

然后sudo service mysql restart重启mysql即可