本文主要介绍使用docker部署springboot+vue前后端分离项目(单节点环境,非集群),涉及其他的中间件有redis,es及nginx。
前提条件:需要Linux服务器且已安装了docker,开放所需的端口。本文以VMware Workstation Pro创建的虚拟机环境Centos为例,主要有以下五部分内容。
1、拉取mysql5.7
docker pull mysql:5.7
2、创建相应目录
mkdir -p /opt/mysql/{data,logs,conf}
chmod 777 /opt/mysql/logs -R
3、创建配置文件(文件内容已放最下面,直接复制即可)
vim /opt/mysql/conf/mysql.cnf
[mysqld]
#
# Remove leading # and set to the amount of RAM for the most important data
# cache in MySQL. Start at 70% of total RAM for dedicated server, else 10%.
# innodb_buffer_pool_size = 128M
#
# Remove leading # to turn on a very important data integrity option: logging
# changes to the binary log between backups.
# log_bin
#
# Remove leading # to set options mainly useful for reporting servers.
# The server defaults are faster for transactions and fast SELECTs.
# Adjust sizes as needed, experiment to find the optimal values.
# join_buffer_size = 128M
# sort_buffer_size = 2M
# read_rnd_buffer_size = 2M
datadir=/var/lib/mysql
socket=/var/lib/mysql/mysql.sock
# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0
lower_case_table_names=1
4、运行容器
docker run -d --name="mysql" -p3306:3306 -v /opt/mysql/conf/:/etc/mysql/conf.d -v /opt/mysql/data:/var/lib/mysql -v /opt/mysql/logs:/var/log -e MYSQL_ROOT_PASSWORD="xxxxxx" mysql:5.7
(注意: 密码可修改,对应的后端配置也要改,端口也一样)
5、进入容器内部修改root登录权限
docker exec -it mysql bash
mysql -h 127.0.0.1 -P 3306 -u root -uroot -p'xxxxxx'
mysql> grant all privileges on *.* to 'root'@'%' identified by 'xxxxxx';
mysql> flush privileges;
设置自动启动:使用以下命令将MySQL容器设置为自动启动:
docker update --restart=always mysql
1、拉镜像
docker pull redis
2、创建Redis容器并设置密码
docker run -d --name redis -p 6379:6379 redis --requirepass "xxxxxx"
1、下载镜像
docker pull elasticsearch:7.14.1
2、创建持久化目录
(/home/net目录可自己更换)
mkdir -p /home/net/es/elasticsearch
cd /home/net/es/elasticsearch
mkdir data
mkdir logs
3、运行容器
节点探测类型(discovery.type)设置为 single-node 表示不开启集群模式
docker run -d --name=es --restart=always -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" -v /home/net/es/elasticsearch/data:/usr/share/elasticsearch/data -v /home/net/es/elasticsearch/logs:/usr/share/elasticsearch/logs elasticsearch:7.14.1
1、拉取JDK
docker pull openjdk:8-jdk-alpine
2、新建目录
net用户在/home/net目录下建立wp目录,里面建backend放jar包和dockerfile
/home/net/wp/backend
3、上传jar包 (以某开源网盘项目为例)
配置修改:
4、修改Dockerfile内容
vi Dockerfile,将下面内容复制进去保存退出。
Dockerfile内容:
# 基础镜像使用java
FROM openjdk:8-jdk-alpine
# 安装时区信息
RUN apk add --no-cache tzdata
# 设置时区为Asia/Shanghai
ENV TZ=Asia/Shanghai
#RUN /bin/cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo "Asia/Shanghai" > /etc/timezone
# /static/upload/路径为文件上传地址,到时候与宿主机关联
VOLUME /static/upload/
# 将jar包添加到容器中并更名为wp.jar
ADD demo.jar wp.jar
# 运行jar包
ENTRYPOINT ["java","-Dspring.profiles.active=prod","-jar","/wp.jar"]
(注意“-Dspring.profiles.active=prod”为要激活的配置文件,可以是test,dev,看你之前改的是哪个文件,之前如果改的application-prod.properties这里就不用修改。)
5、打包镜像
docker build -t wp .
(wp为自定义镜像名)
6、运行
docker run -d -p 8080:8080 -v /home/net/wpUpload:/static/upload/ -t --name wp wp --restart=always
(注意:/home/net/wpUpload 为宿主机目录,没有就新建,作为挂载 8080端口可以修改,改了的话前端后端配置也要改)
docker logs -f wp
命令查看启动运行日志
第一次运行需要执行mysql脚本初始化数据(使用Navicat或dbeaver)
1、拉镜像
docker pull nginx
2、运行镜像
docker run -d --name nginx -p 80:80 -p 443:443 nginx
3、复制文件
若没有权限则切换root用户
先在宿主机创建文件夹 /usr/nginx/
mkdir /usr/nginx
复制配置文件到宿主机目录
docker cp nginx:/etc/nginx/nginx.conf /usr/nginx/
docker cp nginx:/etc/nginx/conf.d /usr/nginx/conf/
docker cp nginx:/usr/share/nginx/html /usr/nginx/html
docker cp nginx:/var/log/nginx/ /usr/nginx/logs/
4、停止运行并删除容器 重新启动并映射文件
docker stop nginx
docker rm nginx
重新运行
docker run -p 9090:80 --name nginx -v /usr/nginx/nginx.conf:/etc/nginx/nginx.conf -v /usr/nginx/conf/conf.d:/etc/nginx/conf.d -v /usr/nginx/logs:/var/log/nginx -v /usr/nginx/html:/usr/share/nginx/html --restart=always -d nginx
9090为前端页面访问地址,可以自行修改。
修改nginx.conf中的配置 api 中的 proxy_pass配置为后端服务器地址
server {
listen 80;
server_name _;
# 前端接口axios.defaults.baseURL=/api
location /api/{
# 配置此处用于获取客户端的真实IP
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://192.168.10.100:8080/; #修改为服务器的ip
}
#error_page 404 /404.html;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
5、将打包的dist前端文件放到html目录下重启nginx即可本地打包vue项目生成dist文件夹。
npm run build
将dist文件夹里面的内容上传到nginx的html目录
(注意目录结构)
重启nginx
docker restart nginx
访问前端页面:192.168.10.100:9090