上篇在服务器中安装好了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/;
}
}
}