Google App Engineにmercury-parserをデプロイしてみる


発端

  • Mercury Web Parser API2019/4/15 でシャットダウンするよ」とメールが来た。
  • Chrome拡張で便利に使っていたので、なくなると困る。
  • なのでとりあえずGoogle App Engineにデプロイする事にした。

作業環境

mercury-parser リポジトリの取得

  • 適当なフォルダでGitHubのリポジトリからクローンする。
git clone https://github.com/postlight/mercury-parser.git

app.yaml app.js .gcloudignore package.json を用意する

  • クローンしたフォルダに app.yaml と app.js と .gcloudignore を追加する。
app.yaml
runtime: nodejs8
app.js
const express = require('express');
const Mercury = require('./dist/mercury');

const app = express();

app.get('/', (req, res) => {
  const url = req.query.url;
  if (!url || url === undefined) {
    res.status(200).end('');
    return;
  }
  let timeoutID;
  Mercury.parse(url)
    .then(function(result) {
      res.status(200).send(result).end();
      clearTimeout(timeoutID);
    })
    .catch(
      (timeoutID = setTimeout(function() {
        res.status(200).end('');
      }, 20000))
    );
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});
.gcloudignore
.agignore
.babelrc
.circleci/
.eslintignore
.eslintrc
.gcloudignore
.git
.gitattributes
.github/
.gitignore
.nvmrc
.prettierignore
.prettierrc
.remarkrc
assets/
CHANGELOG.md
cli.js
CODE_OF_CONDUCT.md
CONTRIBUTING.md
dist/generate-custom-parser.js
dist/generate-custom-parser.js.map
dist/mercury.js.map
dist/mercury.web.js
fixtures/
karma.conf.js
LICENSE-APACHE
LICENSE-MIT
node_modules/
preview
README.md
RELEASE.md
rollup.config.js
rollup.config.web.js
score-move
scripts/
src/
yarn.lock
  • package.jsonは元からあるファイルを改変する。
    • scriptsにstartを追加。
    • enginesの書式をGoogle App Engine方式に変更。
    • dependenciesにexpressを追加。
package.json
  "scripts": {
    "start": "node app.js",  追加
   中略 
  },
   中略 
  "engines": {
    "node": "8.x.x"  変更
  },
   中略 
  "dependencies": {
    "express": "^4.16.4",  追加
   中略 
  },

ここまで実施済みなのが このリポジトリの「feat-gae-deploy」ブランチ

ローカルで実行してみる

ローカルで軽く試してみる場合は、mercury-parserをクローンしたフォルダをコマンドプロンプトで開き、↓を実行すると8080番ポートでサーバーが起動する。

npm install
npm start
  • npm installは最初の1回目か package.json で dependencies などを変更した時のみ実行する。
  • http://localhost:8080/?url=<パースしたいURL> で動作を確認出来る。

Google App Engineにデプロイしてみる

手順

  1. mercury-parserをクローンしたフォルダをコマンドプロンプトで開き、gcloud app create を実行する。
  2. gcloud app create は最初の1回のみ実行する。

<プロジェクトID>は作成したGoogle App Engineの プロジェクトのID
  プロジェクトの名前 とは別なので注意。

gcloud app create --project=<プロジェクトID>

↑で、デプロイするリージョンを聞かれるので、好きな場所を指定する。

gcloud app deploy --project=<プロジェクトID>

続けるか聞かれるので、続けるならEnterキーを押す。
ファイルのアップロードとサービスの起動が実行される。



デプロイ完了!

動作を確認してみる

アップロードした app.js は
https://<プロジェクトID>.appspot.com/?url=<パースしたいURL>
でパースした結果をJSONで返してくるので、適当なURLで試してみる。

せっかくなので Custom Parser(extractor) を作ってみる

うまくパースされないページなどがあると自分で Custom Parser(extractor) を作ってみたくなるもの。

  • mercury-parserをクローンしたフォルダで yarn generate-parser を実行し、URLを入力すると、 Custom Parser(extractor) のひな形を作成する事が出来る。
  • yarnnpm install -g yarn でインストール出来る。
  • yarn watch:test <入力したURLのドメイン名> でテストが通るようになったら、 yarn test_builddist/mercury.js をビルドしてみる。
  • yarn test_build && npm start でローカル実行して試すも良し、 yarn test_build && gcloud app deploy --project=<プロジェクトID> でデプロイするも良し。

ついでに

  • package.json の scripts によく使うコマンドを追加すると yarn で呼び出せて便利。

    • "deploy": "gcloud app deploy --project=<プロジェクトID>",yarn deploy とか。
    • "log": "gcloud app logs tail -s default --project=<プロジェクトID>",yarn log とか。
  • デプロイしたプロジェクトが呼び出されまくって無料枠を超えてしまうなど怖い事もありますので、
    必要に応じて使用量の制限はしておきましょう。