IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> Java知识库 -> Springboot+vue从零开始做网站13-前后端项目部署到服务器 -> 正文阅读

[Java知识库]Springboot+vue从零开始做网站13-前后端项目部署到服务器

上篇在服务器中安装好了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 即可打包

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

然后利用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好像不太一样,根据报错信息看是图片引入错误,改成绝对路径后继续打包。

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

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

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

打包成功后项目目录下多了一个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?试试,啊哦,没备案访问不了。那就先备案,不过备案时间有点久。。

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

最后把网站备案下

备案通过之后。。。

前端可以访问了,但是证书和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/;
			
			}
	 }


}

?

?

?

  Java知识库 最新文章
计算距离春节还有多长时间
系统开发系列 之WebService(spring框架+ma
springBoot+Cache(自定义有效时间配置)
SpringBoot整合mybatis实现增删改查、分页查
spring教程
SpringBoot+Vue实现美食交流网站的设计与实
虚拟机内存结构以及虚拟机中销毁和新建对象
SpringMVC---原理
小李同学: Java如何按多个字段分组
打印票据--java
上一篇文章      下一篇文章      查看所有文章
加:2022-06-08 18:52:54  更:2022-06-08 18:55:07 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 18:59:44-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码