search
LoginSignup
6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Nuxt.js + LINE LIFF アプリをローカル環境にて httpsで実行してDX を向上する

やりたいこと

LINE のLIFF アプリ を開発していると、手元の環境で試してみたいと思うのですが、https での実行が必須なので ngrok などのトンネリングツールを使ってhttps でアクセスできるようにしていたのですが、ngrok を使うとどうしても転送速度が遅くなってしまいます。

特に最近はNuxt.js などのフレームワークを使ったSPA アプリを作る機会が多いです。SPA アプリでは初回ロード時に多くのファイルをロードしなければならず、そうなるとngrok の転送速度では起動開始から確認できるまでに時間がかかってしまいます。
アプリや開発環境によっては数十秒から1分程度かかることもあり、とてもDX: Developer Experience (開発体験) が良い開発とは言えません。

というわけで、LIFF アプリ開発でのDX を向上するためにもローカル環境にてhttps で実行できるようにしてみました。

設定手順

大げさに書きましたが、公式ドキュメントの「HTTPS 設定を用いた例」にあるとおり、自己署名入り証明書(いわゆるオレオレ証明書)を作り、その証明書を使ってNuxt.js の アプリケーション・サーバーを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 アドレスを設定するだけです。

スクリーンショット_2020-08-16_14_32_22.png

これで開発環境のPC ブラウザや、同じネットワークにあるスマートフォンのブラウザでLIFF アプリを利用できるようになりました。

IMG_C08D6CD842BF-1.png

ブラウザのアドレス欄に鍵マークがついていることからhttps でアクセスできていることが分かりります。

まとめ

分かってしまえばとても簡単なことでした。昔からWeb アプリの開発時には開発サーバーのHTTP サーバーにオレオレ証明書を入れていましたよね。
ほんの一手間で無用のイライラも無くなってサクサク開発できるようになりますので、お困りの方はぜひとも試してみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
6
Help us understand the problem. What are the problem?