ReactをAWS Lambdaの中でレンダリングさせて、API Gatewayから配信させてみた。 #React

要約

「AWS LambdaとAPI Gateway使ったらReactのServer Side Rendering(SSR)いい感じにできるんじゃね？」と思った~~けど、世の中そんなに甘くはなかった~~。

追記

意外と簡単に解決した。
http://qiita.com/yoshidasts/items/d58c555aed2693e99ae6

なぜやった

~~ついカッとなって~~
できるだけサーバ側の処理を考えずにReactをSSRしたいなーと思った結果、「Lambdaでレンダリングさせて、API GatewayからHTML配信すればええやん！」ってなった。

参考記事

手っ取り早く ES2015 で Lambda Function を書く
Apexとかappex.jsとかbabel的な処理はここ参考にしてください。

Lambdaファンクションを作る

babelをReactに対応させる。

何はともあれコンパイル後のJSをLambdaで走らせるので、バベりましょう。
あとついでにReactも入れておきます。

$ npm install --save react react-dom
$ npm install --save-dev babel-preset-react

{
    "presets": [
        "es2015",
        "react"
    ]
}

いざSSR

ディレクトリとかは、手っ取り早く ES2015 で Lambda Function を書く準拠です。
基本的にこれのコード書き換えでやってます。

functions/hello/src/index.js

import λ from 'apex.js';
import 'babel-polyfill';
import React, { Component } from 'react';
import { renderToString } from 'react-dom/server';

class App extends Component {
    render() {
        return (
            <div>
                <h1>hello React</h1>
                <p>This is a Example page rendered by AWS Lambda & React</p>
            </div>
        );
    };
}

function renderFullPage(renderedContent) {
  return `<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><div id="container">${renderedContent}</div></body></html>`;
}

export default λ( (e, ctx) => {
    const renderedContent = renderToString( <App /> );
    const renderedPage = renderFullPage( renderedContent );
    return (renderedPage);
});

デプロイ

$ npm run deploy

API Gatewayから配信する

とりあえず細かいことはいいんだよ！ってことで、レスポンスのContent-Typeをtext/htmlにしてさっき作ったLambdaを呼ぶようにします。

Mapping Templateを変更する

http://qiita.com/yoshidasts/items/d58c555aed2693e99ae6#mapping-template%E3%81%AE%E8%A8%AD%E5%AE%9A
にあるように、Lambdakからの戻り値のContent-Typeをtext/htmlに設定しましょう。
そうしないと下の画像のようにエスケープされます。

デプロイしたらURLが表示されるので、アクセスしてみましょう。

動かした結果

動きました。
API Gatewayからの引数を受け取る様にしたり、React RouterとかRedux組み込んでいくとすごく楽しいことになりそうな気がします。