基于springboot + vue 的个人博客搭建过程（新手村之外的世界依旧充满魅力）

梦魇梦狸º

已于 2023-02-16 09:44:37 修改

阅读量3.7k

点赞数 4

于 2021-11-16 08:57:59 首次发布

本文链接：https://blog.csdn.net/RAXCL/article/details/121348237

版权

个人博客搭建专栏收录该内容

9 篇文章 14 订阅

订阅专栏

本文详细记录了博客项目部署过程，包括IDEA集成Docker、Nginx部署SSL与Vue服务、docker-compose配置优化，涉及跨域、SSL加密、静态资源管理等多个环节。同时分享了遇到的问题及解决方案，如API前缀调整、时区同步等。

摘要由CSDN通过智能技术生成

承接上文：基于springboot + vue 的个人博客搭建过程（上线）
目前博客项目经历重构后并成功上线，接下来记录优化部分

部署优化

1. idea集成docker

docker开启远程端口

# 修改该docker服务文件
vim /lib/systemd/system/docker.service
# 修改ExecStart这行(注释后修改为如下）
ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock

#重新加载配置文件
systemctl daemon-reload
# 重启服务
 
# 查看端口是否开启
netstat -nlpt   #如果找不到netstat命令，需进行安装 yum install net-tools
# curl测试是否生效
curl http://127.0.0.1:2375/info

docker远程端口加密
点我跳转
加密参考：https://blog.csdn.net/lovexiaotaozi/article/details/82797236
idea集成docker
pom.xml相关配置

<plugin>
                <groupId>com.spotify</groupId>
                <artifactId>docker-maven-plugin</artifactId>
                <version>1.0.0</version>

                <configuration>
                    <!--镜像名称 raxcl/blog-api-->
                    <imageName>app</imageName>
                    <!--基础镜像jdk 1.8-->
                    <baseImage>java</baseImage>
                    <!--制作者提供本人信息-->
                    <maintainer>raxcl raxcl@qq.com</maintainer>
                    <!--切换到/ROOT目录-->
                    <workdir>/ROOT</workdir>
                    <cmd>["java", "-version"]</cmd>
                    <entryPoint>["java", "-jar", "${project.build.finalName}.jar","--spring.profiles.active=prod"]</entryPoint>

                    <!--指定Dockerfile路径
                        <dockerDirectory>${project.basedir}/src/main/docker</dockerDirectory>
                    -->
                    <!--指定远程docker api地址-->
                    <dockerHost>https://ip地址:端口号</dockerHost>
                    <dockerCertPath>D:\environment\ca</dockerCertPath>

                    <!--这里是复制jar包到docker容器指定目录配置-->
                    <resources>
                        <resource>
                            <targetPath>/ROOT</targetPath>
                            <!--用于指定需要复制的根目录，${project.build.directory}表示target目录-->
                            <directory>${project.build.directory}</directory>
                            <!--用于指定需要复制的文件。${project.build.finalName}.jar指的是打包后的jar包文件。-->
                            <include>${project.build.finalName}.jar</include>
                        </resource>
                    </resources>
                </configuration>
            </plugin>

到这里已经集成了docker了，可以通过docker：build命令生成镜像了。
现在再将docker：build命令集成到maven中，实现一键部署
maven参数修改
在这里插入图片描述

2. nginx部署ssl协议

下载ssl相关的nginx证书并上传到服务器nginx相关位置
修改nginx中的blog.conf配置

server{
    # 监听端口
    listen  443 ssl;
    # 主机名称/地址
    server_name raxcl.cn www.raxcl.cn;
    index   index.html;
    # https访问
    ssl_certificate	/etc/nginx/ssl/raxcl.cn_bundle.crt;
    ssl_certificate_key	/etc/nginx/ssl/raxcl.cn.key;
    ssl_session_timeout 5m;

主要是监听443端口和写入证书

3. nginx部署两个vue服务

配置文件多写个server(只需改一下对应静态文件地址就可以）：

4. 去掉url末尾/

rewrite ^/(.*)/$ /$1 permanent;

5. 完整配置文件

docker-compose配置文件修改

version: '3'
services:
  nginx:
   image: nginx
   container_name: nginx
   ports:
    - 443:443
   links:
    - app
   depends_on:
    - app
   volumes:
    - /mnt/docker/nginx/:/etc/nginx/
    - /mnt/raxcl/blog_admin:/raxcl/blog_admin
    - /mnt/raxcl/blog_view:/raxcl/blog_view
   network_mode: "bridge"
  app:
    image: app
    container_name: app
    expose:
      - "后端端口"
    network_mode: "bridge"

4.nginx去掉末尾/

gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_vary off;
upstream appstream{
	server app:8090;
}
# http跳转到https
server{
    listen  80;
    server_name raxcl.cn www.raxcl.cn;
  # 旧写法
  # rewrite ^(.*) https://raxcl.cn/$1 permanent;
  # 新写法
    return 301 https://raxcl.cn$request_uri;
}
server{
    listen 80;
    server_name admin.raxcl.cn;
    return 301 https://$host$request_uri;

}
# www二级域名跳转至主域名
server{
    listen  443 ssl;
    server_name www.raxcl.cn;
    # ssl证书
    ssl_certificate     /etc/nginx/ssl/raxcl.cn_bundle.crt;
    ssl_certificate_key /etc/nginx/ssl/raxcl.cn.key;
    return 301 https://raxcl.cn$request_uri;
}

server{
    # 监听端口
    listen  443 ssl;
    # 主机名称/地址
    server_name raxcl.cn;
    index   index.html;
    # ssl证书
    ssl_certificate	/etc/nginx/ssl/raxcl.cn_bundle.crt;
    ssl_certificate_key	/etc/nginx/ssl/raxcl.cn.key;
    ssl_session_timeout 5m;
    # 后端api
     location /RBlog {
        proxy_pass http://appstream;
    }
    # 前端服务
     location / {
        # 去掉末尾/
        rewrite ^/(.*)/$ /$1 permanent;
        root /raxcl/blog_view;
        index index.html;
        # 刷新页面后跳转到当前页面 
        try_files $uri $uri/ /index.html;
     }
    location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
        root /raxcl/blog_view/;
        index index.html;
        add_header Access-Control-Allow-Origin *;
    }
}
server{
    # 监听端口
    listen  443 ssl;
    # 主机名称/地址
    server_name admin.raxcl.cn ;
    index   index.html;
    # 强制https访问
    ssl_certificate     /etc/nginx/ssl/admin.raxcl.cn_bundle.crt;
    ssl_certificate_key /etc/nginx/ssl/admin.raxcl.cn.key;
    ssl_session_timeout 5m;
    # 后端api
     location /RBlog/admin {
     proxy_pass http://appstream;
    }

    # 前端服务
     location / {
        rewrite ^/(.*)/$ /$1 permanent;
        root /raxcl/blog_admin;
        # 刷新页面后跳转到当前页面
        try_files $uri $uri/ /index.html;
        index index.html;
     }
    location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
        root /raxcl/blog_admin/;
        index index.html;
        add_header Access-Control-Allow-Origin *;
    }
}

