Nuxt.js의 로컬 개발 환경에서 LIFF를 디버깅하는 방법

소개

LIFFv2에는 LINE 로그인 기능이 있습니다만, 로그인 후의 리디렉션처가 LINEDevelopers로 등록한 https 의 URL에 고정되어 버리기 때문에, 로컬에서의 개발이 상당히 힘들어집니다.
그래서이 기사에서는 로컬 환경에서 쉽게 LIFF 디버깅을 수행하는 방법을 설명합니다.

실행 환경

Nuxt.js v2.12.2

macOS Catalina V10.15.3

localhost에 인증서 설정

localhost를 LINEDevelopers에 등록할 수 있도록 localhost에 인증서를 설정합니다.

mkcert 설치

mkcert 을 사용하여 인증서(자체 서명)를 생성합니다.

brew install mkcert
mkcert -install
mkcert localhost

다음 인증서가 발행됩니다.

localhost.pem

localhost-key.pem

nuxt.config.js 편집

nuxt.config.js에서 server를 설정합니다.

맨 위에

import path from 'path'
import fs from 'fs'

를 추가하여 모듈을 읽고,

export default {

  // いろいろ設定が書いてあり...

  server: {
    port: 3000,
    host: 'localhost',
    https: process.env.NODE_ENV === 'production' ? {} : {
      key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem'))
    }
  }
}

export default 안에 server 속성을 추가합니다.

이미 server 프로퍼티가 설정되어 있는 분은 이하의 부분만을 추가해 주세요.

https: {
  key: fs.readFileSync(path.resolve(__dirname, "localhost-key.pem")),
  cert: fs.readFileSync(path.resolve(__dirname, "localhost.pem"))
}

git을 사용하는 사람은 .gitignore에 다음을 추가하십시오.

localhost-key.pem
localhost.pem

이것으로 인증서 설정이 완료됩니다.

npm run dev

하면 https에서 서버가 시작됩니다.

로컬 환경에 대한 LIFF 작성

LIFF에서는 엔드포인트 URL을 하나만 등록할 수 있으므로 프로덕션 환경과는 별도로 로컬 환경용 LIFF를 작성합니다.

LINE 로그인 채널을 열고 엔드포인트 URL에 https://localhost:3000를 지정하여 LIFF를 작성하십시오.
※nuxt.config.js의 server 프로퍼티로 localhost 이외나 3000번 포트 이외를 지정된 분은 그쪽을 등록해 주세요.

liffId를 환경 변수로 설정

로컬 환경과 프로덕션 환경에서 자동으로 liffId를 전환하려면 liffId를 환경 변수로 설정합니다.

먼저 dotenv 모듈을 설치합니다.

npm i @nuxtjs/dotenv

config 폴더를 만들고 .env.dev 및 .env.prod의 두 파일을 만듭니다.

다음으로, .env.dev 에 개발 환경용의 liffId, .env.prod 에 프로덕션 환경용의 liffId 를 기술합니다.

.env.dev

liffId=開発環境用のliffId

.env.prod

liffId=本番環境用のliffId

마지막으로 config 파일을 설정합니다. nuxt.config.js를 열고 modules에 다음 설명을 추가하십시오.

modules: [

  // いろいろ設定が書いてあり...

  [
      '@nuxtjs/dotenv',
      {
        filename: process.env.NODE_ENV === 'development' ? './config/.env.dev' : './config/.env.prod'
      }
    ]
],

이것으로 환경 변수 설정이 완료됩니다.

※git을 사용하고 있는 분은 .env.prod 와 .env.dev 를 .gitignore 에 추가해 주세요.

※GitHub Actions에서 자동 배포를 하고 있는 경우는 .gitignore 에 추가해 버리면 build 시에 로드되지 않기 때문에 주의해 주세요.

환경 변수 로드

liff.init의 liffId를 다음과 같이 다시 씁니다.

liff
  .init({
    liffId: process.env.liffId // 環境変数を読み込む
  })
  .then(() => {
    // 成功した時の処理
  })
  .catch((err) => {
    // 失敗したときの処理
  });

이것으로 모든 설정이 완료되었습니다.
npm run dev 를 하면 개발 환경용의 liffId가, npm build 이나 npm generate 등을 하면 프로덕션 환경용의 liffId가 읽혀집니다.

참고 기사

이하의 기사를 참고로 했습니다.

【Nuxt.js】 로컬 환경을 https로 기동하는 방법

Nuxt에서 @nuxtjs/dotenv를 사용하여 환경 변수를 환경별로 읽습니다.