本地环境构建
获取所需项目
# 博客后端,基于 SpringBoot 的 JAVA 项目
git clone https://github.com/byteblogs168/hello-blog
# 博客后台管理系统,用于管理博客内容
git clone https://github.com/byteblogs168/hello-blog-admin
# 博客前端 - 有多个主题,目前只有 sakura 主题比较好看,作者是白小纯
git clone https://github.com/byteblogs168/theme-react-sakura
导入项目
导入后端项目
- 由于博客后端有自动建表的功能,所以只需要提前准备好数据库即可,在
MYSQL
中执行如下语句
CREATE DATABASE `plumemo` CHARACTER SET utf8mb4;
- 修改项目配置文件
配置文件是
src/main/resources/application.yaml
spring:
profiles:
active: dev
datasource:
name: plumemo
# 配置数据库连接地址
url: jdbc:mysql://127.0.0.1:3306/plumemo?useSSL=false&characterEncoding=utf8
# 连接数据库的账号
username: root
# 连接数据库的密码
password: root
- 启动项目(本地预览)
- 找到
/src/main/java/com/byteblogs/PlumemoApplication
直接启动main
- 浏览器直接输入
localhost:8086
404
了不要慌,这是正常的,服务有前缀
- 确定服务器能够访问后,先放一边,切换到前端
- 找到
博客前端
需要安装
npm
或者yarn
- 修改
package.json
- 本地环境下为
localhost:8086
,部署时修改为服务器对应的IP
或者域名
- 本地环境下为
"proxy": "http://localhost:8086/"
- 修改
/src/lib/axios.js
中配置的默认前缀
axios.defaults.baseURL = '/api/plumemo-service';
- 启动项目
# 没有安装 yarn 的可以先安装 npm 之后执行 npm i yarn -g
# 进入到 博客前端 的路径,安装所需要的依赖
yarn install
# 启动
yarn start
博客后台管理系统
# 安装依赖
npm install
# 直接启动
vue-cli-service serve
至此,博客可直接在本地进行访问,并且进行博客的管理,下面的篇幅是介绍博客如何部署到阿里云等服务器的
博客部署
部署博客,需要安装
MYSQL
、NGINX
,可以到我博客查看相关安装教程
创建所需文件夹
cd /usr/local
# 存放后台管理系统
mkdir -p blog/admin
# 存放前端页面
mkdir -p blog/front
# 存放后端打包后的 jar 文件以及启动脚本
mkdir -p blog/jar
部署博客后端
- 打包后端服务,将根目录中的
target/plumemo-v1.2.0.jar
上传到服务器的/usr/local/blog/jar
# 博客后端采用 maven 进行项目管理,所以可以方便的使用 maven 将其打包为 *.jar
# 本地没有安装 MAVEN 的,可以百度 IDEA 打包 MAVEN 项目
# 进入到 plumemo-master,执行以下命令
mvn clean package -Dmaven.test.skip=true
- 启动后端服务
nohup java -jar plumemo-v1.2.0.jar >catalina.out 2>&1 &16
部署博客前端
- 修改
package.json
- 本地环境下为
localhost:8086
,部署时修改为服务器对应的IP
或者域名
- 本地环境下为
"proxy": "https://www.nosum.cn/"
- 修改
/src/lib/axios.js
中配置的默认前缀
axios.defaults.baseURL = '/api/blog';
- 编译完成后,会出现一个
build
文件夹,保存起来,之后需要上传到服务器
# 使用 yarn build / npm build 直接进行打包
# 进入到 theme-react-sakura-master, 执行以下命令
yarn build
部署后台管理
- 编译完成后,会出现一个
dist
文件夹,保存起来,之后需要上传到服务器
# 使用 yarn build / npm build 直接进行打包
# 进入到 plumemo-admin-master, 执行以下命令
yarn build
配置 NGINX
vim /usr/local/nginx/conf/nginx.conf
server {
listen 80;
location / {
root /usr/local/blog/front;
index index.html index.htm;
try_files $uri $uri/ /index.html;
} # 配置前端访问地址
location /admin {
root /usr/local/blog;
index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
} # 配置后端访问地址
location ^~ /api/blog {
index index.html index.htm index.php;
index proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
index proxy_set_header Host $host;
index proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://localhost:8086/api/plumemo-service; #后端服务器,配置upstream即可
}
}
- 管理后台中,需要记录访问者的
IP
地址,则需要增加以下配置
# 在http{}中,server{}之上加入如下内容
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-For $http_x_forwarded_for;
proxy_headers_hash_max_size 1024;
proxy_headers_hash_bucket_size 128;
至此,博客已经部署完成了,可以直接通过自己服务器的
IP/域名
进行访问,通过管理后台,进行博客的管理
转载需注明
文章由 青涩知夏 编辑,转载请注明出处
Comments | 1 条评论
gogov5
2020-03-13 | 2020-03-13
很帅气啊 ,准备用起来, 希望能获得博主帮助