docker部署springboot+vue+mysql之“坑”

原创已于 2024-05-17 10:06:00 修改

· 2.7k 阅读

16 ·

版权

文章标签：

#docker #spring boot #vue.js

于 2024-05-17 09:49:56 首次发布

引言：

在搞通了本地的springboot+vue小工具后，就想着把它部署到服务器上。之前一直听闻Docker大名，如今也来膜拜下“Docker大佬”，于是用了centos7服务器安装了Docker，在其基础上去部署小工具。不接触不知道，一接触差点被“坑”惨。于是记录下在部署的过程中遇到的所有问题以及是如何解决的，各位请接着看~

整个部署参考文章：Docker部署SpringBoot+Vue前后端分离项目_docker打包部署springboot前后端项目-优快云博客

一、部署mysql

特别说明：使用的是DBeaver连接数据库。

1.拉取镜像

docker pull mysql

2.安装mysql

docker run -d \
  --name mysql \
  -p 3306:3306 \
  -e TZ=Asia/Shanghai \
  -e MYSQL_ROOT_PASSWORD=YourPassword \
  mysql

3.启动mysql容器并查看是否成功

# 启动容器
docker start mysql
#查看正在运行的容器
docker ps

踩坑1：DBeaver连接报"Public Key Retrieval is not allowed"

解决：使用DBeaver连接时，将allowPublicKeyRetrieval的值改为TRUE，然后重新连接就可以成功了。

二、部署springboot

1.上传jar和DockerFile到服务器

注意jar包要与DockerFile文件在同一目录下！我的路径是 /home/centos/soft/springboot。

2.拉取openjdk

需要先拉取openjdk镜像才能进行第3步的构建boot镜像操作！！！

docker pull openjdk:8-jdk

3.构建springboot镜像

docker build -f ./DockerFile -t app .

4.创建boot容器

第1个app：镜像名称
第2个app：容器别名

docker run -d -p 9000:9000 --name app app

踩坑2：在构建boot镜像时一直出现错误

ERROR: failed to solve: DeadlineExceeded: DeadlineExceeded: DeadlineExceeded: java:8: failed to resolve source metadata for docker.io/library/java:8: failed to do request: Head "https://dockerg.x/v2/library/java/manifests/8?ns=docker.io": dial tcp x.x.x.x:443: i/o timeout

解决：原因是照着别的教程写的文件内容就一直出现这种错误，所以编写正确以下的DockerFile文件

FROM openjdk:8-jdk

MAINTAINER yarnk

ADD ./Knowledge_Springboot-0.0.1-SNAPSHOT.jar app.jar

CMD java -jar app.jar

注意：FROM 可以只填写REPOSITORY也可以填写REPOSITORY:TAG

三、部署Nginx

安装目的：解决前后端跨域问题

1.拉取镜像

docker pull nginx

2.安装nginx

docker run -d --name nginx -p 80:80 nginx

四、部署Vue

1.打包vue项目

这里不再赘述。

2.上传到服务器

我的路径是 /home/centos/soft/vue。

3.构建镜像

docker build -f ./DockerFile -t app_vue .

4.创建Vue容器

第1个app_vue：镜像名称
第2个app_vue：容器别名

docker run -id -p 3001:80 --name app_vue app_vue

这里的3001为前端访问的端口，80为映射到nginx服务的端口。

踩坑3：vue打包并不会包括vite.config.js（新手哪里知道这个？被坑惨！！）

现象：前后端+数据库都在docker部署运行后，前端进行访问时未进行跨域处理。

解决：参考文档 Docker容器部署前端Vue服务——手把手教学-优快云博客

配置Vue目录下的default.conf和DockerFile，这两个文件和dist在同一目录下，然后重新构建镜像、容器。

vue > default.conf

server {
  listen    80; # 映射的容器端口
  server_name  本机ip; # 修改为docker服务宿主机的ip
  
  # 默认访问页面
  location / {
     root  /usr/share/nginx/html;
     index  index.html index.htm;
  }
  # 跨域访问后端
  location /api/ {
    proxy_pass http://后端服务ip:端口/;
  }
}

vue > DockerFile

FROM nginx

MAINTAINER yarnk

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY ./dist/ /usr/share/nginx/html/

这里思考下，为什么这2个文件要这样写呢？通过观察，个人理解为程序会先执行DockerFile里的内容，然后再执行default.conf的内容，解析：

DockerFile：

RUN：删除原有的default.conf文件
ADD：添加新的default.conf文件到该路径下
COPY：复制跟本文件同一目录下的dist到指定路径下（为了default.conf里的默认访问页面）