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.打开设置中心

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.重新访问项目成功

# java # linux # nginx # docker
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区