Puppeteerでダイナミックレンダリングする2018-11-30基本的には下記のサイトが非常に参考になった。OGP対応はLambda@Edgeでダイナミックレンダリングする。この記事ではPuppeteerは使っていないが、Puppeteerで目的のダイナミックレンダリングが出来そうだったのでやってみた。基本的に上記のやり方を参考に進めて、キモであるダイナミックレンダリングするところだけ、Puppeteerを使うように変更した。今回は主にその部分の備忘録。ServerlessもWebpackも使っていない。全体の流れまずはざっくりとした全体の流れから。RequestなどのLambda@Edgeのライフサイクルイベントについては、公式がわかりやすい。以下、CloudFrontで配信するのが終わったあとのところから。Functionを準備して、Lambda上のエディタにペーストしてデプロイ。やっているのは、UserAgentがクローラーで、かつhtmlへのリクエストだったらダイナミックレンダリング用のカスタムヘッダーをつける、という感じ。installPuppeteerを使ってダイナミックレンダリングの処理を書く実装が終わったら、node_modulesとかも含めてzip圧縮してLambda上からzipでアップロードして、デプロイするという感じ。Serverlessを使うとzip化してデプロイの作業が効率化出来るので実案件とかだと使った方が良さそうか。package.jsonを生成する。installすると、Chromiumも一緒にダウンロードしてしまって、そうなるとLambdaの50MBの制限に容易に引っかかってしまう。Puppeteer1.7以降から追加された、puppeteer-coreをインストールするようにする。インストール出来たら実際にPuppeteerを使ってダイナミックレンダリングの実装をindex.jsに書いていく。#ff0;">を入れて全体が黄色になればOKという感じにした。これが出来たらnode_modulesやpackage.json、index.jsなど含めてzip化する。そのzipをLambdaにアップロードしてデプロイする。注意点Finderの右クリックでzip化してしまうとLambdaで動かした時にエラーが出てしまうzip化はコマンドで行うと問題なかった。*とかでzipにする。Requestのデフォルトの設定だと、WebSocketでPuppeteerとconnectするところでタイムアウトエラーになってしまった。試したところ、どうもLambdaの管理画面上で設定できる、メモリとタイムアウトまでの時間を変更する必要があった。デフォルトのマシンの性能だと非力すぎて、タイムアウトまでに処理が出来ない、ということのようだ。conditionsからGooglebotをチェックしてサイトにアクセスすることで確認出来る。ボットの時に黄色のページが表示されて、ボットじゃない時は元のページが表示されればOK。Googleも問題なさそう。Puppeteerでダイナミックレンダリングが出来た。Lambdaの仕組みからよく分かってなかったのでキャッチアップしながら進めて、内容的にもそこまで難しくもないだろうと思っていたが、Lambdaの50MBの制限やメモリを上げないといけなかった事とかハマるポイントはあった。実際はLambdaでPuppeteerを動すが出来たらあとはhtml取得して返すだけなので、動かすところまでがキモになりそう。etc..主にフロントエンドを中心に発信しています。