node.js - 如何将 Selenium NodeJS Web 应用程序部署到 Heroku？

Question

我在本地创建了一个 Selenium NodeJS Web 应用程序。它使用 chromedriver 并且我的驱动程序必须使用一些 chrome 扩展。本地一切正常。 我想在 Heroku 中使用它，但我做不到。我用构建包尝试过，但我无法再这样做。

如何将其部署到 Heroku ？

package.json(依赖项):

..
  "dependencies": {
    "body-parser": "*",
    "express": "*",
    "firebase": "^4.1.5",
    "firebase-admin": "^4.2.1",
    "selenium-webdriver": "*",
    "chromedriver":"*",
    "telebot":"*"
  },
..

Answer 1

注意:我正在使用 React、Express 和 Selenium 以及 chrome

第 1 步:创建一个新的 Heroku 应用。

第 2 步:从您的终端，使用 heroku login 登录到 heroku

第 3 步:登录后，cd 到您的项目目录并将其设置为远程到您的 heroku 应用程序。 heroku git:remote -a YOUR-HEROKU-APP-NAME

第 4 步:在终端中运行以下所有命令

heroku buildpacks:add https://github.com/heroku/heroku-buildpack-chromedriver
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-google-chrome
heroku config:set CHROME_DRIVER_PATH=/app/.chromedriver/bin/chromedriver
heroku config:set CHROME_BINARY_PATH=/app/.apt/opt/google/chrome/chrome

第 5 步:从浏览器登录 heroku 并导航到您的应用程序。转到设置并在 buildpacks 下添加 heroku/nodejs

第 6 步:这就是我的 index.js 的样子。注意:我的快速入口点位于 root-dir/server/index.js 内，我的 react 文件位于 root-dir/client/

内

const express = require('express');
const app = express();
const path = require('path');

// Serve static files from the React app. 
app.use(express.static(path.join(__dirname, '..', 'client/build')));


app.get('/api', async (req, res) => {
    const webdriver = require('selenium-webdriver');
    require('chromedriver');
    const chrome = require('selenium-webdriver/chrome');

    let options = new chrome.Options();
    options.setChromeBinaryPath(process.env.CHROME_BINARY_PATH);
    let serviceBuilder = new chrome.ServiceBuilder(process.env.CHROME_DRIVER_PATH);
    
    //Don't forget to add these for heroku
    options.addArguments("--headless");
    options.addArguments("--disable-gpu");
    options.addArguments("--no-sandbox");
  

    let driver = new webdriver.Builder()
        .forBrowser('chrome')
        .setChromeOptions(options)
        .setChromeService(serviceBuilder)
        .build();

    await driver.get('http://www.google.com');
    res.send(await driver.getTitle());
});

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`listening to port ${port} now...`);
});

第 7 步(如果您使用的是 React):现在在 root-dir/ 中的 package.json 中添加以下内容

"scripts": {
...
"heroku-postbuild": "cd client && npm install && npm run build"
}

第 8 步(如果您使用的是 React):在 root-dir/client/ 中的 package.json 内(即:用于 React 应用的 package.json)，添加以下行:

  "proxy": "http://localhost:5000/",

第 8 步:(如果您使用的是 React):在 root-dir/client/src/ 内，创建一个名为 setupProxy.js 的新文件并粘贴以下代码:

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy('/api', { target: `http://localhost:${process.env.PORT || 5000}/`}));
};

第 9 步:现在，您已准备好进行部署。确保安装了以下软件包:express、selenium-webdriver 和 chromedriver

第10步:现在将其推送到heroku

git add .
git commit -m "my app"
git push heroku master