创新项目实训 ——SpringBoot + Vue 项目部署在阿里云服务器 后篇

Vue项目部署

项目选择部署在80默认端口，浏览器输入ip地址即可直接访问。

本地打包

配置

vue.config.js配置代理

// 跨域配置
module.exports = {

  productionSourceMap: false,
  devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
    disableHostCheck: true,
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://localhost:9090',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '/api': ''                     //选择忽略拦截器里面的单词
        }
      }
    }
  }
}

request.js

const request = axios.create({
    baseURL: "/api",
    timeout: 30000
})

设定向后端发送请求时的代理，统一代理的目标地址。

打包

运行build，生成dist文件夹，将dist文件夹以scp或其他文件传输工具发送到服务器某个文件夹下。

Nginx配置

安装和启动Nginx

1、安装依赖和相关库：

[root@localhost ~]# yum -y install gcc-c++ zlib-devel openssl-devel libtool

2、下载nginx安装包并解压：

[root@localhost ~]# cd /usr/local
[root@localhost local]# wget http://nginx.org/download/nginx-1.14.0.tar.gz
[root@localhost local]# tar -zxvf nginx-1.14.0.tar.gz

3、配置和安装

[root@localhost local]# cd nginx-1.14.0
[root@localhost nginx-1.14.0]# ./configure --prefix=/usr/local/nginx
[root@localhost nginx-1.14.0]# make && make install

4、启动nginx：

[root@localhost nginx-1.14.0]# cd ../nginx/sbin
[root@localhost sbin]# ./nginx

5、查看nginx:

[root@localhost nginx]# ps -ef | grep nginx
root      13850      1  0 17:01 ?        00:00:00 nginx: master process ./nginx
nobody    13851  13850  0 17:01 ?        00:00:00 nginx: worker process
root      13879   1128  0 17:11 pts/0    00:00:00 grep --color=auto nginx

6、停止和重启nginx:

./nginx -s reload   #重启
./nginx -s stop #关闭

配置Nginx

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

	sendfile        on;

	keepalive_timeout  65;

	# gzip on;

	server {
    	listen       80;
    	server_name  localhost;

    	location / {
        	root   /home/server/vue/dist;
        	index  index.html index.htm;
        	try_files $uri $uri/ /index.html;
    	}

		location /api {
        	proxy_pass http://localhost:9090/;
    	}

		location /file {
    		alias /home/files;
		}

		#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 / {
        	root   /home/server/vue/dist;
        	index  index.html index.htm;
        	try_files $uri $uri/ /index.html;
    	}

• root后面对应的文件夹必须为打包上传的dist文件夹位置

• try_files配置为了防止使用了history模式的vue-router出现刷新后跳转404的页面

location /api {
        	proxy_pass http://localhost:9090/;
    	}

这项配置与vue.config.js中的配置对应，'/api’的命名需要与vue.config.js中一致，映射端口为相应的部署的后端。

location /file {
    		alias /home/files;
		}

这项配置较为特殊，由于项目部署后后端端口不能开放，因此，若要读取到文件，就需要将原来配置的通过后端读取改为前端（80端口）读取。

下面是对应的后端生成文件链接的代码

// 上传文件到磁盘
file.transferTo(uploadFile);
// 数据库若不存在重复文件，则不删除刚才上传的文件
url = "http://" + serverIp + "/file/" + fileUUID;

补充说明：
alias和root的区别

修改并保存配置文件后，重启nginx，并在阿里云开放80端口，即可访问。