手动部署前后端分离的项目到本地

1.准备工作

使用maven打包springboot项目为.jar文件得到springboot-0.0.1-SNAPSHOT.jar
手动部署前后端分离的项目到本地

打包vue项目

npm install -g @vue/cli安装Vue CLI

在项目根目录下,运行npm run build命令来构建项目得到一个dist文件夹
手动部署前后端分离的项目到本地

将打包好的文件通过远程仓库中转至docker虚拟机

手动部署前后端分离的项目到本地

在虚拟机拉取镜像,并将docker12-2的内容复制(cp 命令)给我的部署项目my-project

手动部署前后端分离的项目到本地

2.部署前端到nginx docker中

将dist.zip解压放于my-project/frontend下,编写Dockerfile

```
FROM nginx:latest

COPY ./dist /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
```

手动部署前后端分离的项目到本地

创建一个名为 nginx.conf 的配置文件

```
server {
    listen 80;

    server_name localhost;

    location / {
        root /usr/share/nginx/html;

        try_files $uri $uri/ /index.html;

    }

    # 代理 API 请求

location /api {
        proxy_pass http://192.168.88.3:8080;  # 替换为你的 API 服务器地址

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto $scheme;

    }

}
```

手动部署前后端分离的项目到本地

构建和运行 Docker 容器

```
docker build -t my-vite-app .(my-vite-app:自定义前端镜像名)
```

手动部署前后端分离的项目到本地

运行并查看镜像

docker run -d -p 8080:80 my-vite-app

手动部署前后端分离的项目到本地

在火狐浏览器中输入http://localhost:8080或http://192.168.88.3:8080跳至如下的登录界面
手动部署前后端分离的项目到本地

3.部署后端

将springboot-0.0.1-SNAPSHOT.jar放于my-project/backend下,编写Dockerfile

```
# 使用官方 OpenJDK 作为基础镜像

FROM openjdk:20-jdk-sli

# 设置工作目录

WORKDIR /app

# 复制项目的 JAR 文件到容器中

COPY ./springboot-0.0.1-SNAPSHOT.jar app.jar

# 暴露应用运行的端口

EXPOSE 8080

# 运行 Spring Boot 应用

ENTRYPOINT ["java", "-jar", "app.jar"]
```

手动部署前后端分离的项目到本地

构建

docker build -t my-springboot-app .
手动部署前后端分离的项目到本地

```
# 创建网络

docker network create my_network
```

注意:使用 Docker 网络连接

在 Docker 中运行多个容器时,建议使用 Docker 网络来确保它们可以相互通信。我已经创建了一个名为 my_network 的网络,确保我的 MySQL 、 my-springboot-app容器在同一个网络中运行,方便通信

运行

docker run -d -p 8090:8080 --network my_network my-springboot-app

手动部署前后端分离的项目到本地

4.部署mysql8

```
docker run --name mysql8 

-e MYSQL_ROOT_PASSWORD=mysql --network my_network 

-e MYSQL_ROOT_HOST='%' 

-p 3306:3306 

-v /root/xr/java/data:/var/lib/mysql 

-d mysql:8.0.40 

--character-set-server=utf8mb4 

--collation-server=utf8mb4_unicode_ci 

--default-authentication-plugin=mysql_native_password
```

手动部署前后端分离的项目到本地

查看构建容器成功
手动部署前后端分离的项目到本地

输入http://192.168.88.3:8090验证后端部署成功,因为还没创数据,所以显示数据为空
手动部署前后端分离的项目到本地

使用mysql容器创建对应数据库

进入mysql容器
docker exec -it mysql8 bash
手动部署前后端分离的项目到本地

登录MySQL

mysql -u root -p
手动部署前后端分离的项目到本地

创建数据库为docker_demo

创建表名为member

```
create database docker_demo;

use docker_demo;

-- 创建成员表
DROP TABLE IF EXISTS `member`;
CREATE TABLE member (
    id INT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID',
    studentId VARCHAR(50) UNIQUE NOT NULL COMMENT '学号',
   name VARCHAR(100) NOT NULL COMMENT '姓名',
   password VARCHAR(255) NOT NULL COMMENT '密码'
   ) COMMENT='成员信息表';
```

手动部署前后端分离的项目到本地

```
INSERT INTO member (studentId, name, password) VALUES ('11111111', '111', '123456');
```

5.遇到的问题

浏览器输入http://192.168.88.3:8090,结果为{"code":"200","msg":"请求成功","data":null}

问题分析:使用curl -X GET http://192.168.88.3:8090/member/selectAll验证,得到

