【Plumemo】使用/部署

本地环境构建

获取所需项目

# 博客后端,基于 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/域名进行访问，通过管理后台，进行博客的管理

转载需注明

文章由 青涩知夏 编辑，转载请注明出处