AI智能
改变未来

将前后端分离的项目部署到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 --versionnpm -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容器上报错如下
  • 报错原因猜测为,前端打包的路径错误
赞(1) 打赏
未经允许不得转载:爱站程序员基地 » 将前后端分离的项目部署到CentOS8服务器(失败案例)