SpringBoot、Vue项目部署到Docker

已于 2023-06-09 17:11:06 修改
阅读量864 收藏
点赞数 1
文章标签： spring boot vue.js docker
于 2023-06-09 17:10:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42058138/article/details/131131169
版权

SpringBoot、Vue项目部署到Docker

点击查看直接部署到服务器版

前置情景

Windows下使用IDEA开发SpringBoot项目、VSCode开发前端项目。

部署后端：通过开放Ubuntu服务器上Docker的2375端口让IDEA将Spring Boot项目直接远程部署到Ubuntu的Docker中。

部署前端：前端项目通过在Ubuntu中拉取nginx镜像开启容器，再把Ubuntu中打包好的前端Vue文件映射到Docker容器部署。

本文中，前端请求到后端的url地址会加上前缀 /api，举例：

前端向后端请求：

axios.post('/api/operationsummary/sysuser/getIdListByName')

在这里插入图片描述

后端实际的请求格式：

/operationsummary/sysuser/getIdListByName

在这里插入图片描述

后续会利用前端增加的 /api/ 在nginx做代理，使得前端可以跟后端通信。

Ubuntu安装Docker

我们使用官方安装脚本自动安装。输入命令：

curl -fsSL https://test.docker.com -o test-docker.sh

当前目录会出现一个叫 test-docker.sh 的脚本文件。

输入 sudo sh test-docker.sh 运行脚本。等待自动下载安装完成。可以输入 docker images 命令观察是否安装成功。

在这里插入图片描述

至此，docker安装完成。

Docker上部署Spring Boot

阿里云镜像加速

安装前先把镜像加速器配置一下，详情看阿里云：https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors

在这里插入图片描述

安装JDK

docker pull primetoninc/jdk:1.8

启动jdk容器，容器名为jdk1.8

docker run -it --name jdk1.8 -d primetoninc/jdk:1.8

运行成功。

在这里插入图片描述

安装Mysql（非必须，看你后端具体配置）

docker pull mysql:5.7.27
docker run -itd --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=服务器MySQL密码 mysql:5.7.27

在这里插入图片描述

安装成功。

开放远程Docker端口

注意：此教程使用不加密端口远程连接，在公网上的服务器可能会因此被植入挖矿病毒，此操作有一定风险。若被植入病毒，使用docker命令把挖矿镜像、容器停止删除即可。部署后端项目完成后及时配置关闭远程连接docker。

  1. 打开 /usr/lib/systemd/system/docker.service

在这里插入图片描述

  1. 把原有的 ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock 注释掉，在下面改成 ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock

    ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock

ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock

在这里插入图片描述

  1. 刷新配置，重启docker

    systemctl daemon-reload
systemctl restart docker

IDEA下载Docker插件

在IDEA里面打开 File -> Settings -> Plugins，安装Docker。

在这里插入图片描述

安装后重启IDEA。打开 File -> Settings -> Build, Execution, Deployment -> Docker ，点击左上方的加号。选择 TCP socket ，Engine API URL 填写自己服务器的IP

在这里插入图片描述

创建Dockerfile

然后在Springboot项目根目录下创建 Dockerfile ，填入如下内容：

# 基础镜像，使用阿里云服务器中的jdk容器
FROM primetoninc/jdk:1.8

#系统编码
ENV LANG=C.UTF-8 LC_ALL=C.UTF-8

#声明一个挂载点，容器内此路径会对应宿主机的某个文件夹
VOLUME /tmp

