ubantu20.04使用docker部署前后端分离个人博客项目(springboot+vue+mysql+redis)
前言
本博客是基于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错误，可以检查跨域的设置，以及文件路径的映射是否写错
终于搭建完成了自己的第一个个人博客，从创建到部署完成，目前正在备案，后续会上传域名，感谢码神的教程，以及最后部署过程中浙大大佬的指点！感谢关注！
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
