引言:
在搞通了本地的springboot+vue小工具后,就想着把它部署到服务器上。之前一直听闻Docker大名,如今也来膜拜下“Docker大佬”,于是用了centos7服务器安装了Docker,在其基础上去部署小工具。不接触不知道,一接触差点被“坑”惨。于是记录下在部署的过程中遇到的所有问题以及是如何解决的,各位请接着看~
整个部署参考文章:Docker部署SpringBoot+Vue前后端分离项目_docker打包部署springboot前后端项目-CSDN博客
一、部署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服务——手把手教学-CSDN博客
配置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里的默认访问页面)