#应用构建成功后的jar文件被复制到镜像内，***.jar为target目录下你jar文件的名字
ADD target/***.jar ***.jar

#启动容器时的进程
ENTRYPOINT ["java","-jar","/breakdown_backend.jar"]

#暴露端口 此处应是SpringBoot端口
EXPOSE 12345

注意：Dockerfile文件中有一句命令 ADD target/***.jar ***.jar ，意思是把target文件夹下的jar包打包部署到服务器中，所以在后续的学习中，如果想要把springboot项目部署到Docker中，更新代码后必须先执行 mvn clean package ，把jar包打包到target目录下，才可以把代码顺利更新到docker中！

IDEA中配置Docker

然后再IDEA的启动项中配置

在这里插入图片描述

在这里插入图片描述

在server处选择刚刚配置好的Docker服务器，Bind ports处不要绑定服务器ip，让其空着。

在这里插入图片描述

选中刚刚配置的Dockerfile启动项目。点击前要先执行mvn clean package命令！把jar包打到/target目录下！！！

在这里插入图片描述

看到如下信息，说明Spring boot项目部署成功。

在这里插入图片描述

进入服务器，输入 docker ps -a ，后端项目正在运行。

在这里插入图片描述

关闭Docker远程连接

接下来我们把远程连接端口关闭！！防止服务器变挖矿肉鸡！！

编辑 /usr/lib/systemd/system/docker.service ，找到如下两行代码

# ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock

把第一行代码注释去掉，第二行代码加上注释：

ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
# ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock

保存文件，刷新配置并重启docker

systemctl daemon-reload
systemctl restart docker

重启docker后可能会出现docker挂掉的情况

在这里插入图片描述

重启服务器即可，如果后端容器为Exited状态，重新docker start 就好。

在这里插入图片描述

安装nginx发布vue项目

  1. 拉取nginx镜像

docker pull nginx:latest

  1. 运行nginx镜像

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

  1. 先把docker里的 nginx配置文件、html文件、logs日志文件 拷贝到服务器主机：

    1. 在/home目录下创建 /nginx 文件夹

    2. 然后执行如下命令：

      docker cp nginx:/etc/nginx/nginx.conf /home/nginx/
docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/
docker cp nginx:/usr/share/nginx/html /home/nginx/html
docker cp nginx:/var/log/nginx/ /home/nginx/logs/

    3. 执行完毕后，我们可以看到如下目录文件结构：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 停止nginx容器并删除容器

    docker stop nginx
docker rm nginx

  2. 重新启动容器，映射服务器目录。

    docker run -d  --name nginx -p 80:80 -p 443:443 -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/logs:/var/log/nginx -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/conf:/etc/nginx/conf.d --privileged=true     -e TZ=Asia/Shanghai nginx:latest

  3. 在浏览器地址栏上输入服务器IP，能访问到如下界面，说明安装成功。

    在这里插入图片描述

打包Vue项目到nginx

  1. 在开发环境下，vue项目根目录输入 npm run build，在vue项目根目录下会生成一个 /dist 文件夹。

在这里插入图片描述

  1. 把/dist目录下的文件拷贝到服务器（不包含/dist文件夹）的/home/nginx/html/文件夹下：

在这里插入图片描述

  1. 配置反向代理，反向代理文件我们使用/home/nginx/conf/default.conf。把以下内容复制进去，注意把 location /api/ 下的 proxy_pass ip地址修改为后端springboot所在的地址和springboot服务的端口：

    server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location /api/ {
        proxy_pass http://换成你自己服务器的ip:换成你自己服务器后端的端口/;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

  2. 进入docker容器，重启nginx服务

    docker exec -it nginx bash
nginx -s reload
exit

  3. 至此，前端vue项目部署成功。

访问服务器ip地址，可看到项目正常启动，部署成功。

在这里插入图片描述

男居
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot项目打包到Docker
Coder Wang
07-31 1520
SpringBoot项目打包到Docker前言步骤配置DockerIdea配置SpringBoot项目配置 前言 docker介绍和安装参考菜鸟教程：https://www.runoob.com/docker/docker-tutorial.html 本次安装使用的环境为： CentOS7 Docker19.03.1 IntelliJ IDEA 2019.1.3 x64 Jdk1.8 步骤 ...
Spring boot项目部署到Docker环境
火星冰糖的博客
12-31 1210
Spring boot项目部署到Docker环境 环境列表 JDK 1.8 编译器 IDEA docker环境操作系统 CentOS7.6 spring boot 版本 2.1.1.RELEASE Docker 版本 创建spring boot应用 参考：在IDEA中创建spring Boot项目 在项目入口类添加一个测试接口，代码如下： @SpringBootA...
docker+vue云服务器打包镜像相关操作
最新发布
黄钢的博客
05-30 1080
容器化部署似乎成了当前一个非常主流的趋势，无论是前端还是后端，流行的操作就是给你一个镜像地址，让你自己去拉取镜像并运行镜像。这似乎是运维的工作，但是在没有专有运维的情况下，不得不自己先了解一下。docker相对来说还是比较麻烦的，需要对服务器有一定的了解，还要对Linux命令比较熟练，然而我对这两个都不熟悉，摸索了一段时间，记录一下自己打包docker镜像的完整过程。
云服务器Docker部署SpringBoot+Vue前后端(Ubuntu)
m0_51390969的博客
10-21 155
本文创作环境华为云Ubuntu22.04需要具备一定Linux和Docker使用基础。
docker部署springboot+Vue项目
m0_63803244的博客
05-11 406
使用docker容器部署springboot项目，编排技术，极大的简化了部署
Docker部署springboot+vue
zerodiyi的博客
04-13 1047
/指定根目录文件,当访问localhost:80的时候，它会到容器内的 /usr/share/nginx/html/dist中去找index中指定的index.html文件, 没有的话，就会返回index.htm。docker cp nginx:/usr/share/nginx/html /zhan/nginx //这个就是将nginx容器中的html复制到了本地, 此时/zhan/nginx目录下就有了html和nginx两个文件夹。
手牵手教Docker部署Springboot+vue ，全过程十分详细，轻松完成项目部署（简单，高效，通用）
weixin_45956631的博客
03-01 1745
手牵手教Docker部署Springboot+vue ，全过程十分详细，轻松完成项目部署（简单，高效，通用）
Docker部署SpringBoot +Vue项目流程详解（含域名 + HTTPS）
Coder Xu
10-22 2512
本次整体部署操作使用阿里云服务器，这里我选择的是香港地区的2核2G ECS（可以省略域名备案操作）。NginxMySQLRedis后端项目前端项目。
使用docker部署springboot+vue项目
luhenley的博客
06-03 774
docker部署springboot+vue项目
手把手教你使用Docker部署Vue+Springboot项目（详细版）
程序员柚子的博客
02-05 1397
快速使用Docker部署Vue+Springboot项目完整教程
docker容器化+k8s集群部署教程以及springboot+vue部署示例
04-11
本文介绍VMware虚拟机下centos7操作系统中如何安装云原生 Kubernetes（k8s）集群、k8s可视化界面kuboard，以及如何利用docker容器化将springboot+vue项目在k8s集群中部署运行。
Docker部署SpringBoot+Vue前后端分离项目
02-14
前后端项目和配置文件
docker容器化安装以及springboot+vue项目部署
03-27
docker容器化+图形界面portainer+镜像私有仓库registry+docker-registry-ui+以及springboot+vue部署示例，安装文档自己部署了好几次，绝对可执行！！！
Docker部署SpringBoot+vue项目到Linux上
04-22
Docker部署SpringBoot+vue项目到Linux上
基于vue+springboot+mybatis+邮箱注册验证+docker实现员工工资系统
06-19
该系统是基于现代Web开发技术栈构建的，主要利用Vue.js作为前端框架，SpringBoot作为后端服务框架，MyBatis作为数据访问层组件，并且整合了邮箱验证功能以及Docker容器化部署。以下是这些技术在系统中的应用及重要性...
【Docker】Docker快速部署SpringBoot+Vue项目
m0_51634403的博客
09-10 1012
1、项目部署规划 2、准备工作 3、Docker安装 4、拉取镜像 5、Dockerfile构建个人镜像 6、Docker-compose容器编排 7、配置容器环境 8、项目测试 9、将镜像发布到阿里云镜像仓库
docker部署springboot+vue项目
afggg_的博客
12-06 739
docker一键部署springboot项目
Docker部署Vue+Springboot项目
qq_64680177的博客
11-23 1938
因为我们需要将这个jar包打成镜像放在docker上运行，那么我们需要一个配置文件用于镜像的运行。图片中的Dockerfile就是这个配置文件，要注意这个两个文件要放在同一目录下。那么现在就开始来编写配置文件。要在classRom目录下执行这条语句，注意最后还有一个“.”,这个点表示的是当前目目录，表示使用当前目录下的Dockerfile文件进行镜像的构建一个名字为classroom-realtime-feedback的镜像。
Docker 容器部署SpringBoot + Vue项目
qq_39249627的博客
06-03 1964
使用 docker 容器部署SpringBoot+Vue前后端分离的项目。中间踩坑无数，特此记录一下，仅供学习和参考。
springboot vue项目部署
03-16
Spring Boot Vue项目的部署方法有很多种，可以使用如下几种方式之一: 1. 使用maven插件打包前端静态资源，然后将打包后的资源与后端代码一起打成一个jar包部署到服务器上 2. 使用webpack将前端静态资源打包，然后将打包后的资源放到后端项目的静态资源目录下，最后将后端项目打成war包部署到服务器上 3. 将前端静态资源打包并发布到独立的静态资源服务器上，后端项目打成jar包部署到服务器上 另外，还可以使用docker将前后端项目打成镜像进行部署。 具体方法取决于项目的具体情况，可以根据需要进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值