springboot vue集成ONLYOFFICE vue springboot整合部署

转载

香奈儿 2024-05-10 14:48:52

文章标签 nginx spring boot vue.js ci html 文章分类 架构后端开发

上篇在服务器中安装好了nginx，也把服务器远优于一个系统改成nginx配置了，接下来就是配置ltblog啦。

SSM架构下只需要部署Tomcat服务器后通过Nginx负载均衡即可。而在SpringBoot中并不需要部署Tomcat，内部已经自带了。所以只需要将其打成jar包后启动，然后交给Nginx进行负载均衡即可，如果是war包还是需要tomcat的。

首先需要在application.properties当中配置端口

server.port=8010

在pom.xml中需要有如下配置

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
        <resources>
            <!--没有写到 resources 目录下的 xml 文件需要以下配置-->
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <!--指定 resources 目录下的哪些文件需要编译-->
            <resource>
                <directory>src/main/resources</directory>
                <!-- excludes和includes二选一使用即可 -->
                <!-- 不包含的文件，支持通配符 -->
                <excludes>
                    <exclude>*.txt</exclude>
                </excludes>
                <!-- 包含的文件，支持通配符 -->
                <includes>
                    <include>*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>

打包springboot项目

直接如下图maven-package 即可打包

springboot vue集成ONLYOFFICE vue springboot整合部署_html

打包在target\ltBlog-0.0.1-SNAPSHOT.jar

springboot vue集成ONLYOFFICE vue springboot整合部署_ci_02

然后利用xftp上传到服务器中，启动

启动命令：

nohup java  -jar /home/java/ltBlog-0.0.1-SNAPSHOT.jar > system.log 2>&1 &

注意/home/java/ltBlog-0.0.1-SNAPSHOT.jar 是jar包在服务器的绝对路径，写相对路径要到jar所在目录执行命令哦

打包vue项目

打包之前记得把后端接口地址改成生产环境哦

在项目目录下执行命令：npm run build

报错了。。v3+vite+element-plus 和之前的vue+webpack好像不太一样，根据报错信息看是图片引入错误，改成绝对路径后继续打包。

springboot vue集成ONLYOFFICE vue springboot整合部署_nginx_03

好吧又报错了。。报错：Preprocessor dependency "sass" not found. Did you install it?

没安装sass？那就安装 cnpn install sass

安装完继续执行打包命令。打包有点小慢，等着吧，然后终于成功了。

springboot vue集成ONLYOFFICE vue springboot整合部署_html_04

打包成功后项目目录下多了一个dist文件夹，将这个文件夹上传到服务器。

而后就是配置nginx，加入下面这些配置即可：

server {
         listen       80;
         server_name  www.zjlovelt.com; #修改为申请证书绑定的域名
         rewrite ^/(.*) https://$server_name$request_uri? permanent;
     }
	 
    server {
        listen       443 ssl;
        server_name  www.zjlovelt.com;
       
        ssl_certificate      cert/775t.com.pem;
        ssl_certificate_key  cert/775t.com.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
		ssl_ciphers  ECDH:AESGCM:HIGH:RSA+3DES:!RC4:!DH:!MD5:!aNULL:!eNULL;
		ssl_prefer_server_ciphers  on;

        location / {
			gzip_static  on;
			if ($request_filename ~* .*\.(?:htm|html)$)
			{    
				add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
			}
			gzip_proxied expired no-cache no-store private auth;
			add_header Access-Control-Allow-Origin *;
			root   /root/staticui/dist;
        }
		
		location /proxyapi {
        proxy_pass http://127.0.0.1:8010/;

    }
    }

最后就是访问www.zjlovelt.com 试试，啊哦，没备案访问不了。那就先备案，不过备案时间有点久。。

springboot vue集成ONLYOFFICE vue springboot整合部署_ci_05

先用zjhuiwan.cn试试吧，把springboot+vue项目在nginx下配置到zjhuiwan.cn。也就是把nginx的两个域名换下，这样主要是试一下是否部署成功，改好配置，刷新nginx配置，然后访问

最后把网站备案下

springboot vue集成ONLYOFFICE vue springboot整合部署_ci_06

备案通过之后。。。

前端可以访问了，但是证书和springboot项目没有配置好。。。

现在是网站已经备案了，所以可以直接用zjlovelt.com访问啦，访问后发现之前的配置还是有问题，前端项目除了首页其他全部404了。

vue项目的路由采用了history模式，部署到nginx服务器后，只能访问首页，其他页面都是404

解决办法：在nginx的nginx.conf 配置文件中加上try_files配置

location / {
			gzip_static  on;
			if ($request_filename ~* .*\.(?:htm|html)$)
			{    
				add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
			}
			gzip_proxied expired no-cache no-store private auth;
			add_header Access-Control-Allow-Origin *;
			root   /root/staticui/dist;
			try_files $uri $uri/ /index.html; # vue-router官网给的解决方案
        }

hash模式下，页面整体可看作单页面，#分隔符后面的路由被分隔，nginx静态服务器默认查找index.html文件并返回；但是使用history模式后，没有#分隔符，比如http://history.test/home与http://history.test#home则完全不同，try_files原理是通过请求的uri去root对应的文件夹里面查找，查找顺序则依次为try_files内部具体内容

前端访问解决了，现在就是请求不到后端接口的问题了。

把配置改成这样就行了。

location /proxyapi/ {
	proxy_pass http://localhost:8010/;
}

然后可以访问了，但是又出现跨域问题，The 'Access-Control-Allow-Origin' header contains multiple values 'https://zjlovelt.com, *', but only one is allowed.

把nginx里的跨域设置去掉就行了，把后端的允许跨域的设置去掉保留nginx里的也行。

这个：add_header Access-Control-Allow-Origin *;

