입문

최근 사건에서 접촉AWS CDK했기 때문에 이 기사가 생각났다.이 CDK는 AWS의 컨트롤러를 만지지 않아도 클라우드 환경을 구축할 수 있어 매우 편리하다.
CDK에 관해서는 과거 보도 에서 만져봤기 때문에 거기를 참고했고 React+TypeScript에서 개발을 시도했습니다LIFF도했죠과거 보도. 거기를 참고하세요.이번에 이 두 개를 조합하여 AWS 콘솔을 터치하지 않고 LIFF를 개발했다.

이번 내용.

참조유형적 방법의 문장.이 글은 S3와 CloudFront에서 정적으로 React에 의뢰한 페이지입니다.이번에는 그것까지 더해서 LIFF 환경을 구축해 봤습니다.
구성은 다음과 같다.

즉, CloudFront를 통해 S3의 정적 사이트(이번은 LIFF 응용 프로그램)를 방문하는 것이다.

실시

이번에는 자신의 과거 보도와 유형 방법의 보도에서 샘플 코드를 인용하여 실시한 것이기 때문에 CDK에 관한 원본 코드는 여기에 게재되지 않습니다.전체 코드는 여기 를 참조하여 공개하십시오.
LIFF의 부분은 사용자의 로그인을 최초로 확인하고 (없으면 로그인 화면으로 이동) 사용자 프로필을 얻는 느낌이다.

import React, { FC, useState, useEffect } from 'react'
import { Profile } from '@line/bot-sdk'
import './App.scss'

const App: FC = () => {
  const [profile, setProfile] = useState<Profile>({
    displayName: '',
    userId: '',
    pictureUrl: '',
    statusMessage: '',
  })

  useEffect(() => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      if (!liff.isLoggedIn()) {
        liff.login()
      }
      liff.getProfile()
        .then(profile => {
          setProfile(profile)
        })
        .catch((err) => {
          console.log('error', err)
        })
    })
  }, [])

  return (
    <div className="App">
      <div>
        {profile.displayName}
      </div>
      <div>
        {profile.pictureUrl}
      </div>
      <div>
        {profile.statusMessage}
      </div>
      <div>
        {profile.userId}
      </div>
    </div>
  );
}

export default App;

별거 아니지만 지난번liff-type

const liff = window.liff

나는 이런 형식으로 먼저 선언할 필요가 있다고 착각했지만 필요하지 않은 것 같아서 그것만 주의했다.

이점

내용은 이렇지만 이대로 기사를 끝내는 것은 좋지 않기 때문에 CDK로 쓸 수 있는 기쁨에 대해 쓰고 싶습니다.
응, 정적 사이트만 구축했다면 GitHub Pages 따로 사용할 수 있을 것 같지만 캐시와 접근 제한 등 상세한 설정CloudFront 등 CDN(콘텐츠 전송 네트워크)을 사용하지 않으면 안 될 것 같아서 이번처럼 실시하지 않을까 싶다.이때 AWS의 콘솔을 직접 터치하는 것도 방법이지만 수동으로 조작하면 어딘가에 재현 절차를 기록하지 않으면 재현이 어려워진다.
그럴 때 쓴다CloudFormation. 하지만 쓴 사람이 알면 그건 json 라암으로 설정 파일을 쓰는 형식 자원의 수가 많아지면 고통스러워진다(또 문법 오류도 찾기 어렵다).이럴 때 CDK를 사용하면 AWS를 편안하게 개발할 수 있으니 추천합니다.

마지막

이번에는 CDK로 LIFF 어플리케이션을 만들었습니다.역시 간단하게 만들었으니 다른 서비스 제휴를 다시 해보고 싶습니다.