reactive-resume项目启动报错InvalidBrowserConnection问题解决

batty_hanker

已于 2024-03-19 10:01:10 修改

阅读量668

点赞数 14

分类专栏：前端问题汇总文章标签： react.js node.js npm chrome devtools

于 2024-03-19 09:30:57 首次发布

本文链接：https://blog.youkuaiyun.com/batty_hanker/article/details/136829527

版权

前端问题汇总专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在本地部署开源项目Reactive-Resume时遇到的问题，涉及browserless无头浏览器的使用和错误解决，作者通过Docker部署并配置环境变量解决了InternalServerErrorException，提供了详细的部署步骤和环境配置指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

在本地部署Reactive-Resume这个开源的个人简历制作项目时，发现server,client，和artboard都启动了之后，通过页面访问项目，在个人简历制作完成之后，导出pdf和预览的时候，打开浏览器新的标签页后并没有新的画面出来，查看控制台信息会发现报错：InternalServerErrorException: InvalidBrowserConnection。

原理分析：

这个项目是通过调用无头浏览器browserless，来进行pdf的预览和导出。因此看到这个报错摸索了好久之后，发现是需要在本地部署一下browserless这个项目，就不会报错了。同时在.env文件中配置好chrome_url对应的ip和端口就可以。

问题解决：

为了方便省事，我直接使用docker的方式进行本地部署。

#1.下载镜像
docker pull browserless/chrome

#2.启动browserless/chrome
docker run \
  --rm \
  -p 3000:3000 \
  -e "MAX_CONCURRENT_SESSIONS=10" \
  browserless/chrome:latest

#3.启动之后，在docker命令行中执行下方命令获取token
openssl rand -hex 32

#4.将第三步token和端口等配置在.env文件中
CHROME_PORT=开放的端口
CHROME_TOKEN=第三步获取的token
CHROME_URL=ws://localhost:暴露的端口

最终经过验证，该问题得到解决，将此步骤记录下来，防止大家踩坑。