소개

개인적으로 최근에 신경이 쓰인 LIFF를 시작하기 위해 LIFF v2 starter app을 시도해 보았습니다.
이 게시물에서는 항상 익숙한 VSCode와 Azure로 환경을 구축합니다.

'Deploy the app using any other server platform' 섹션을 참고하고 싶습니다.

전제조건으로는

LINE 계정이 있습니다

VSCode와 Git을 사용할 수 있습니다

Azure에서 AppService를 만들 수 있습니다.

PC의 OS는 뭐든지 OK

입니다.

즉시 문서에 따라 진행됩니다.

VSCode에서 준비

리포지토리 복제

VSCode 터미널에서 복제하려는 디렉토리로 이동하여

git clone https://github.com/line/line-liff-v2-starter.git

VSCode 확장 기능 Azure Tools 설치

VSCode 확장 프로그램 검색에서 Azure Tools를 검색하여 설치합니다.

Azure 준비

AppService를 준비합니다.
런타임 스택은 Node10 LTS를 선택합니다.
AppService 플랜은 무료(무료)로 OK입니다.

또한 여기에서 만든 AppSerivce URL을 복사합니다.
나중에 채널을 추가할 때 사용합니다.

LINE 계정 준비

공급자 만들기

LINE 계정으로 로그인합니다.
처음 로그인하면 개발자 정보 입력 화면이 표시됩니다. 개발자 이름과 이메일 주소를 입력하여 LINE Developers 콘솔의 개발자 계정을 만듭니다.

로그인하면 적절한 공급자를 만드십시오.
공급자는 무엇입니까? 등의 의문은 공식 사이트 에서 확인할 수 있습니다.

공급자에 채널 추가

만든 공급자에 LINE 로그인 채널을 추가합니다.

채널에 LIFF 앱 추가

만든 채널에 LIFF 앱을 추가합니다.
LIFF 앱을 추가할 때 LIFF 앱을 배포할 서버의 끝점을 입력해야 하므로 위에서 복사한 AppSerivce URL을 입력합니다.


LIFF 앱을 추가하면 아래와 같이 LIFFID와 LIFFURL을 알 수 있으므로 이 두 가지를 복사합니다.

앱 및 서버 준비

배포 준비

공식 문서에서는 Heroku 이외에 배포할 때는 app.json , index.js , package.json , Procfile 아래와 같이 변경합니다.

public/liff-starter.js

    const useNodeJS = false;
    const defaultLiffId = "{上記で取得したLIFFID}";

Azure AppService에 배포

VSCode에서 Azure 확장 프로그램을 엽니다. (확실히 어딘가의 타이밍에 Azure에 로그인 정보를 입력하라는 메시지가 표시되므로 입력합니다.) 온다.



위에서 새로 만든 앱 서비스를 마우스 오른쪽 버튼으로 클릭하고 public/liff-starter.js → Deploy To WebApp를 선택하여 배포합니다.

LIFF 앱 확인

위에서 얻은 LIURL을 LINE 앱이나 일반 브라우저로 액세스하면 간단한 동작을 확인할 수 있습니다.
또한 여기 에서 각 동작의 차이를 확인할 수 있습니다.

사이고에게

급히 이번은 LIFF v2 starter app의 환경 구축까지로 합니다.
앞으로는 구체적인 사용법이나 기술적인 자세한 부분을 찾아가면 좋겠습니다.