Zenn
🍣

新しくなったLINE LIFF Starter v2をNetlifyにCLIからデプロイする

2022/01/02に公開
Netlify
liff
tech

LINEのフロントエンドフレームワークLIFFのスターターがNextjs, Nuxtjs, VanillaなどのSSR可能なWebフレームワーク版に変わっていた。また前はherokuにデプロイするよう案内していたが、当然これもNetlifyに変わっていた。
https://github.com/line/line-liff-v2-starter

ただ試したいだけなら、READMEにあるDeploy to Netlifyボタンを押せばいいだけだと思うが、今回たまたまNextjsをCLIでデプロイしたかった。が、意外にもエラーでハマったのでメモ。

eslintrcのエラー

Error: Failed to load config "next/babel" to extend from.

babel/eslintが古くなってbabel/parserになったためかeslintrcの設定がロードできない的なエラーがでた。そこでeslintrcのnext/babelを削除した。まぁlintなんで構文エラーやお作法の警告をしてくれるだけでしょう、大丈夫だろう。代わりにbabel/parserを入れた。

yarn add @babel/parser --dev

Deployできない

デフォルトではvanillaのbuildディレクトリをデプロイするので、next exportをnextjsのbuildコマンドに追加し、ルートのnetlify.tomlファイルのコマンドやパスを変更。

変更があったファイルの最終系

//.eslintrc
{
  "extends": ["next", "next/core-web-vitals"],　// next/babelを削除
}

//package.json
{
  "name": "liff-starter-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 9000",
    "build": "next build && next export", // && next exportを追加
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@line/liff": "2.16.0",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/parser": "^7.16.7", // 追加
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1"
  }
}

//netlify.toml
[build]
  command = "cd src/nextjs && yarn install && yarn build"
  publish = "src/nextjs/out"

[template.environment]
  LIFF_ID = "your LIFF ID" // ここは環境変数で設定するので不要とおもったが一応ベタ書きした…

Yarn版のビルドコマンド

LIFF_ID="your LIFF ID" yarn run build

あとはREADMEのコマンド通りやれば動くはず。

Discussion