하고 싶은 일

LINE의 LIFF 앱 을 개발하고 있다면 수중 환경에서 시도하고 싶지만 https에서 실행이 필수이므로 ngrok과 같은 터널링 도구를 사용하여 https로 액세스 할 수 있도록했습니다. , ngrok 을 사용하면 아무래도 전송 속도가 느려져 버립니다.

특히 최근에는 Nuxt.js 등의 프레임워크를 사용한 SPA 앱을 만들 기회가 많습니다. SPA 앱에서는 처음 로드할 때 많은 파일을 로드해야 하며, 그렇게 되면 ngrok 전송 속도로는 시작 시작부터 확인하는 데 시간이 걸립니다.
앱이나 개발 환경에 따라서는 수십초에서 1분 정도 걸릴 수도 있고, 매우 DX: Developer Experience(개발 체험)가 좋은 개발이라고는 할 수 없습니다.

그래서 LIFF 앱 개발에서 DX를 향상시키기 위해서도 로컬 환경에서 https에서 실행할 수 있도록 해 보았습니다.

설정 절차

나는 과감하게 썼지만 공식 문서의 'HTTPS 설정을 사용한 예 할 수 있도록 하기만 하면 됩니다.

시도한 환경은 다음과 같습니다.

macOS Catalina

Version 10.15.5

Nuxt.js

Version 2.14.1

자체 서명된 인증서 작성

자체 서명된 인증서를 만들려면 mkcert을 사용합니다.

$ brew install mkcert
$ mkcert -install
$ mkcert localhost

위의 명령을 실행하면 인증서 파일이 만들어지므로 Nuxt.js 앱의 루트 디렉토리( nuxt.config.js 파일이 있는 디렉토리)에 배치합니다.

Nuxt.js 앱에서 서버 연결 설정 추가

그런 다음 Nuxt.js 앱에서 서버 연결 설정을 추가하려면 nuxt.config.js 파일을 추가합니다.
로컬 환경에서 https 연결 설정은 개발시에만 사용됩니다.

nuxt.config.js

import path from "path";
import fs from "fs";

let serverConfig = {};
if (process.env.NODE_ENV === "development") {
  // 開発時のみHTTPS 接続設定を構成する
  serverConfig = {
    port: 3000,
    host: "0.0.0.0",
    https: {
      // 作成した証明書ファイルを読み込む
      key: fs.readFileSync(path.resolve(__dirname, "localhost-key.pem")),
      cert: fs.readFileSync(path.resolve(__dirname, "localhost.pem"))
    }
  };
}

export default {
// 中略
  // HTTPS 接続設定を反映する
  server: serverConfig
};

앱 시작은 언제나처럼 yarn dev 또는 npm run dev 명령을 사용하면 https에서 실행할 수 있습니다.

LINE Developers의 LIFF 엔드 포인트 URL에 로컬 환경의 IP 주소 설정

나머지는 아래 그림과 같이 LINE Developers 에 있는 LIFF 엔드포인트 URL 항목에 로컬 환경의 IP 주소를 설정하기만 하면 됩니다.



이제 개발 환경의 PC 브라우저와 같은 네트워크에 있는 스마트폰의 브라우저에서 LIFF 앱을 이용할 수 있게 되었습니다.



브라우저의 주소란에 키 마크가 붙어 있기 때문에 https로 액세스 할 수있는 것을 알 수 있습니다.

요약

알고 버리면 매우 간단한 일이었습니다. 예전부터 웹 앱을 개발할 때 개발 서버의 HTTP 서버에 올레올레 인증서를 넣었습니다.
단 한 번에 무용의 좌절도 없어져 바삭바삭 개발할 수 있게 되므로, 곤란한 분은 꼭 시험해 보세요.