Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

要約

「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組み込んでいくとすごく楽しいことになりそうな気がします。

motchi0214
AWS Samurai 2017 Alexa Champions
https://wp-kyoto.net
digitalcubeinc
デジタルキューブは AWS Partner Network (APN) アドバンスドテクノロジーパートナーです。
https://ja.amimoto-ami.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away