フロントエンド・テストツール比較 Puppeteer #03 SEOツール作ってみた

$ brew install heroku/brew/heroku

$ heroku login
# herokuアカウントのemail, passwordを入力します。

# ディレクトリを作成
$ mkdir google-search-result
$ cd google-search-result

# nodeのバージョンを設定(nodenvなど他のやつ使っている人はそれ使ってください)
$ brew install nodebrew
$ nodebrew install stable
$ nodebrew use v8.11.1

# Gitを設定
$ git init

# npmを設定
$ npm init -y
$ npm i puppeteer --save
$ npm i koa koa-router koa-bodyparser -- save

# gitignoreを作成（おまけです） gibo -lで設定可能な値を確認出来ます
$ brew install gibo
$ gibo macOS >> .gitignore
$ gibo JetBrains >> .gitignore
$ gibo Node >> .gitignore

# Herokuを設定
$ heroku create google-search-result
$ heroku git:remote -a google-search-result

# puppeteerのDeployに必要なビルドパックを設定
$ heroku buildpacks:set heroku/nodejs
$ heroku buildpacks:add https://github.com/CoffeeAndCode/puppeteer-heroku-buildpack

# HerokuにDeploy時の実行設定ファイルを作成
$ echo "web: node index.js" > Procfile

# Herokuにpush & deploy
$ git add .
$ git commit -am "make it better"
$ git push heroku master

const puppeteer = require('puppeteer');
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');

const app = new Koa();
const router = new Router();
const LAUNCH_OPTION = process.env.DYNO ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] } : { headless: false };

router.post('/', async (ctx, next) => {
  const body = ctx.request.body;
const text = body.text;
const keys = text.split(' ',3)
console.log('*text***')
console.log(text)
console.log('*keys***')
console.log(keys)
console.log('*ctx.request.body***')
console.log(ctx.request.body)
ctx.body = await crawler(keys);
});

app.use(bodyParser());
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(process.env.PORT || 3000);

const crawler = async (keys) => {

  // 初期設定
  const google = "https://www.google.co.jp/";
  const maxKeyNum = 3;    // 最大いくつまでキーワード検索を行うか(変更可能)
  const maxCrawlPage = 3; // 最大何ページまで検索を行うか

  // キーワードを「1」[1 2],[1 2 3]と検索するかのフラグ。 falseの場合は一つずつキーワード検索を行う
  const keyJoinFlag = true;

  // 検索に使うキーワード
  const searchUrl = keys[0];
  const searchKeys = keys.slice(1);

  // ブラウザを起動
  const browser = await puppeteer.launch(LAUNCH_OPTION);
  const page = await browser.newPage();

  // 引数でキーワードがなければ指定したURLのキーワードを取得
  if (searchKeys.length === 0) {
    console.log('キーワードを' + searchUrl + 'から取得します');
    await page.goto(searchUrl);
    const getSearchKey = await page.evaluate(() => {
      const keywords = document.querySelector('head meta[name="keywords"]').getAttribute('content');
    const splitKeywords = keywords.split(',');
    return splitKeywords;
  });
    searchKeys = getSearchKey;
  }

  // 検索開始
  let iputKey = '';
  let addKey = '';
  let attachments = [];
  keySearch: for (var i = 0; i < searchKeys.length; i++) {
    if (i === maxKeyNum) break;

    inputKey = `${addKey} ${searchKeys[i]}`;
    console.log(`-----検索を「${inputKey}」で行います-----`);

    // google検索
    await page.goto(google);
    await page.type('input#lst-ib', inputKey);
    await page.click('input[name="btnK"]');
    await page.waitFor(1000);

    // // 検索結果一覧
    // var search_result = await page.$$('div.srg div.g');

    // 検索結果一覧から対象URLを検索
    let rank = 1;
    let hitFlag = false;

    crawl: for(var searchPage = 0; searchPage < maxCrawlPage; searchPage++){
      // 検索結果一覧
      var search_result = await page.$$('div.srg div.g');
      rankCheck:for(var order = 0; order < search_result.length; order++){
        if (await search_result[order].$(`a[href="${searchUrl}"]`)){
          hitFlag = true;
          console.log(`-----${rank}件目でHITしました-----`);
          break;
        }
        rank++;
      }
      if (hitFlag) break;
      // 次のページおす処理
      await page.click('#pnnext');
      await page.waitFor(1000);
    }
    if (hitFlag === false) console.log('----圏外----');
    attachments.push({text:`keyword=${inputKey}, rank=${hitFlag === true ? rank : '圏外'}`});
    if(keyJoinFlag) addKey = inputKey;
  }

  browser.close();
  const slackBody = {
    response_type: 'in_channel',
    text: `${searchUrl}の検索結果`,
    "attachments": attachments
  };
  return slackBody;
}

{
  "name": "{アプリ名}",
  "version": "1.0.0",
  "description": "none",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.5.0",
    "koa-bodyparser": "^4.2.0",
    "koa-router": "^7.4.0",
    "puppeteer": "^1.3.0",
    "save": "^2.3.2"
  },
  "devDependencies": {},
  "repository": {
    "type": "git",
    "url": "https://git.heroku.com/{アプリ名}.git"
  }
}

$ node index.js
# ブラウザでlocalhost:3000

/gsr http://creaith.jp creaith

Error: Failed to launch chrome! /user_code/node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory TROUBLESHOOTING: