Google App Engineにmercury-parserをデプロイしてみる
発端
- 「Mercury Web Parser API を 2019/4/15 でシャットダウンするよ」とメールが来た。
- Chrome拡張で便利に使っていたので、なくなると困る。
- なのでとりあえずGoogle App Engineにデプロイする事にした。
作業環境
- Windows 10 Pro x64
-
Git for Windows がインストール済み
-
Node.js 8.15.1 がインストール済み
-
App Engine スタンダード環境で Node.js を使用するためのクイックスタート などを参考にGoogle App Engineにプロジェクトを作成する
-
Google Cloud SDK がインストール済み
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", ← 追加
~ 中略 ~
},
- Windows 10 Pro x64
- Git for Windows がインストール済み
- Node.js 8.15.1 がインストール済み
- App Engine スタンダード環境で Node.js を使用するためのクイックスタート などを参考にGoogle App Engineにプロジェクトを作成する
- Google Cloud SDK がインストール済み
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", ← 追加
~ 中略 ~
},
git clone https://github.com/postlight/mercury-parser.git
- クローンしたフォルダに app.yaml と app.js と .gcloudignore を追加する。
runtime: nodejs8
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.');
});
.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を追加。
"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にデプロイしてみる
手順
- mercury-parserをクローンしたフォルダをコマンドプロンプトで開き、
gcloud app create
を実行する。
-
gcloud app create
は最初の1回のみ実行する。
gcloud app create
を実行する。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) のひな形を作成する事が出来る。 -
yarn は
npm install -g yarn
でインストール出来る。 -
yarn watch:test <入力したURLのドメイン名>
でテストが通るようになったら、yarn test_build
でdist/mercury.js
をビルドしてみる。 -
yarn test_build && npm start
でローカル実行して試すも良し、yarn test_build && gcloud app deploy --project=<プロジェクトID>
でデプロイするも良し。
ついでに
Author And Source
この問題について(Google App Engineにmercury-parserをデプロイしてみる), 我々は、より多くの情報をここで見つけました https://qiita.com/kik0220@github/items/3246ee2b8724aa19068a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .