我的NBlog博客项目部署
说明
NBlog博客来自Naccl的开源项目，Github地址:Naccl
前置知识
Linux的基本指令，docker基本部署原理，nginx代理，云服务器的购买与基本配置
服务器的购买与安全组设置
我的云配置：华为云2核4GiB服务器，带宽2M，操作系统：Centos 7.9
安全组：由于需要通过外部网络访问因此需要开放一些端口，包括：MySql-3306，Redis-3379（MySql以及Redis注意设置密码，特别是Redis，否则可能会被植入挖矿程序），前台访问接口-80，后台访问接口-7777，后端项目api端口-8888，如果要安装Docker可视化工具Portainer可以开放端口号-9000
Docker安装，以及镜像拉取
远程连接云服务器，可以使用Xshell或者直接点击服务器管理界面的远程连接，将以下一连串的命令逐步输入到你的命令窗口中
# 1、yum 包更新到最新
yum update
# 2、安装需要的软件包， yum-util 提供yum-config-manager功能，另外两个是devicemapper驱动依赖的
yum install -y yum-utils device-mapper-persistent-data lvm2
# 3、 设置yum源
yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
# 4、 安装docker，出现输入的界面都按 y
yum install -y docker-ce
# 5、 查看docker版本，验证是否验证成功
docker -v
#启动docker
/bin/systemctl start docker.service
#设置开机自动启动docker
systemctl enable docker
镜像的拉取
docker pull nginx
docker pull redis:6.0.8
docker pull java:8
docker pull mysql:5.7
docker pull portainer/portainer
Docker安装可视化工具Portainer
Portainer可视化工具能够快速实现Docker容器的重启与删除，特别在后续Nginx调试配置文件时十分方便
docker run -d -p 8000:8000 -p 9000:9000 --name portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer
Docker安装MySql
构建一个docker来配置MySQL；并将mysql数据文件布置到服务器中，因此需要在服务器中创建文件夹以实现MySql容器卷的挂载
#创建MySql挂载目录并进入
mkdir -p /mnt/docker/mysql
cd /mnt/docker/mysql
运行MySql镜像创建容器
docker run -id -p 3306:3306 --name=mysql -v /mnt/docker/mysql/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=你的MySql密码 mysql:5.7
要进入容器并开放权限,防止后续后端服务连接数据库出错
#进入容器
docker exec -it mysql bash
#进入容器，输入密码并回车确认。（界面上显示空白，但其实密码已经输入了，按回车键确定。）
mysql -uroot -p
#设置权限，
show databases;
use mysql;
show tables;
#执行下面两句时会爆出如下错误--ERROR 1062 (23000): Duplicate entry '%-root' for key 'PRIMARY'；可以不用去管它直接继续执行
update user set host ='%'where user ='root';
update user set host ='%'where user ='root' and host='localhost';
grant all privileges on *.* to root@'%' identified by 'root' with grant option;
flush privileges;
#退出MySql客户端
exit
#退出MySql容器
exit
环境无误后我们需要导入我们的数据库文件nblog.sql，该文件在blog-api路径下
上面提到，我们已经将服务器/mnt/docker/mysql/data目录和docker容器的/var/lib/mysql地址之间实现了映射，因此，我们如果将nblog.sql文件导入宿主机的该目录下，nblog.sql同样也会出现在docker的对应目录下，具体操作如下：
#进入目录
cd /mnt/docker/mysql/data
#上传文件，也可以用Xftp直接拖拽上传
rz
接下来在docker中执行该sql
#进入MySql容器
docker exec -it mysql bash
#输入密码，进入docker中的数据库
mysql -uroot -p
#创建数据库
create database nblog;
#退出回到容器
exit
#将文件导入数据库
mysql -uroot -p nblog < nblog.sql;
#切换数据库
use nblog;
#执行sql并保存数据库
source nblog.sql;
#结果检查
use nblog; show tables;
检查结果如下说明数据库配置成功
Docker安装Redis
Docker安装Redis很简单，如果不需要把Redis的数据持久化直接执行下面语句就可以
docker run -id --name=redis -p 6379:6379 redis:6.0.8 --requirepass "你的Redis密码"
Dockerfile构建后端镜像
诸如MySQL ,redis的镜像我们可以直接拉取，但后端项目的镜像需要我们自己打包，构建
打包前，请修改后端的配置文件-application.properties
#后端服务端口号
server.port=8888
blog.name=test-Blog
blog.api=http://localhost:${server.port}
# 后台管理URL
blog.cms=http://localhost:7777
# 前台界面URL
blog.view=http://localhost:80
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#将localhost改为服务器的公网IP
spring.datasource.url=jdbc:mysql://localhost:3306/nblog?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=你的MySql密码
#将localhost改为服务器的公网IP
spring.redis.host=localhost
spring.redis.password=你的Redis密码
spring.redis.port=6379
spring.redis.database=0
spring.redis.timeout=10000ms
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.configuration.map-underscore-to-camel-case=true
logging.level.root=info
logging.level.top.naccl=debug
logging.file=blog-api/log/blog-dev
# 1000 * 60 * 60 * 24 * 3 三天
token.expireTime=259200000
# 生产环境务必修改此配置，否则无法保证token安全性
token.secretKey=abcdefghigklmnopqrseuvexyz
# 博主接收评论提醒方式: Telegram=tg 邮箱=mail (访客评论提醒固定为邮箱方式)
comment.notify.channel=mail
# 新评论是否默认公开
comment.default-open=true
# 如果选择邮箱提醒方式，则会在收到评论后向填写的邮箱自身发送一封邮件(提醒自己)；如果选择tg，则填写的邮箱只作为提醒访客的发送方
# 阿里云邮箱，port=25在Windows系统下有效，Linux系统需要改为465并将下面两行取消注释，其它邮箱服务商配置参考关键字"spring mail 服务器"
# spring.mail.properties.mail.smtp.socketFactory.port=465
# spring.mail.properties.mail.smtp.ssl.enable=true
spring.mail.host=smtp.aliyun.com
spring.mail.port=25
spring.mail.username=你的阿里云邮箱地址
spring.mail.password=你的阿里云邮箱密码
# 如果选择邮箱提醒方式，以下可以无需修改
tg.bot.api=https://api.telegram.org/bot
# bot的token，可以从 @BotFather 处获取
tg.bot.token=1234567890:qwertyuiopasdfghjklzxcvbnm
# 自己账号和bot的聊天会话id
tg.bot.chat-id=1234567890
# 是否使用代理
tg.bot.use-proxy=false
# 是否使用反向代理
tg.bot.use-reverse-proxy=true
# 反向代理URL，请自行搭建，示例API随时可能关闭
tg.bot.reverse-proxy-url=https://tg-api-open.naccl.workers.dev
# 代理配置，如不使用无需修改 (目前用于发送Telegram请求)
http.proxy.server.host=127.0.0.1
http.proxy.server.port=7890
http.proxy.server.timeout=10000
# 评论中QQ头像存储方式: 本地:local GitHub:github
upload.channel=github
# 静态文件上传访问路径 Windows环境例如: C:/Users/nblog/Desktop/upload/ Linux环境例如：/home/nblog/upload/
upload.file.path=/home/nblog/upload/
upload.file.access-path=/image/**
upload.file.resources-locations=file:${upload.file.path}
# 如果选择本地上传方式，以下可以无需修改
# GitHub token 教程见 https://naccl.github.io/PictureHosting/#/pictureHosting/help
upload.github.token=ghp_***************************
upload.github.username=你的GitHub账户名
# 需要用作图床的GitHub仓库名
upload.github.repos=static-resources
# 需要上传至仓库的路径 开头需要"/" 结尾不要"/"
upload.github.repos-path=/image
为了区分前台与后台，在所有的后台Controller层加入注释@RequestMapping(“/api”)
需要加入注释的Controller层
打包后的jar包所在位置
将jar包上传至服务器指定文件夹
#创建文件夹
mkdir /mnt/docker/app
#进入文件夹
cd /mnt/docker/app
#将后端jar包上传至当前目录下，并将名字修改为blog_api.jar
rz
mv blog-api-0.0.1.jar blog_api.jar
将blog_api.jar打包为镜像
#新建blog_dockerfile文件
touch blog_dockerfile
#使用vim编译器修改blog_dockerfile文件
vim blog_dockerfile
#将以下内容粘贴进blog_dockerfile即可（个人参数自己修改一下）
FROM java:8
MAINTAINER zhangshidi <zhangshidi@qq.com>
ADD ./blog_api.jar /app.jar
CMD java -jar /app.jar
#使用下面命令查看app镜像是否创建成功
docker images
创建app镜像对应的容器
#执行下面的命令
docker run -id --name=app -p 8888:8888 app
把前端文件上传到服务器中
首先下载并安装HbuilderX,将前端项目导入
上传前需要修改前端文件中的请求后端地址，将/blog-view/src/plugins/axios.js和/blog-cms/src/util/request.js中的baseUrl修改为你的后端 API 地址
//blog-cms/src/util/request.js中的修改如下
const request = axios.create({
baseURL: 'http://你的服务器公网IP:8888/admin/',
timeout: 5000
})
//blog-view/src/plugins/axios.js中的修改如下
const request = axios.create({
baseURL: 'http://你的服务器公网IP:8888/api/',
timeout: 10000,
})
使用HbuilderX打包前端项目
运行npm run builder分别将前端前台以及后台文件打包，打包后的文件将在dist文件夹下
进入dist文件夹将文件夹下所有文件打成一个tar包
前台文件打包结果
后台文件打包结果
在服务器上创建前端文件目录，并将打包后的前端文件上传、解压
#创建前端文件夹
mkdir /mnt/nblog/
#进入前端文件夹下
cd /mnt/nblog/
#创建前台文件夹
mkdir blog
#创建后台文件夹
mkdir admin
#进入前台文件夹
cd blog
#将前台dist.tar包上传至当前目录下
rz
#解压
tar -xvf dist.tar
#进入后台文件夹
cd ../admin
#将后台dist.tar包上传至当前目录下
rz
#解压
tar -xvf dist.tar
解压后的前台目录结构
解压后的后台目录结构
Docker安装Nginx
配置nginx的文件目录以及内部的相关配置文件
#创建nginx挂载目录
mkdir -p /mnt/docker/docker-compose/nginx
#进入目录
cd /mnt/docker/docker-compose/nginx
#创建并修改文件
touch nginx.conf
vim nginx.conf
将下面内容复制进nginx.conf
user root;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
新建conf.d文件夹，然后新建blog.conf文件
mkdir conf.d
cd conf.d
touch blog.conf
vim blog.conf
将下面内容复制进blog.conf
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_vary off;
server{
# 监听端口
listen 80;
# 主机名称/地址
server_name localhost;
index index.html;
# 前端服务
location / {
root /nblog/blog/;
# 刷新页面后跳转到当前页面
try_files $uri $uri/ /index.html;
index index.html;
}
}
server{
# 监听端口
listen 7777;
# 主机名称/地址
server_name localhost;
index index.html;
# 前端服务
location / {
root /nblog/admin/;
# 刷新页面后跳转到当前页面
try_files $uri $uri/ /index.html;
index index.html;
}
}
创建mime.types文件
cd /mnt/docker/docker-compose/nginx
touch mime.types
vim mime.types
将下面的内容复制进去
types {
text/html html htm shtml;
text/css css;
text/xml xml;
image/gif gif;
image/jpeg jpeg jpg;
application/javascript js;
application/atom+xml atom;
application/rss+xml rss;
text/mathml mml;
text/plain txt;
text/vnd.sun.j2me.app-descriptor jad;
text/vnd.wap.wml wml;
text/x-component htc;
image/png png;
image/svg+xml svg svgz;
image/tiff tif tiff;
image/vnd.wap.wbmp wbmp;
image/webp webp;
image/x-icon ico;
image/x-jng jng;
image/x-ms-bmp bmp;
font/woff woff;
font/woff2 woff2;
application/java-archive jar war ear;
application/json json;
application/mac-binhex40 hqx;
application/msword doc;
application/pdf pdf;
application/postscript ps eps ai;
application/rtf rtf;
application/vnd.apple.mpegurl m3u8;
application/vnd.google-earth.kml+xml kml;
application/vnd.google-earth.kmz kmz;
application/vnd.ms-excel xls;
application/vnd.ms-fontobject eot;
application/vnd.ms-powerpoint ppt;
application/vnd.oasis.opendocument.graphics odg;
application/vnd.oasis.opendocument.presentation odp;
application/vnd.oasis.opendocument.spreadsheet ods;
application/vnd.oasis.opendocument.text odt;
application/vnd.openxmlformats-officedocument.presentationml.presentation
pptx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
xlsx;
application/vnd.openxmlformats-officedocument.wordprocessingml.document
docx;
application/vnd.wap.wmlc wmlc;
application/x-7z-compressed 7z;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/xhtml+xml xhtml;
application/xspf+xml xspf;
application/zip zip;
application/octet-stream bin exe dll;
application/octet-stream deb;
application/octet-stream dmg;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/midi mid midi kar;
audio/mpeg mp3;
audio/ogg ogg;
audio/x-m4a m4a;
audio/x-realaudio ra;
video/3gpp 3gpp 3gp;
video/mp2t ts;
video/mp4 mp4;
video/mpeg mpeg mpg;
video/quicktime mov;
video/webm webm;
video/x-flv flv;
video/x-m4v m4v;
video/x-mng mng;
video/x-ms-asf asx asf;
video/x-ms-wmv wmv;
video/x-msvideo avi;
}
Docker创建Nginx容器
docker run -id --name=nginx -p 80:80 -p 443:443 -p 7777:7777-v /mnt/docker/docker-compose/nginx/:/etc/nginx/ -v /mnt/nblog/admin:/nblog/admin -v /mnt/nblog/blog:/nblog/blog nginx
项目部署完成，验证项目是否正常运行
地址栏输入服务器公网IP,进入前台页面
地址栏输入服务器公网IP:7777，进入后台页面
评论区