想要找点什么呢?

青涩知夏

Tomorrow may be cruel, but, I want see

【Plumemo】使用/部署

青涩知夏 · 2020-02-18 · 946 次阅读

本地环境构建

获取所需项目

# 博客后端,基于 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

至此,博客可直接在本地进行访问,并且进行博客的管理,下面的篇幅是介绍博客如何部署到阿里云等服务器的

博客部署

部署博客,需要安装MYSQLNGINX,可以到我博客查看相关安装教程

创建所需文件夹
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

    Reply

    很帅气啊 ,准备用起来, 希望能获得博主帮助