欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 会展 > 使用docker部署springboot、Vue分离项目,部署到主路径

使用docker部署springboot、Vue分离项目,部署到主路径

2025/4/4 5:15:50 来源:https://blog.csdn.net/lwprain/article/details/146527253  浏览:    关键词:使用docker部署springboot、Vue分离项目,部署到主路径

这几天写了一个小的应用,牵涉到了使用docker部署问题,中间遇到了一些小问题,此处记录下,为以后遇到类似的问题提供一些解决思路。
1、准备使用的镜像:mysql、redis、nginx、jdk。
镜像地址:

docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:1.27.3
docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/vulhub/java:8u261-jdk
docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/mysql:8.0.39
docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/redis:6.2.7

具体的mysql、redis的安装不再赘述,见其他相关文章:
常用docker应用部署

2、打包后端的代码为jar文件文件名为:

QualityChecker-0.0.1-SNAPSHOT.jar

3、后端创建镜像及运行:
Dockerfile

FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/vulhub/java:8u261-jdk
RUN mkdir /app
COPY ./QualityChecker-0.0.1-SNAPSHOT.jar /app
RUN export JAVA_HOME=/opt/java
RUN export PATH=.:$PATH:/opt/java/bin
ENV   PATH=/opt/java/bin:$PATH
ENTRYPOINT ["java","-jar","/app/QualityChecker-0.0.1-SNAPSHOT.jar"]

镜像创建:

docker build -t qualitychecker-api:0.1 .

运行:

docker run -p 8086:8086 -d --name web-api qualitychecker-api:0.1

通过地址即可访问,http://ip:8086。
4、前端编译:
yarn的话一般来用:

yarn build

可能需要修改的内容,在工程中的vite.config.js中:
export default defineConfig({
中可能需要增加:

  base: '/', // Add this line for relative paths

之后会得到dist目录,一般来讲就可以把dist进行打包,上传到服务器或者docker所在的服务器,如我这里上传到/myweb/src/QualityChecker
5、前端打包:
可以将dist解包后,放入/myweb/src/QualityChecker中。
因为我想将前端放到web服务器的根路径下,所以用如下的方法:

nginx.conf的内容如下:

# 全局配置块
worker_processes 4;
# 事件配置块
events {worker_connections 1024;
}
http {include       mime.types;default_type  application/octet-stream;access_log /var/log/nginx/access.log;server {listen       80;server_name  localhost;location / {root   /var/www/html;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /api/ {proxy_read_timeout 100s;proxy_pass http://172.20.94.32:8086/;proxy_set_header Host $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;}  }
}

注意:
①172那个地址是我的后端地址。
②/api/和http://172.20.94.32:8086/必须同时使用。
http://172.20.94.32:8086/此处的/代表,要将原始请求的如172.20.94.32:8081/api/user/login改写为172.20.94.32:8086/user/login,也就是要把从最前面开始的地址/api去掉。如果8086/如果不加/,则会原样的转发,反之则会进行截断和替换。

创建Dockerfile

FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:1.27.3-alpine
RUN mkdir -p /myweb/wwwroot
COPY ./dist/ /var/www/html/
COPY ./nginx.conf /etc/nginx/nginx.conf

打包镜像:

docker build -t qualitychecker:0.1 .

运行镜像:

docker run -d -p 8081:80 --name web qualitychecker:0.1

当然要实现自动启动,则要加上参数:

--restart=always

完整的就是:

docker run -d -p 8081:80 --name --restart=always web qualitychecker:0.1

即可。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词