前言
本博客是基于springboot+vue+jwt+redis+mysql实现,参考码神大佬的教程一步搭建的,不过最后部署的网站还没有做文章列表缓存处理的bug解决,后期会进行重新更新部署。目前个人博客网站域名还在备案阶段。
部署完成效果图:
部署前准备
- 云服务器(我的是阿里云 操作系统:ubantu 20.04 配置:2G 2核)
- 阿里云服务器开启端口安全组策略,开放相关的端口
- xshell/xftp/navicat
正式部署
后端项目修改配置打包
<1> WebMvcConfig修改跨域配置
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://个人ip/","null")
.allowedMethods("POST","GET","PUT","OPTIONS","DELETE")
.maxAge(3600)
.allowCredentials(true);
}
<2> resources 新建生产配置文件 application-prod.properties
(docker inspect mysql 或者redis 查看 IPAddress)
#server
server.port= 8888
spring.application.name=mszlu_blog
# 这个要添加和前端的对应api
spring.mvc.servlet.path=/api
# datasource docker中mysql内的ip地址
spring.datasource.url=jdbc:mysql://172.17.0.3:3306/blog?useUnicode=true&characterEncoding=UTF-8&serverTimeZone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#mybatis-plus
#打印日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#标识表的前缀表名
mybatis-plus.global-config.db-config.table-prefix=ms_
#redis的相关配置 docker中redis内的ip地址
spring.redis.host=172.17.0.2
spring.redis.port=6379
# 上传文件总的最大值
spring.servlet.multipart.max-request-size=20MB
# 单个文件的最大值
spring.servlet.multipart.max-file-size=2MB
<3>配置maven相关的打包
blog-api中pom文件添加相关的build插件,不然最后服务器运行jar文件会出现找不到main入口
pom文件添加:
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<executable>true</executable>
</configuration>
</plugin>
</plugins>
</build>
maven打包配置:
打包在target目录生成jar包,修改名称为blog_api.jar
前端项目修改配置打包
<1> 修改config文件中 prod.env.js中配置的ip地址
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API:'"http://个人ip/api/"'
}
<2>运行打包命令 npm run build 生成dist文件
服务器安装配置
<1> 服务器文件目录
<2>ubantu安装docker 开启docker
sudo apt update
sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
使用下面的 curl 导入源仓库的 GPG key:
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
将 Docker APT 软件源添加到你的系统:
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
安装最新版本
sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io
验证docker启动
sudo systemctl status docker
docker启动和关闭 查看镜像 删除镜像
systemctl start docker
systemctl restart docker
systemctl stop docker
docker ps
docker ps -a
docker rm
docker rmi
<3>docker直接拉取java mysql nginx redis5.0.3 非常方便!
docker pull nginx
docker pull redis:5.0.3
docker pull java:8
docker pull mysql
<4>mysql数据库相关配置
我程序使用的是mysql8.0最新版本,直接开启即可,省去了mysql5.7的一些权限的配置,虽然我新建了关于mysql的相关目录,但是没有设置对应的一个映射,正常来讲最好实现对应的映射,保证数据文件的安全性,这样即使容器因为异常删除之后也会保存下来原来的数据
docker开启mysql容器
docker run --name mysql8.0 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root -d mysql
--name 设置容器名称
-p 对应端口映射
-e 设置初始化数据库密码,用户是root
-d 设置后台运行
mysql 为镜像的名称
进入mysql内部命令
docker exec -it mysql bash
mysql -uroot -proot
退出bash:ctrl+p+q
navicat连接远程ip数据库导入blog.sql文件(也可以上传sql文件然后source命令导入也可)
<5>docker 运行redis
docker run -id --name=redis -p 6379:6379 redis:5.0.3
<6>构建dockerfile文件 对应的app镜像
/mnt/docker/app文件夹中导入后端打包好的blog_api.jar
新建blog_dockerfile文件,写入如下命令
(作者名称自己更改 ./是当前目录 --spring.profiles.active=prod 使用prod配置文件 cmd为运行的命令)
FROM java:8
MAINTAINER mszlu <test@mszlu.com>
ADD ./blog_api.jar /app.jar
CMD java -jar /app.jar --spring.profiles.active=prod
在/mnt/docker/app目录运行命令 成功的话会生成images app镜像 docker images可以查看
docker build -f ./blog_dockerfile -t app .
<7>导入前端打包好的dist文件,放入/mnt/mszlu/blog文件夹(里面的文件为下图)
( 需要把index.html和static文件拿出来)
<8> 最后一步使用docker-compose进行服务编排
- 服务编排主要是利用Docker Compose将springboot和nginx分批启动,Springboot就是我们自己打包的项目
- nginx的作用:①将服务器上的静态文件(如HTML、图片)通过HTTP协议展现给客户端。②反向代理服务器,这里nginx代理的就是前端资源客户端本来可以直接通过HTTP协议访问某网站应用服务器,网站管理员可以在中间加上一个Nginx,客户端请求Nginx,Nginx请求应用服务器,然后将结果返回给客户端。加一层代理可以实现负载均衡、虚拟主机等效果。
- 安装docker-compose
# Compose目前已经完全支持Linux、Mac OS和Windows,在我们安装Compose之前,需要先安装Docker。下面我 们以编译好的二进制包方式安装在Linux系统中。
curl -L https://github.com/docker/compose/releases/download/1.22.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
# 设置文件可执行权限
chmod +x /usr/local/bin/docker-compose
# 查看版本信息
docker-compose -version
- 在/mnt/docker/docker-compose创建nginx,并编写docker-compose.yml文件
docker-compose.yml文件内容:(路径对应自己的文件映射即可) bridge是保证app和nginx在同一个网络中
version: '3'
services:
nginx:
image: nginx
container_name: nginx
ports:
- 80:80
- 443:443
links:
- app
depends_on:
- app
volumes:
- /mnt/docker/docker-compose/nginx/:/etc/nginx/
- /mnt/mszlu/web:/mszlu/web
- /mnt/mszlu/blog:/mszlu/blog
network_mode: "bridge"
app:
image: app
container_name: app
expose:
- "8888"
network_mode: "bridge"
nginx目录文件
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;
}
nginx.conf文件(复制即可)
user nginx;
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文件 (更换域名和文件地址)
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_vary off;
upstream appstream{
server app:8888;
}
server{
# 监听端口
listen 80;
# 主机名称/地址
server_name whutxiaobao.top www.whut.xiaobao.top;
index index.html;
# 前端服务
location / {
root /mszlu/blog/;
# 刷新页面后跳转到当前页面
try_files $uri $uri/ /index.html;
index index.html;
}
# 后端api
location /api {
proxy_pass http://appstream;
}
location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
root /mszlu/blog/;
index index.html;
add_header Access-Control-Allow-Origin *;
}
}
部署运行
在 /mnt/docker/docker-compose 下面进行服务编排,实现app 和 nginx的启动 docker-compose up 可以先运行查看日志是否报错
docker-compose up #直接启动
docker-compose up -d #代表后台启动
docker-compose down #停止并删除容器
docker-compose start #启动已有容器
docker-compose stop #停止运行的容器
docker ps 可以查看当前运行的容器(java redis nginx app mysql)
部署的时候问题:
- 执行docker-compose命令出现nginx启动不了
<注意:刚开始的时候我执行命令发现 nginx一直报错启动不了 提示docker-compose启动nginx出现Cannot start service nginx: Cannot link to a non runing nginx>
直接重启服务器就可 - 进入页面会显示403错误,可以检查跨域的设置,以及文件路径的映射是否写错