[AWS] API Gateway와 JSON 서버에서 동적 html 렌더링을 시도했습니다.

9971 단어 APIGatewayapiAWS

API Gateway와 JSON 서버에서 동적 html 렌더링을 시도했습니다.



AWS의 API Gateway와 DynamoDB와 Lambda로 서비스 구축하고 싶었던 동기가 있었기 때문에 이번에는 API Gateway를 만져 보았다.
  • 특정 URL에 웹 브라우저로 액세스
  • API Gateway가 JSON 데이터를 가져 와서 HTML로 렌더링하고 표시합니다.

    라는 심플한 구조입니다.

    이번에는 하지 않지만, API Gateway는 통합 요청 등의 기능을 사용하면 Lambda를 사이에 두지 않아도 DynamoDB에 액세스할 수 있습니다. 그래서 /1에 액세스하면 DynamoDB가있는 테이블의 id 1에 액세스하여 필요한 데이터를 JSON 형식으로 가져온 다음 해당 데이터를 APIGateway의 통합 응답으로 html에 매핑하고 반환하는 것처럼 간단합니다. 웹 응용 프로그램을 만들 수 있습니다. 그 촉감만 써 갑니다.

    하는 방법



    REST API 등으로 만든다.



    이런 식으로 적당하게 만들어



    GET 메소드 추가



    엔드포인트에 htps // j 그랬다. 오키바. 메/v1/j 그런/피 WpM200513171710 같은 JSON을 돌려주는 URL을 넣는다. Lambda 라든지 연결시켜도 좋지만 그 경우는 AWSサービス 나중에 쓰겠지만 Mock이면 통합 응답으로 매핑할 수 없어 빠집니다.

    이번에 돌아오는 데이터는 이것입니다.
    {
  "statusCode": 200, 
  "body": [
    {
      "id": 1,
      "name": "JavaScript",
      "tel": "08000000000"
    },
    {
      "id": 2,
      "name": "Object",
      "tel": "09000000000"
    },
    {
      "id": 3,
      "name": "Node",
      "tel": "07000000000"
    }
  ]
}



    다음은 여기의 メソッドレスポンス 와 統合レスポンス 를 만난다.



    메서드 응답에서 200 상태에서 text/html가 브라우저로 돌아가도록 설정합니다.
    이 근처의 application/json를 text/html로 바꾸면 k.



    다음은 통합 응답입니다만, 이것도 이 근처의 application/json 를 text/html 로 바꾸면 k.
    htps // j 그랬다. 오키바. 메/v1/j 그런/피 WpM200513171710이 200을 반환했을 때의 처리 밖에 쓰지 않았지만 일단 이것으로 OK


    #set($inputRoot = $input.path('$.body'))

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css"
        />
        <title>API Gateway</title>
    </head>
    <body>
        <h1>Qiitaテスト</h1>
        <table border="1">
            <tr>
                <td>id</td>
                <td>name</td>
                <td>tel</td>
            </tr>
            #foreach($elem in $inputRoot)
            <tr>
                <td>$elem.id</td>
                <td>$elem.name</td>
                <td>$elem.tel</td>
            </tr>
            #end
        </table>
    </body>
</html>

    매핑은 VTL이라는 템플릿 엔진?
    htps : // / cs. 아 ws. 아마존. 이 m/그럼_jp/아피가테와y/ぁてst/로 ゔぇぺぺ구이데/아피가테와 y-마핀 g-mp ぁ테-레후페렌세. HTML
    #foreach($elem in $inputRoot)
<tr>
    <td>$elem.id</td>
    <td>$elem.name</td>
    <td>$elem.tel</td>
</tr>
#end

    그러면 이전 화면으로 돌아갑니다 テスト⚡


    테스트 라든지 포치 포치하고 있으면, 제대로 html가 돌아 준다면 오.



    API를 배포하여 누구나 액세스할 수 있도록 하고, 스테이지명은 적당히 develop라든지 stage라든지로 좋다고 생각한다.



    같은 URL이 발행되어 완료입니다.



    Mock을 통합 응답으로 사용하려고 노력하는 이야기





    그림으로 말하면 여기가 $input.json('$') 를 사용할 수 없었기 때문에 2주간 정도 빠졌습니다

    스택 오버플로에 쓰기

    이전에 JSON을 반환하는 무료 API를 3 분 안에 만드는 방법을 작성했지만 이번에는 htps // j 그랬다. 오키바. 메/ 요청을 씹지 않고 AWS 서비스 내에서 완결시키려는 MOCK이었지만 훌륭하게 빠졌습니다.
    • JAWS-UG 초보자 지부 & 지바 지부 #26 신인 씨 환영! 핸즈온 <(온라인)
    API Gateway + Lambda CORS 관련 오류 해결

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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