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の設定を行います。

一番上に

importpathfrom'path'importfsfrom'fs'

を追加してモジュールを読みこみ、

exportdefault{// いろいろ設定が書いてあり...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を1つしか登録できないため、本番環境のものとは別にローカル環境用の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の2ファイルを作成します。

次に、.env.devに開発環境用のliffId、.env.prodに本番環境用のliffIdを記述します。

liffId=開発環境用のliffId

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を使って環境変数を環境ごとに読み分ける