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

最新推荐文章于 2025-03-07 22:58:28 发布

m0_54883970

最新推荐文章于 2025-03-07 22:58:28 发布

阅读量1.6k

点赞数 1

分类专栏：前端 html 文章标签： spring boot vue.js java

本文链接：https://blog.youkuaiyun.com/m0_54883970/article/details/123394209

版权

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

html

47 篇文章

订阅专栏

本文详细记录了基于SpringBoot和Vue的个人博客项目部署过程，包括IDEA集成Docker、配置Nginx SSL、部署两个Vue服务及安全优化措施，如取消API前缀跨域、使用域名访问和数据持久化等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

部署优化

1. idea集成docker

docker开启远程端口

修改该docker服务文件

vi /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远程端口加密
点我跳转

idea集成docker
pom.xml相关配置

com.spotify docker-maven-plugin 1.0.0

            <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:environmentca</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.youkuaiyun.com/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（推测用于集群搭建）
参考链接