因为后端项目已经配置过了，去掉再访问就ok了。

自此项目就部署好啦~

然后还有就是一些配置，www子域名访问，http直接访问，图片静态资源访问等配置，nginx完整配置:

user  root;
worker_processes  1;

error_log  logs/error.log;

events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    reset_timedout_connection on;
    keepalive_timeout 600;
    client_header_timeout 100;
    client_body_timeout 600;
    send_timeout 600;
	
    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 6;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

    open_file_cache max=100000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;
	
	#http转发为https
     server {
         listen       80;
         server_name  www.zjhuiwan.cn; #修改为申请证书绑定的域名
         rewrite ^/(.*) https://$server_name$request_uri? permanent; 
     }
     server {
         listen       80;
         server_name  www.zjlovelt.com; #修改为申请证书绑定的域名
         rewrite ^/(.*) https://$server_name$request_uri? permanent;
     }
     server {
         listen       80;
         server_name  zjhuiwan.cn; #修改为申请证书绑定的域名
         rewrite ^/(.*) https://$server_name$request_uri? permanent; 
     }
     server {
         listen       80;
         server_name  zjlovelt.com; #修改为申请证书绑定的域名
         rewrite ^/(.*) https://$server_name$request_uri? permanent;
     }
	 
    server {
        listen       443 ssl;
        server_name  www.zjlovelt.com;
       
        ssl_certificate      cert/775t.com.pem;
        ssl_certificate_key  cert/77t.com.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
		ssl_ciphers  ECDH:AESGCM:HIGH:RSA+3DES:!RC4:!DH:!MD5:!aNULL:!eNULL;
		ssl_prefer_server_ciphers  on;

        location / {
			gzip_static  on;
			if ($request_filename ~* .*\.(?:htm|html)$)
			{    
				add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
			}
			gzip_proxied expired no-cache no-store private auth;
			
			root   /root/staticui/dist;
			try_files $uri $uri/ /index.html; # vue-router官网给的解决方案
        }
		
		#配置后端访问
		location /proxyapi/ {
			client_max_body_size    1000m; 
			proxy_pass http://localhost:8010/;

		}
		#配置图片访问路径
		location /blogImg/ { 
				alias   /usr/ltblog/upload/;
			
			}
    }

	server{
			 listen       443 ssl;
			 server_name  www.zjhuiwan.cn; 
			 
			 ssl_certificate   cert/www.zjhuiwan.cn_bundle.pem;
			 ssl_certificate_key  cert/www.zjhuiwan.cn.key;
			 
			ssl_session_cache    shared:SSL:1m;
			ssl_session_timeout  5m;
			ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
			ssl_ciphers  ECDH:AESGCM:HIGH:RSA+3DES:!RC4:!DH:!MD5:!aNULL:!eNULL;
			ssl_prefer_server_ciphers  on;
		
			 location / {
				proxy_connect_timeout  120s;
				proxy_read_timeout     120s;
				proxy_send_timeout     120s;
				proxy_redirect off;
				proxy_set_header Host $host;
				proxy_set_header X-Real-IP $remote_addr;
				proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
				proxy_set_header X-Forwarded-Proto $scheme;
				proxy_set_header auth_token $http_auth_token;
				proxy_set_header access_token $http_access_token;
				proxy_pass http://127.0.0.1:8080/;
				client_max_body_size    1000m; 
			}
			#配置图片访问路径
			location /blogImg/ { 
				alias   /usr/zjblog/upload/;   #图片存放路径
			
			}
	 }

server {
        listen       443 ssl;
        server_name  zjlovelt.com;
       
        ssl_certificate      cert/7755097_zjlovelt.com.pem;
        ssl_certificate_key  cert/7755097_zjlovelt.com.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
		ssl_ciphers  ECDH:AESGCM:HIGH:RSA+3DES:!RC4:!DH:!MD5:!aNULL:!eNULL;
		ssl_prefer_server_ciphers  on;

        location / {
			gzip_static  on;
			if ($request_filename ~* .*\.(?:htm|html)$)
			{    
				add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
			}
			gzip_proxied expired no-cache no-store private auth;
			
			root   /root/staticui/dist;  #vue项目存放路径
			try_files $uri $uri/ /index.html; # vue-router官网给的解决方案
        }
		
		#配置后端访问
		location /proxyapi/ {
			proxy_pass http://localhost:8010/;
			client_max_body_size    1000m; 
		}
		#配置图片访问路径
		location /blogImg/ { 
				alias   /usr/ltblog/upload/;
			
			}
    }

	server{
			 listen       443 ssl;
			 server_name  zjhuiwan.cn; 
			 
			 ssl_certificate   cert/www.zjhuiwan.cn_bundle.pem;
			 ssl_certificate_key  cert/www.zjhuiwan.cn.key;
			 
			ssl_session_cache    shared:SSL:1m;
			ssl_session_timeout  5m;
			ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
			ssl_ciphers  ECDH:AESGCM:HIGH:RSA+3DES:!RC4:!DH:!MD5:!aNULL:!eNULL;
			ssl_prefer_server_ciphers  on;
		    
			 location / {
				proxy_connect_timeout  120s;
				proxy_read_timeout     120s;
				proxy_send_timeout     120s;
				proxy_redirect off;
				proxy_set_header Host $host;
				proxy_set_header X-Real-IP $remote_addr;
				proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
				proxy_set_header X-Forwarded-Proto $scheme;
				proxy_set_header auth_token $http_auth_token;
				proxy_set_header access_token $http_access_token;
				proxy_pass http://127.0.0.1:8080/;
				client_max_body_size    1000m; 
			}
			#配置图片访问路径
			location /blogImg/ { 
				alias   /usr/zjblog/upload/;
			
			}
	 }


}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。