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を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が読み込まれます。
参考記事
以下の記事を参考にさせて頂きました。