投稿
  1. 极客之音首页
  2. 技术随笔

docker部署Spring Boot + Vue 项目

小半 • • 技术随笔 • 阅读 304

导读：本篇文章讲解 docker部署Spring Boot + Vue 项目，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

docker部署Spring Boot + Vue 项目

部署Spring Boot后端

前提: 服务器的Docker开启远程连接

第一步：配置Docker的远程访问

1.修改 /lib/systemd/system/docker.service

vim /lib/systemd/system/docker.service

2.替换ExecStart

将
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

在这里插入图片描述
3.重启Docker服务

systemctl daemon-reload
systemctl restart docker

4.查看2375端口是否被监听

netstat -nlpt

5.服务器防火墙开启2375端口

firewall-cmd --add-port=2375/tcp --permanent
firewall-cmd --reload
firewall-cmd --zone=public --list-ports

6.测试
在控制台输入：curl http://127.0.0.1:2375/version，会显示下面的信息在这里插入图片描述
7.在自己电脑上将上面的127.0.0.1换成你服务器的ip地址(如果不能访问端口，则服务器没有开启对应的安全规则)
在这里插入图片描述

第二步：IDEA中配置Docker插件信息

1.打开设置中心
docker部署Spring Boot + Vue 项目
2.正常情况效果如下：
在这里插入图片描述
3.配置镜像加速器
在这里插入图片描述
5.点击OK之后，下方控制栏，出现Docker控制台
在这里插入图片描述

第三步：集成Maven插件

1.修改项目的pom文件

<properties>
    <!--docker镜像的前缀-->
    <docker.image.prefix>docker</docker.image.prefix>
  </properties>

<plugin>
  <groupId>com.spotify</groupId>
  <artifactId>docker-maven-plugin</artifactId>
  <version>1.0.0</version>

  <configuration>
    <!--远程Docker的地址-->
    <dockerHost>http://服务器地址:2375</dockerHost>
    <!--镜像名称，前缀/项目名-->
    <imageName>${docker.image.prefix}/${project.artifactId}</imageName>
    <dockerDirectory>src/main/docker</dockerDirectory>
    <resources>
      <resource>
        <targetPath>/</targetPath>
        <directory>${project.build.directory}</directory>
        <include>${project.build.finalName}.jar</include>
      </resource>
    </resources>
  </configuration>
</plugin>

配置jdk

<properties>
    <JAVA_HOME>本机JDK路径</JAVA_HOME>
</properties>

 <plugin>
     <groupId>org.apache.maven.plugins</groupId>
     <artifactId>maven-compiler-plugin</artifactId>
     <version>3.8.1</version>
     <configuration>
       <source>1.8</source>
       <target>1.8</target>
       <compilerArguments>
         <bootclasspath>${java.home}/lib/rt.jar;${java.home}/lib/jce.jar</bootclasspath>
       </compilerArguments>
     </configuration>
</plugin>

2.在src的main下新建docker文件夹，将编写好的Dockerfile放到这个文件夹
在这里插入图片描述

FROM java:8
VOLUME /tmp
ADD spring-boot-docker-1.0-SNAPSHOT.jar /test.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/test.jar"]

第四步：构建镜像

1.依次使用 clean、package、docker:build 命令
在这里插入图片描述
2.最后一步的效果
在这里插入图片描述
3.查看Docker控制台
在这里插入图片描述
在这里插入图片描述

第五步：创建容器

1.Docker控制台选中镜像右键，点击创建镜像，填写参数，点击run
在这里插入图片描述
在这里插入图片描述
2.这里点击run，启动container的时候可能会出现出现iptables: No chain/target/match by that name。容器启动失败的问题。只需要重启一下docker服务就行。
一些日志和配置信息
在这里插入图片描述
3.浏览器访问服务器的8080端口
在这里插入图片描述

部署 Vue 前端

第一步：docker安装nginx

第一步: 拉取nginx官方镜像

1.拉取nginx官方镜像

docker pull nginx

在这里插入图片描述
2.查看docker镜像
docker images
在这里插入图片描述
3.使用nginx镜像来创建nginx容器实例

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

run 创建容器实例

– name 容器命名

-v 映射目录

-d 设置容器后台运行

-p 本机端口映射 将容器的80端口映射到本机的80端口

语句最后一个nginx是使用镜像的名称

创建容器成功后,启动nginx容器
在这里插入图片描述
4.访问 本机测试
在这里插入图片描述

第二步：将nginx关键目录映射到本机

1.首先在本机创建nginx的一些文件存储目录

mkdir -p /root/nginx/dist /root/nginx/logs /root/nginx/conf

dist : nginx存储网站网页的目录

logs: nginx日志目录

conf: nginx配置文件目录

2.查看nginx\容器id
在这里插入图片描述
3. 将nginx容器配置文件copy到本地

docker cp 56f15e57c82f:/etc/nginx/nginx.conf /root/nginx/conf

4.删除旧容器，创建新nginx容器,并将dist,logs,conf目录映射到本地

docker rm -f nginx
docker run -d -p 80:80 --name nginx -v /root/nginx/dist:/usr/share/nginx/html -v /root/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /root/nginx/logs:/var/log/nginx nginx
  1. 在本机/root/nginx/dist目录下创建index.html内容为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>docker搭建nginx</title>
</head>
<body>
    <h1>docker搭建nginx映射成功</h1>
    <p>666666666</p>
</body>
</html>

6.完成后重新访问本机
在这里插入图片描述

第二步: Vue项目打包

1.打包项目

npm run build 或者 yarn build

2.打包完主目录下出现一个dist目录
在这里插入图片描述
3.将dist目录下的文件复制到服务器/root/nginx/dist目录下

cp -r /dist/* /root/nginx/dist/

4.修改nginx配置文件

vim /root/nginx/conf/nginx.conf

    server{
       listen 80;
       charset utf-8;
       server_name 106.15.10.209;

       # 静态页面
       location / {
          root /usr/share/nginx/html;
          index index.html index.htm;
          try_files $uri $uri/ /index.html; #目录不存在则执行index.html,防止刷新404
       }

       # 反向代理
       location /api/auth {
          proxy_pass http://106.15.10.209:8010/auth;
          proxy_redirect default;
       }

       location /api/captchaImage {
          proxy_pass http://106.15.10.209:8010/captchaImage;
          proxy_redirect default;
       }

       location /api {
          proxy_pass http://106.15.10.209:8010/api;
          proxy_redirect default;
       }

    }

5.访问ip:80测试
在这里插入图片描述

6.重新访问项目成功

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/91036.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！