{"code":"500","msg":"请求失败","data":null} 意思是服务器请求失败。我使用docker logs命令查看部署过程,发现MyBatis 在尝试执行数据库操作时遇到了异常,我看了后端代码和部署步骤,发现后端数据库连接用的是本地MySQL

手动部署前后端分离的项目到本地

,而我部署用的是MySQL容器(也就是说我的本地并没有MySQL),导致我的springboot找不到数据库,自然没有数据,请求也不会成功。

解决方案:更新springboot代码,重新打包,重复部署操作。

解决步骤:

1.更新数据库连接 URL

在您的 Spring Boot 应用中,您需要将数据库连接 URL 更新为 MySQL 容器的名称,而不是使用 localhost。在 Docker 中,容器的名称可以用作主机名。
手动部署前后端分离的项目到本地

2. 重新构建并运行后端应用

使用docker stop,docker rm ,docker rmi删除旧容器和旧镜像(内容太多,未截图)

重新构建运行

docker build -t my-springboot-app .
手动部署前后端分离的项目到本地

```
docker run -d -p 8090:8080 --network my_network my-springboot-app
浏览器输入http://192.168.88.3:8090/member/selectAll
```

手动部署前后端分离的项目到本地

表示后端与数据库部署成功

注意: 本身步骤是没有错的,如果结果不如意,可以检查ip地址,我这里用的地址基本都是本地主机,如果你需要改其他主机,请相应地修改;另外注意后端数据库的密码与前端是否匹

文章整理自互联网,只做测试使用。发布者:Lomu,转转请注明出处:https://www.it1024doc.com/6048.html

(0)
LomuLomu
上一篇 2025 年 1 月 12 日 下午5:19
下一篇 2025 年 1 月 12 日

相关推荐

  • Java MDC技术详解:实现高效日志链路追踪的实战指南

    一、MDC技术概述 MDC(映射诊断上下文)是SLF4J日志框架提供的一项线程级数据存储功能。作为线程安全的容器,它能够在特定线程范围内保存多组键值数据,并自动将这些信息嵌入日志记录中,从而实现日志信息的上下文关联。 二、MDC的核心价值 功能 描述 应用实例 请求追踪 完整记录请求处理路径 微服务调用链路分析 参数传递 跨方法共享通用数据 机构编码、用户标…

    未分类 2025 年 5 月 19 日
    7300
  • Java技术全景——分布式文件系统在科研数据管理中的高效实践(187)

    🌟亲爱的技术爱好者们,诚挚邀请您踏入【云端技术驿站】的知识殿堂!在这个信息爆炸的数字时代,我们致力于打造一个兼具深度与温度的技术交流空间。无论您是来探索前沿技术,还是分享实战心得,这里都将成为您理想的栖息地。期待与您共同编织技术的未来篇章!🌟全平台账号(微信公众号/CSDN/抖音/华为生态/支付宝生活号/微博):云端技术驿站一、立即加入【开发者成长联盟】通道…

    2025 年 5 月 12 日
    7600
  • Java技术新视野——Java实时大数据处理赋能车联网协同驾驶的实践探索(197)

    ✨亲爱的技术爱好者们,诚挚欢迎访问【云端科技驿站】!在这个数字化浪潮奔涌的时代,我们致力于打造一个融合创新技术与深度思考的知识分享平台。这里不仅有前沿的技术解析,更期待您带来独到见解,让我们携手在科技海洋中扬帆远航!✨全网平台统一标识:云端科技驿站一、加入【技术精英圈】快速通道1:【云端技术交流圈】快速通道2:【CSDN技术创作营】二、核心专栏推荐:1. 【…

    2025 年 5 月 13 日
    6800
  • Microi 吾码与 JavaScript:前端低代码平台的强大组合

    ![](https://pic.it1024doc.com/csdn/202412/5916173c18b26b7984e2009ddcc49015.png) **目录** [一、引言](#一、引言) [二、Microi 吾码概述](#二、Microi-吾码概述) [三、JavaScript 在 Microi 吾码前端开发中的应用](#三、JavaScrip…

    未分类 2024 年 12 月 28 日
    27100
  • Nginx HttpHeader增加几个关键的安全选项

    针对像德勤这样的专业渗透测试(Pentest)的场景中,为了确保网站的安全性并通过严格的安全审查,需要为这些安全头配置更细致、专业的参数。 以下是对每个选项的建议以及设置值的详细说明: 1. Strict-Transport-Security (HSTS) 确保所有通信强制通过 HTTPS 并防止降级攻击。 推荐值: add_header Strict-Tr…

    未分类 2024 年 12 月 30 日
    20200

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信