Serverless Framework에서 WordPress 기사 목록을 표시하는 페이지 만들기

Serverless Framework로 웹 페이지 만들기 의 계속입니다.

할 수있는 것

소스 코드 : htps : // 기주 b. 이 m / 히데오카모토 / sls-rdp rs-f ronten d

라이브러리 설치

node-wpapi 라는 superagent 래퍼 라이브러리가 있으므로 그것을 사용합니다. WP API의 개발에도 관여하고 있는 분이 만들어진 라이브러리이므로, WP API로 무언가하고 싶을 때는 우선 이 라이브러리 사용 특히 편리합니다.

$ npm install --save wpapi

node_module을 Lambda와 함께 제공해야하므로 다음과 같이 지정하십시오.

serverless.yml

package:
  include:
    - node_modules/

Lambda에서 WP API 호출

다음과 같이 WPAPI 객체에 WP API 엔드포인트를 지정한 후 posts() 메서드에서 게시물을 가져옵니다. Promise에 대응하고 있으므로, then과 cach로 처리합시다.

index.js

module.exports.index = (event, context, callback) => {
    const wp = new WPAPI({ endpoint: 'http://wp-kyoto.net/wp-json' });
    wp.posts().then(function( data ) {
      const renderedContent = createListHtml(data)
      const renderedPage = renderFullPage( renderedContent, data );
      callback(null, renderedPage);
    }).catch(function( err ) {
        callback(err);
    });
};

그리고는 취득한 값을 HTML에 밀어 넣고, callback의 제2 인수에 건네주면 OK입니다.

API Gateway 측 설정

API Gateway는 기본값으로 JSON을 반환하므로 응답 헤더를 다시 씁니다.

serverless.yml

functions:
  index:
    handler: src/index.index
    events:
      - http:
          path: v1
          method: get
          integration: lambda
          response:
            headers:
              Content-Type: "'text/html'"
            template: $input.path('$')

여기까지 실시한 후, sls deploy 하면 API 엔드 포인트가 표시되므로, 동작 확인해 둡시다.

NEXT:React ServerSide Rendering

Apex에서는 이미 시도했습니다. 하지만 Serverless Framework에서는 아직이므로 이쪽도 해 보겠습니다.

Serverless Webpack 사용 요약 라고 하는 기사가 다행히도 그동안 나왔을 뿐이므로, 이것을 참고로 webpack으로 할 예정.