React를 AWS Lambda에서 렌더링하여 API Gateway에서 전달해 보았습니다.

6622 단어 람다AWSLambdaReactAPIGateway

요약



「AWS Lambda와 API Gateway 사용하면 React의 Server Side Rendering(SSR) 좋은 느낌으로 할 수 있잖아?」라고 생각했지만, 세상 그렇게 달지 않았다.

추가



의외로 쉽게 해결했다.
ぃ tp // 이 m / 요시다 st / ms / d58c555 굳 d2693 99 꺾 6

왜 했어



마침내
가능한 한 서버측의 처리를 생각하지 않고 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 변경



ぃ tp // 이 m / 요시다 st / ms / d58c555 Ae d2693 A99 Ae 6 # Mapping Ge-mp % % 3 % 81 % Ae % A 8 % A 8 % A D % A 5 % Ae % 9 A
에서 볼 수 있듯이 Lambdak의 반환 값의 Content-Type을 text/html로 설정합시다.
그렇지 않으면 아래 이미지처럼 이스케이프 처리됩니다.


배포하면 URL이 표시되므로 액세스해 봅시다.

움직인 결과




움직였습니다.
API Gateway로부터의 인수를 받게 하거나 React Router라든지 Redux 편입해 나가면(자) 굉장히 즐거워질 것 같은 생각이 듭니다.
SERVERLESS FRAMEWORK를 사용해 보았습니다.
AWS Lambda를 사용하여 EC2 시작 및 중지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage