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

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

部署优化

1. idea集成docker

1. 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

2. docker远程端口加密
   点我跳转
   加密参考：https://blog.csdn.net/lovexiaotaozi/article/details/82797236
3. 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协议

1. 下载ssl相关的nginx证书并上传到服务器nginx相关位置
2. 修改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加速。
小知识点：

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

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;'`

主要是这一句

environment:
TZ : ‘Asia/Shanghai’

前端

1. borad改为首页

已完成：仅仅是修改样式，很简单

2. 看板娘

挣扎再三，发现看不太懂代码，缺乏vue项目经验，还是决定搞个demo练练手
本想学这个：

但46小时，认真学的话，怎么说也要2个月，对于一个后端boy，想想还是先不急学那么深，先会看代码，改bug，写基本功能即可，于是捡起来以前没怎么学的课程：

狂神大法好!