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

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

1. FROM nginx:latest
3. COPY ./dist /usr/share/nginx/html
5. COPY ./nginx.conf /etc/nginx/conf.d/default.conf
7. EXPOSE 80

复制代码

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

1. server {
2.     listen 80;
4.     server_name localhost;
6.     location / {
7.         root /usr/share/nginx/html;
9.         try_files $uri $uri/ /index.html;
11.     }
13.     # 代理 API 请求
15. location /api {
16.         proxy_pass http://192.168.88.3:8080;  # 替换为你的 API 服务器地址
18.         proxy_set_header Host $host;
20.         proxy_set_header X-Real-IP $remote_addr;
22.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
24.         proxy_set_header X-Forwarded-Proto $scheme;
26.     }
28. }

复制代码

构建和运行 Docker 容器

1. 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

1. # 使用官方 OpenJDK 作为基础镜像
3. FROM openjdk:20-jdk-sli
5. # 设置工作目录
7. WORKDIR /app
9. # 复制项目的 JAR 文件到容器中
11. COPY ./springboot-0.0.1-SNAPSHOT.jar app.jar
13. # 暴露应用运行的端口
15. EXPOSE 8080
17. # 运行 Spring Boot 应用
19. ENTRYPOINT ["java", "-jar", "app.jar"]

复制代码

构建
docker build -t my-springboot-app .

1. # 创建网络
3. 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

1. docker run --name mysql8 \
3. -e MYSQL_ROOT_PASSWORD=mysql --network my_network \
5. -e MYSQL_ROOT_HOST='%' \
7. -p 3306:3306 \
9. -v /root/xr/java/data:/var/lib/mysql \
11. -d mysql:8.0.40 \
13. --character-set-server=utf8mb4 \
15. --collation-server=utf8mb4_unicode_ci \
17. --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

1. create database docker_demo;
3. use docker_demo;
5. -- 创建成员表
6. DROP TABLE IF EXISTS `member`;
7. CREATE TABLE member (
8.     id INT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID',
9.     studentId VARCHAR(50) UNIQUE NOT NULL COMMENT '学号',
10.    name VARCHAR(100) NOT NULL COMMENT '姓名',
11.    password VARCHAR(255) NOT NULL COMMENT '密码'
12.    ) COMMENT='成员信息表';

复制代码

1. 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 .

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

复制代码

表现后端与数据库部署成功
注意：自己步调是没有错的，如果结果不如意，可以查抄ip地址，我这里用的地址基本都是本田主机，如果你必要改其他主机，请相应地修改；另外注意后端数据库的密码与前端是否匹

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。