Docker与Nginx协同部署Vue3与SpringBoot项目实践

随着技术的发展，越来越多的项目采用前后端分离的架构，Vue3作为前端框架，SpringBoot作为后端框架，被广大开发者所青睐。而Docker作为一种容器化技术，为应用的部署提供了极大的便利。Nginx作为高性能的HTTP和反向代理服务器，常用于负载均衡和静态资源服务。本文将结合这些技术，介绍如何协同部署Vue3与SpringBoot项目。

一、准备工作

1. 安装Docker：
   确保你的服务器或本地环境已经安装了Docker，并可以正常运行。

2. 准备Vue3和SpringBoot项目：
   确保你的Vue3前端项目和SpringBoot后端项目已经开发完成，并能够独立运行。

二、构建Docker镜像

1. 构建SpringBoot Docker镜像

首先，我们需要为SpringBoot应用构建Docker镜像。在SpringBoot项目的根目录下，创建一个名为Dockerfile的文件，内容如下：

FROM openjdk:8-jdk-alpine
VOLUME /tmp
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT exec java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar

然后，在命令行中执行以下命令构建镜像：

docker build -t your-springboot-app-name:latest .

2. 构建Vue3 Docker镜像

对于Vue3前端项目，我们同样需要构建Docker镜像。在Vue3项目的根目录下，创建另一个Dockerfile，内容如下：

FROM nginx:stable-alpine
COPY dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

确保你的Vue3项目已经通过npm run build命令打包生成了dist目录。然后，执行以下命令构建镜像：

docker build -t your-vue3-app-name:latest .

三、运行Docker容器

1. 运行SpringBoot容器

docker run -d -p 8080:8080 your-springboot-app-name:latest

这里我们将容器的8080端口映射到宿主机的8080端口。

2. 运行Vue3容器

docker run -d -p 80:80 your-vue3-app-name:latest

我们将容器的80端口映射到宿主机的80端口，这样用户就可以直接通过域名或IP访问Vue3前端应用了。

四、配置Nginx反向代理

如果你的前端Vue3应用和后端SpringBoot服务不在同一台服务器上，或者需要通过不同的路径来访问它们，你可以配置Nginx作为反向代理来转发请求。

在Nginx的配置文件（通常是/etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf）中，添加如下配置：

server {
    listen 80;
    server_name your_domain.com;
    location /api/ {
        proxy_pass http://your_backend_server:8080/;
        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;
    }
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

在上面的配置中，/api/路径的请求将被转发到后端SpringBoot服务的8080端口，而其他的请求则直接由Nginx服务静态的Vue3前端页面。

五、总结

通过Docker和Nginx的协同工作，我们可以轻松地部署Vue3前端应用和SpringBoot后端服务。这种部署方式不仅简化了部署流程，还提高了应用的可靠性和可维护性。希望本文能为你提供有益的参考和实践