将前后端分离的项目部署到CentOS8服务器（失败案例）

案例一

• 前端是用vite构建的vue项目，将前端打包后生成的dist文件放到tomcat，后端打成jar包使用jdk运行

• 后端项目配置
• 前端项目配置
• window系统上测试
• 后端项目打包，将jar包上传到服务器的指定目录
• 服务器安装了jdk，安装步骤可参考；之后启动jar包
• 访问后端接口测试
• 前端项目打包，会在dist目录下生成打包文件
• 将前端项目打包后上传到服务器
• 使用docker安装tomcat

docker pull tomcat          # 拉取tomcat容器
docker run -d -p 8080:8080 tomcat    # 后台启动
# 启动后浏览器访问 http://192.168.96.192:8080/ 返回404
# 解决方案：
firewall-cmd --zone=public --add-port=8080/tcp --permanent   # 对外开放8080端口
firewall-cmd --reload     # 重启防火墙生效
docker exec -it 正在运行的容器id /bin/bash     # 进入tomcat容器
cp -r webapps.dist/* ./webapps        # 将webapps.dist目录下的所有文件复制到webapps路径下
rm -rf webapps.dist           # 删除webapps.dist目录
# 此时能通过浏览器访问到tomcat页面了，但tomcat镜像重启后依旧404，需将当前修改后的容器提交为一个新的镜像
ctrl + p + q                  # 不停止容器的情况下退出
docker commit -a="作者" -m="备注" 正在运行的容器id tomcat10:10.1         # 在容器运行状态下提交自定义的容器
docker stop 正在运行的容器id    # 停止当前tomcat容器
docker rm 运行后的容器id    # 删除该容器
docker run -d -p 8080:8080 tomcat10:10.1         # 启动自己提交的镜像

# 补充
# 启动tomcat镜像的时候报错：driver failed programming external connectivity on endpoint quirky_allen
# 错误原因：之前启动后端项目时占用了8080端口，需将后端项目结束

• 安装成功后，测试

# 创建共享文件夹
mkdir -p /home/mydocker/mytomcat8080/data
# 启动容器8080：
docker run \
-p 8080:8080 \
--name my-tomcat8080 \
-v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \
-d \
tomcat10:10.1

# 启动容器时报错：docker: invalid reference format.
# 错误原因：docker命令写错了，我这里是-v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \  冒号后面多了一个空格

# 启动成功后，创建如下文件夹，编写test.html页面放到该目录下
mkdir /home/mydocker/mytomcat8080/data/edu
# 前端项目打包，打包后生成dist文件夹
npm run bulid

• 将dist压缩包解压到/home/mydocker/mytomcat8080/data/edu路径下

unzip dist.zip    # 解压文件
yum install -y unzip zip   # 解压失败，需安装该命令

• 访问index.html，不能访问
• 访问test.html，可以访问
• 不能访问的原因是配置的访问路径错误，参考
• 需配置config路径下的index.js；该前端项目是vite构建的vue项目，没有config目录；且在window系统上打包后也无法直接访问

案例二

• 前端是用vite构建的vue项目，将前端项目直接上传到服务器上，服务器安装node，编译项目运行，访问服务器时通过nginx转发到项目IP地址

• CentOS服务器安装node

yum module list nodejs             # 列出所有包
sudo yum module install nodejs            # 安装
sudo yum module install nodejs/development          # 安装development剖面
node --version
npm -v

• 将前端项目压缩后上传到服务器
• 在服务器解压
• 进入项目根目录打包

npm run build    # 打包时报如上错误
npm install -g n     # 需更新node版本
n latest

• 参考
• 运行项目

npm run dev    # 运行项目时报如上错误
chmod 777 /home/data/node_modules/.bin/vite    # 设置权限

• 参考

• 启动项目成功

• 浏览器访问失败

• 查考防火墙状态为关闭状态

• 使用nginx转发到3000端口

• 依然无法访问

• 再次配置nginx并重启，依然无法访问

• 排除是否是防火墙问题：启动tomcat容器，浏览器可以访问

• 排查是否是nginx的问题：转发到tomcat，浏览器可以访问

• 再次配置nginx

• 猜测原因：要访问的页面有问题、nginx没有指定正确的页面路径

案例三

• 参考博客中打成war包案例
• 将前端vite构建的vue项目打包后，将dist文件夹下的文件复制resource/static目录下，打成war包部署到服务器的tomcat容器上报错如下
• 报错原因猜测为，前端打包的路径错误