docker-compose部署springboot+vue前后端分离项目 超简单

本文介绍了如何利用docker-compose轻松部署SpringBoot+Vue的前后端分离项目。通过编写Dockerfile和docker-compose.yml文件,配置项目镜像、数据库连接及Nginx代理,实现了简单快速的部署流程。

为什么选用docker-compose

Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose,您可以使用 YML
文件来配置应用程序需要的所有服务。然后,使用一个命令,就可以从 YML 文件配置中创建并启动所有服务。

简单就是说,docker-compose部署是真滴简单,再也不用去求人找脚本了。两个文件加一行命令,快乐不求人

那我为什么选择docker-compose

因为我是一位垃圾,写shi山的前端,不,是页面开发人员(不配)

所以我只想简单快速地把我的东西部署上去,多的我也不想知道,(大半年前我是知道的,搞了这么久,不该忘得都给忘了)

所以这个教程极其适合 有部署需求而又什么东西都不会 的和我一样的东西

linux环境

安装docker

#安装
yum install docker

#检验安装是否成功
[root@localhost opt]# docker --version
Docker version 1.13.1, build 7f2769b/1.13.1

#启动
systemctl start docker

千万不要忘了启动docker,没有人知道我因为这个原因重新比照配置看了多少遍,我也不想让你们看到,嘤嘤嘤

安装docker-compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

# 检查是否安装成功
docker-compose --version

编写Dockerfile文件

因为我们的项目需要成为docker的镜像,所以我们必须先编写Dockerfile文件构建我们的项目镜像然后进行编排,Dockerfile文件可以帮我们进行构建。

在Springboot项目 与src同级的目录下新建
Dockerfile:

FROM java:8
#暴露的端口
EXPOSE 8080

使用 Docker Compose 部署 Spring Boot 和 Vue 项目,可按以下详细步骤操作: ### 1. 安装 Docker Compose 从 GitHub 手动下载 Docker Compose 文件,地址为 https://github.com/docker/compose/releases 。将下载的文件传输到云服务器的 `/usr/local/bin/docker-compose` 路径,并修改文件名为 `docker-compose`。之后,设置执行权限,命令如下: ```bash sudo chmod +x /usr/local/bin/docker-compose docker-compose --version ``` 此步骤确保 Docker Compose 能在服务器上正常运行并可被调用 [^2]。 ### 2. 准备项目文件 将前后端分别打包好,把后端的 JAR 包和前端的 `dist` 目录上传到服务器。可以采用如下目录结构,将项目前后端放在一个文件夹下,用 `api` 和 `web` 目录区分: ```plaintext └── sa-admin ├── api │ ├── Dockerfile │ └── sa-admin-prod-3.0.0.jar └── web ├── dist ├── Dockerfile ├── nginx.conf ├── deploy.sh ├── docker-compose.yml ``` 这样的结构有助于清晰管理项目文件 [^4]。 ### 3. 编写 Dockerfile 为后端和前端项目分别编写 `Dockerfile`,用于构建 Docker 镜像。 #### 后端(Spring Boot)`api/Dockerfile` 示例: ```dockerfile # 使用基础镜像 FROM openjdk:11 # 将 JAR 包复制到容器中 COPY sa-admin-prod-3.0.0.jar app.jar # 暴露端口 EXPOSE 8080 # 启动应用 CMD ["java", "-jar", "app.jar"] ``` #### 前端(Vue)`web/Dockerfile` 示例: ```dockerfile # 使用 Nginx 基础镜像 FROM nginx:1.21 # 将前端构建产物复制到 Nginx 默认静态文件目录 COPY dist/ /usr/share/nginx/html/ # 复制自定义的 Nginx 配置文件 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露端口 EXPOSE 80 ``` ### 4. 编写 docker-compose.yml 在项目根目录下编写 `docker-compose.yml` 文件,用于定义和运行多容器 Docker 应用程序。示例如下: ```yaml version: '3' services: backend: build: context: ./api dockerfile: Dockerfile ports: - "8080:8080" frontend: build: context: ./web dockerfile: Dockerfile ports: - "80:80" depends_on: - backend ``` 该文件定义了两个服务:`backend` 和 `frontend`,分别对应后端和前端项目。通过 `build` 指定构建上下文和 `Dockerfile` 路径,`ports` 映射容器端口到宿主机端口,`depends_on` 确保前端服务在后端服务启动后再启动 [^1]。 ### 5. 启动服务 在项目根目录下执行以下命令,从 `docker-compose.yml` 文件配置中创建并启动所有服务: ```bash docker-compose up -d ``` `-d` 参数表示在后台运行服务。这样,Spring Boot 和 Vue 项目就通过 Docker Compose 成功部署并运行了 [^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值