博客系统bug点

1. 取消添加api前缀跨域配置（不美观）：

**已完成**：将api改为blog，区分前后端应用

2. 博客时间是8小时以前：

**已完成**：数据库时区修复成与宿主机对应

3. nginx跨域配置不生效 :

 **已完成**：重新理解学习nginx

4. 后端管理系统置顶异常

**已完成**： mybatis sql语句写错...这就尴尬

5. 刷新页面后，带参数的url无法识别

vue配置问题，nginx前缀问题
解决过程：[点我](https://blog.csdn.net/RAXCL/article/details/122544557)

博客系统优化项

1. 将ip访问替换为域名访问

暂定：blog.raxcl.cn 和 www.raxcl.cn
已完成：前端域名：raxcl.cn
部署博客后台，暂定域名：admin.raxcl.cn
已完成：管理系统：admin.raxcl.cn

2. 将静态资源部署到github中

为了加快访问速度，部署的时候，可以把图片，js，css等放入七牛云存储中，加快网站访问速度
已完成：利用github做图床，cdn访问

3. 优化博客显示界面

已完成：前端页面从码神之路重构，引入NBlog前端页面（后续继续优化）

4. 关闭多余端口

已完成：关闭不使用的端口，增加安全性（被黑客入侵过，害怕了）

5. 实现springboot项目自动部署

已完成： idea集成docker实现一键打包并生成镜像，并传至服务器（只需在服务器中docker-compose up -d构建即可）

6. 远程主机强迫关闭现有连接

已完成：将redis配置文件的 tcp-keepalive 改为60即可
（还有可能是你公司的网络问题导致，目前还想不出好的办法解决，只能切流量）

7. github主页面优化

已完成：https://github.com/Raxcl （好看了很多）

8. 优化springboot后端项目所有的阿里规范插件给的提示

已完成 ：关于markdown相关提示暂时无法完成，后续能力足够再回头弄弄

9. 将redis中的数据持久化到数据库中

已完成 ：定时任务

10. java定时任务备份mysql数据

已完成 ：跳转链接

11. ip来源：内网ip怎么理解？

已完成 ：未设置nginx请求头，所以获取的ip均为nginx内网ip

# 后端api
     location /RBlog {
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://appstream;
    }

$remote_addr：获取用户的真实ip
$proxy_add_x_forwarded_for：获取用户真实ip和集群ip（推测用于集群搭建）
参考链接

12. 评论数据，可以考虑放入mongodb当中（可以增加图片评论）

13. 实现一键发布各平台博客的骚操作

14. 部署其他小项目（自己写的工具类）

15. 将jdk版本更新到最新（年轻就是要折腾）

已放弃：和多种开源框架不兼容，且jdk18存在问题

16. 更换cdn源（已完成）

由于 cdn.jsdelivr.net 在国内基本凉凉，将相关资源从github图床迁移至腾讯云的cos，并通过腾讯云cdn加速。
小知识点：

jsdelivr上某些零散的资源，比如min.js等等，可以通过cos的回源白嫖到cos中
同步回源存在路径bug，官网说预计明年一月份修复，建议使用异步回源
对于资源路径存在@符号的，会导致回源失败，需用手动下载上传的方式规避@符号

17. 更换live2d api接口（已完成）

由于 fghrsh的live2d_api接口也用到了 cdn.jsdelivr.net,导致访问失败，且等了5个月也没有要维护的意思，无奈只能自己配置（失去了白嫖的快乐）
配置过程对于萌新不太友好，于是新开章节娓娓道来：搭建 live2d api接口详细步骤

18. nginx 时区修改

docker默认是时区不是东八区，会比我们晚8个小时。所以我们修改为上海的时间。
在 docker-compose.yml 添加如下信息

version: '2'
services:
     nginx:
      image: 'nginx:latest'
      restart: always
      container_name: nginx
      ports:
        - '80:80'
        - '8081:8081'
        - '443:443'
      environment:
        TZ : 'Asia/Shanghai'
      volumes:
        - '/app/nginx/conf.d:/etc/nginx/conf.d'
        - '/app/nginx/logs:/etc/nginx/logs'
      command:  nginx -g 'daemon off;'`

主要是这一句