最近遇到的bug

1.访问404问题

在Linux中自动部署某个项目后,点击某个指定页面后再点击其他页面发现直接404了。

仔细寻找后发现是在前端的路由中设置了createWebHistory模式(HTML5 History)

这种模式下:

  • 前端路由是"无#号"的(如 http://xxx/enterQuit/checkIn)
  • 当用户刷新页面或直接访问子路由时,浏览器会把整个路径(如/enterquit/checkIn)发送给后端。
  • 如果后端(如 Nginx、Tomcat 等)没有配置"找不到资源时转发到 index.html",就会返回 404。

解决办法: 由于我的前端是nginx的,所以此处只介绍我是如何解决nginx前端出现这种404问题的解决办法。

其实非常简单,修改nginx的配置文件nginx.conf,在location中加入try_files <math xmlns="http://www.w3.org/1998/Math/MathML"> u r i uri </math>uriuri/ /index.html;这一行配置,意思是在找不到资源时,转到发index.html,有前端页面接管页面渲染,这样就可以解决404的问题了

2.Linux中自动部署后带参数的自动启动

在Linux自动部署后遇到一个问题:使用aliyun的oss上传时,部署的项目后端中读取到的密钥和在Linux系统中读取到的密钥不同,可能是出现了读取转换的问题,我也不知道具体是什么问题:

解决办法: 既然读取有问题,那不妨直接在启动自动部署的后端时就让他带着这两个参数启动,就不会出现从Linux中读取参数从而出现转换的问题了:

  • 有一种比较直接的办法就是直接在docker start的命令中就用-e的方式提供参数,这样的方式见效快,但是问题就是每次启动都要带上这个参数,其实还是比较麻烦的:
ini 复制代码
- docker run -d \ -p 9000:9000 \ # 映射端口(保持和之前一致) 
-e OSS_ACCESS_KEY_ID=$OSS_ACCESS_KEY_ID \ # 传递 AccessKeyId 
-e OSS_ACCESS_KEY_SECRET=$OSS_ACCESS_KEY_SECRET \ # 传递 AccessKeySecret 
--name zzyl-admin \ # 容器名(可自定义) 
zzyl-admin:V1.0 # 镜像名(和之前一致)
  • 第二种办法就是配置一个Docker-compose配置文件,一次配置永久使用:
bash 复制代码
//新建一个文件夹
mkdir zzyl-admin-docker && cd zzyl-admin-docker

//用编辑器打开并编辑文件
vim docker-compose.yml

//yml文件内容
version: '3'
services:
  zzyl-admin:  # 服务名(自定义)
    image: zzyl-admin:V1.0  # 你的镜像名
    container_name: zzyl-admin  # 容器名(自定义)
    ports:
      - "9000:9000"  # 端口映射(保持和之前一致)
    environment:  # 环境变量配置(核心)
      - OSS_ACCESS_KEY_ID=${OSS_ACCESS_KEY_ID}  # 引用宿主机的环境变量
      - OSS_ACCESS_KEY_SECRET=${OSS_ACCESS_KEY_SECRET}
    restart: always  # 可选:容器退出时自动重启(比如服务器重启后)

//启动容器(后台运行)
docker-compose up -d

//进入容器
docker exec -it zzyl-admin /bin/bash

//查看环境变量(应该能正确输出密钥)
echo $OSS_ACCESS_KEY_ID
echo $OSS_ACCESS_KEY_SECRET
### 后续管理(全是简单命令)

-   停止容器:docker-compose down
-   重新启动:docker-compose restart
-   查看日志:docker-compose logs -f(实时查看)

这样就可以实现每次启动docker时候自动启动后端了,并且会带上oss的密钥,从而实现oss上传的功能。

相关推荐
你的人类朋友6 分钟前
什么是API签名?
前端·后端·安全
会豪2 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子2 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶2 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子2 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_3 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23333 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin3 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_3 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit3 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言