47
40

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-08-25

要約

「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から配信する

スクリーンショット 2016-08-25 17.34.17.png
とりあえず細かいことはいいんだよ!ってことで、レスポンスの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に設定しましょう。
そうしないと下の画像のようにエスケープされます。
スクリーンショット 2016-08-25 17.33.10.png

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

動かした結果

スクリーンショット 2016-08-25 18.08.02.png
動きました。
API Gatewayからの引数を受け取る様にしたり、React RouterとかRedux組み込んでいくとすごく楽しいことになりそうな気がします。

47
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
40