记一次docker快速构建部署vue3+springboot项目

docker构建vue3前端项目

前端是基于vue3开发typescript项目，打包之后将生成的dist静态资源放到我们准备好的目录下，然后在这个目录下创建一个Dockerfile文件和nginx.conf配置文件，做如下配置：

FROM nginx:1.24.0

WORKDIR /usr/share/nginx/html

COPY dist  /usr/share/nginx/html/

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 8081

# CMD ["nginx", "-g", "daemon off;"]

注意：nginx:1.24.0镜像是我提前准备好的镜像，直接从仓库拉取，你也可以使用你自己的镜像，另外nginx.conf配置文件可以参考我写一份如下：

user  nginx;
worker_processes auto;
pid   /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on; gzip启用压缩，html/js/css压缩后传输会更快


 server {
    listen       8081;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.hmt;

        proxy_set_header host $host;
        proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header X-real-ip $remote_addr;
    }
 }
}

准备好了以上文件3个文件(或文件夹)之后，我们在当前目录执行如下命令来构建我们的前端项目镜像：

docker build -t fot_web:1.0 .

构建好我们的前端项目镜像之后，再执行如下命令来创建我们的容器：

docker run --name x_fot_web -p 8081:8081 -d fot_web:1.0

然后浏览器输入我们的IP地址+端口，发现成功了。

image.png

docker构建java后端项目

后端是基于springboot开发的java项目，打包之后将生成的service.jar打包文件放到我们准备好的目录下，然后在这个目录下创建一个Dockerfile文件并做如下配置：

FROM openjdk:8-jdk-alpine
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
COPY service.jar /app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

注意：openjdk:8-jdk-alpine镜像是我提前准备好的镜像，直接从仓库拉取，你也可以使用你自己的镜像。

准备好了以上文件2个文件之后，我们在当前目录执行如下命令来构建我们的后端项目镜像：

docker build -t fot_server:1.0 .

构建好我们的后端项目镜像之后，再执行如下命令来创建我们的容器：

docker run -d --name x_fot_server -p 8090:8090 fot_server:1.0

然后查看日志 docker logs -f x_fot_server 已经部署成功，不放心的话，依然可以使用浏览器输入我们的IP地址+端口，发现成功了。

20240621231710.jpg