本地正常的Puppeteer截图工具部署Heroku后遇503错误及解决进展

2023年3月14日更新：经过大量资料查阅与反复尝试，已解决Puppeteer+Heroku部署的部分问题，有效调整如下：

• 从puppeteer中引入executablePath：const { executablePath } = require('puppeteer')，并将executablePath()函数应用到启动参数中；
• 添加Puppeteer配置文件以解决Chromium错误；推送至Heroku前请勿运行npm install，Heroku会在构建时自动执行，否则.cache文件夹过大可能触发Heroku的「remote rejected」错误；
• 添加Puppeteer的Heroku buildpack；
• 在Puppeteer启动参数中添加：args: ['--no-sandbox', '--disable-setuid-sandbox']，解决「No usable sandbox!」错误，同时满足buildpack运行要求。

完成上述调整后，Puppeteer相关错误已消除，Heroku日志显示server.js中的Puppeteer代码已执行，但仍存在截图未生成到指定目录、最终返回503错误的问题，推测为独立问题，后续将单独提问。

应用说明 #

这是一款面向设计师的内部工具，无需命令行即可通过Puppeteer.js自动截图。用户输入目标页面URL和本地存储路径即可完成截图，本地环境运行正常，部署到Heroku后出现问题。

问题现象 #

部署后应用页面加载正常，但调用截图接口时返回503错误。错误显示请求的完整URL（含参数）被当作API端点，与本地行为不符。同时出现「An executablePath or channel must be specified for puppeteer-core」错误。

控制台错误 #

GET https://dcsgrab.herokuapp.com/dcsgrab?tearsheetUrl=https://www.google.com/doubleclick/preview/dynamic/previewsheet/CMP6kgUQ3cxBGLbTkhUgicQs&imagefilelocation=/Users/tyler.anyan/Downloads/dcsgrab-test-folder/images/ 503 (Service Unavailable) App.js:27 

Heroku日志错误 #

2023-03-09T18:26:29.726820+00:00 app[web.1]: /app/node_modules/puppeteer-core/lib/cjs/puppeteer/util/assert.js:28
2023-03-09T18:26:29.726832+00:00 app[web.1]: throw new Error(message);
2023-03-09T18:26:29.726833+00:00 app[web.1]: ^
2023-03-09T18:26:29.726834+00:00 app[web.1]: 
2023-03-09T18:26:29.726834+00:00 app[web.1]: Error: An `executablePath` or `channel` must be specified for `puppeteer-core`
2023-03-09T18:26:29.726835+00:00 app[web.1]: at assert (/app/node_modules/puppeteer-core/lib/cjs/puppeteer/util/assert.js:28:15)
2023-03-09T18:26:29.726836+00:00 app[web.1]: at ChromeLauncher.launch (/app/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js:92:36)
2023-03-09T18:26:29.726837+00:00 app[web.1]: at async /app/server/server.js:26:19
2023-03-09T18:26:29.730410+00:00 heroku[router]: at=error code=H13 desc="Connection closed without response" method=GET path="/dcsgrab?tearsheetUrl=https://www.google.com/doubleclick/preview/dynamic/previewsheet/CMP6kgUQ3cxBGLbTkhUgicQs&imagefilelocation=/Users/my.name/Downloads/dcsgrab-test-folder/images/" host=dcsgrab.herokuapp.com request_id=9bc2093a-401d-464f-87fd-4b72dc4998a0 fwd="24.16.69.155" dyno=web.1 connect=0ms service=10ms status=503 bytes=0 protocol=https

相关代码 #

包含前端React的App.js、data-input.js，后端Express的server.js。

内容的提问来源于stack exchange，提问作者tganyan