docker部署springboot+vue前后端分离项目

本文主要介绍使用docker部署springboot+vue前后端分离项目（单节点环境，非集群），涉及其他的中间件有redis，es及nginx。
前提条件：需要Linux服务器且已安装了docker，开放所需的端口。本文以VMware Workstation Pro创建的虚拟机环境Centos为例，主要有以下五部分内容。

一、Mysql数据库

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

二、Redis（项目未涉及则非必选）

1、拉镜像

docker pull redis

2、创建Redis容器并设置密码

docker run -d --name redis -p 6379:6379 redis --requirepass "xxxxxx"

三、Es（elasticsearch）（项目未涉及则非必选）

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

四、Java（部署后端）

1、拉取JDK

docker pull openjdk:8-jdk-alpine

2、新建目录
net用户在/home/net目录下建立wp目录，里面建backend放jar包和dockerfile

/home/net/wp/backend  

3、上传jar包 (以某开源网盘项目为例)

配置修改：

• 如果已打包则进入jar包中的目录demo.jar\BOOT-INF\classes\config\进行修改，否则可以使用IDEA打开项目修改配置后再自行打包成jar包。
• 以prod环境为例，在application-prod.properties文件中批量查找修改替换ip为服务器IP保存，建议修改application-prod.properties文件里面的上传工具可通过xftp或者其他工具。

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）

五、Nginx（前端web）

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