基于Spring Boot+Vue的博客系统 22——将博客部署到服务器

向右看齐 2023-06-08 13:56 70阅读 0赞

> 废弃说明：  
> 这个专栏的文章本意是记录笔者第一次搭建博客的过程，文章里里有很多地方的写法都不太恰当，现在已经废弃，关于SpringBoot + Vue 博客系列，笔者重新写了这个系列的文章，不敢说写的好，但是至少思路更加清晰，还在看SpringBoot + Vue 博客系列文章的朋友可以移步：https://blog.csdn.net/li3455277925/category\_10341110.html，文章中有错误的地方或者大家有什么意见或建议都可以评论或者私信交流。

#### linux服务器管理 ####

宝塔面板：

> 宝塔Linux面板是提升运维效率的服务器管理软件，支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。有20个人的专业团队研发及维护，经过200多个版本的迭代，功能全，少出错且足够安全，已获得全球百万用户认可安装。  
> 官网：https://www.bt.cn/

安装宝塔面板作用在于：安装完成之后我们就可以通过浏览器向服务器传输文件，还能一键安装软件，比较方便的进行命令行操作等等。安装步骤参考官方网站。  
安装完成之后访问服务器的8888端口，会出现下面界面：  
![安装完成办他面板][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70]

#### 后端项目打包 ####

修改`application.yml`，因为我们在配置跨域访问的时候用到的是这里的`redriect.uri`，所以这里要修改为服务器地址  
![修改application.yml][application.yml]  
在`pom.xml`中添加`maven`插件

> 注意这里的`<bootclasspath></bootclasspath>`和jdk版本要根据自己电脑上安装的位置进行配置

<build>
        <plugins>
            
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <compilerArguments>
                        <bootclasspath>D:/Program Files/Java/jre1.8.0_131/lib/rt.jar</bootclasspath>
                    </compilerArguments>
                </configuration>
            </plugin>
        </plugins>
    </build>

点击packsge即可将项目打包  
![点击图中package即可进行打包][package]  
然后在项目的`target`目录下会生成一个以`.jar`结尾的文件，打包成功。  
![打包之后的文件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 1]

#### 前端项目的打包 ####

前端需要修改三个地方

1.  将 `/src/request/api/url.js`中的`baseUrl`换成服务器的地址
2.  将`/src/components/page/mainPage.vue`中`created()`生命周期中的URL改为服务器地址  
    ![修改URL][URL]
3.  修改导航栏组件中点击“登录”跳转的URL地址  
    ![修改导航栏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 2]

然后在命令行执行`npm run dev`命令，项目会生成一个dist文件夹存放打包之后文件：  
![dist文件夹][dist]

#### 修改码云应用信息 ####

将我们创建的码云第三方应用的回调地址修改为服务器地址  
![修改码云][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 3]

#### 服务器配置 ####

**安装Ngnix**  
在软件商店搜索nginx，点击下载即可  
![安装ngnix][ngnix]  
**安装`jdk`**  
在首页打开终端  
![打开终端][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 4]  
打开终端之后，我们就可以在终端执行linux命令，先更新应用`yum update`，再安装`jdk`：`yum install java`  
**安装redis**  
运行命令`yum install redis`即可，详细步骤可参考文章：[centos7 yum install redis][]  
**配置Nginx**  
使用宝塔面板可以使我们更加方便的修改配置文件，如下，我们将Nginx监听的端口设为80，将项目的目录设置为`/usr/local/web`  
![修改配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 5]  
然后我们将前端打包好的文件放在`/usr/local/web`文件夹下  
![上传文件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 6]  
再上传后端打包后的项目到`/usr/local/app`文件夹中  
![上传后端打包项目][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 7]  
最后打开终端，进入项目文件夹，运行`java -jar 文件名`即可启动项目。

#### 放行8886端口 ####

首先我们需要在宝塔面板进行放行，点击“安全”，输入需要放行的端口号  
![宝塔面板放行端口][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 8]  
再者我们需要登录服务器控制台（这里演示的服务器为腾讯云的服务器），找到“安全组”，点击修改规则，添加要放行的端口即可。  
![腾讯云放行端口][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 9]  
![端口放行实例][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 10]

这时我们浏览器访问服务器地址，即可打开博客：  
![博客效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 11]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70]: /images/20230531/873506290aab4cd299f4ce844b8d0094.png
[application.yml]: /images/20230531/5c65071a3e03436eb8259493950d6b33.png
[package]: /images/20230531/58be259743ca4a70af5660e744377899.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/211a27377dce42e1b721e7c084203c32.png
[URL]: /images/20230531/c8b8ee91bac149909a2bc79820c95dc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 2]: /images/20230531/8a7c14c5f2f5469da8e97d0ca60a3023.png
[dist]: /images/20230531/65dcdb1a6acc48898be08fbb63e43c1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 3]: /images/20230531/1aef536e042e4c279ad7ca133f9a80fc.png
[ngnix]: /images/20230531/9c099e552c3548ff95112d001eb749bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 4]: /images/20230531/c3a32a6f4a19493bb75ed99f7e08a7c8.png
[centos7 yum install redis]: https://www.cnblogs.com/autohome7390/p/6433956.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 5]: /images/20230531/1f4e3ed1d1e749dcade4f0295fe2bf0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 6]: /images/20230531/14a08383525e4b76bc5f901b3c5c02fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 7]: /images/20230531/d5bb3451fe704555a22ca94e3993f529.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 8]: /images/20230531/072f5ac74d3b4b94a4ab4cb7a5cb64b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 9]: /images/20230531/9be6b7fbe4de41b0b5c547d70072d6e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 10]: /images/20230531/b4b18d259c274e7b925b6987bda89a28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 11]: /images/20230531/4c5b392436f74f7fbdb1dacee12c67b4.png