はじめに
前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day3. LIFF スターターアプリの導入」と題して、LIFF スターターアプリをダウンロードして実際に動かしてみました。
Day4では、前回動かした LIFF スターターアプリを Netlify というサービスを使ってデプロイしていきたいと思います。
Netlify とは
Netlify を使うのは筆者も初めてなので、簡単にサービスの紹介をしておきたいと思います。
Netlify は、ウェブ開発者向けに設計されたスムーズで自動化されたワークフローを提供し、ウェブサイトやウェブアプリケーションの構築、デプロイ、ホスティングを簡素化します。
今回は LINE の公式ドキュメントで紹介されていたということもあり Netlify を使うことにしました。
「もっと詳しく知りたいよ！」という方は公式サイトをご覧ください。
デプロイ準備
デプロイ前にはいくつか準備が必要になるため、先にそちらを行っていきたいと思います。
Netlify アカウントの作成
まずはアカウントを作成を行っていきましょう。
公式サイト右上の「Sing up」から入っていきます。
アカウント作成はソースコード管理サービスのアカウントで行うことが出来るようです。
筆者は普段から使っている GitHub で作成したいと思います。
Netlify の CLI インストール
アカウント作成が完了したら、LIFF スターターアプリに戻り Netlify の CLI をインストールしていきたいと思います。
前回ダウンロードした LIFF スターターアプリのディレクトリ、line-liff-v2-starter の配下でインストールを行います。
$ npm install -g netlify-cli
これで netlify コマンドが使えるようになりました。
Netlify へのログイン
次に LIFF スターターアプリから Netlify へログインを行っていきます。
以下のコマンドを実行しましょう。
$ npm install -g netlify-cli
実行するとブラウザ上でログイン画面が表示されますので、Authorize をクリックします。
以下の画面が表示されればログインは完了です。
opennextjs-netlify のインストール
Next.js をデプロイする場合、SSR や ISR、API Routes などを適切に Netlify 環境にデプロイするためにこの公式プラグインが必要なようです。
line-liff-v2-starter 配下で以下のコマンドを実行し、インストールを行っておきましょう。
$ npm install -D @netlify/plugin-nextjs
netlify.toml の編集
LIFF スターターアプリの netlify.toml は、初期設定では Vanilla JS 用の記載になっています。
Next.js のフォルダでデプロイを行う場合は内容の変更が必要になります。
以下を参考に内容を修正してください。
[[plugins]]
package = "@netlify/plugin-nextjs"
[build]
command = "cd src/nextjs && npm install && npm run build"
publish = "src/nextjs/.next"
[template.environment]
LIFF_ID = "Your LIFF ID which is aquired from LINE Dev Center"
これでデプロイの準備は完了です。
ドラフトデプロイ
初めにドラフト状態でのデプロイを行っていきます。
以下の通り line-liff-v2-starter 配下に移動した後、デプロイコマンドを実行しましょう。
$ cd ../../
$ netlify deploy --build
実行するとデプロイの設定が聞かれます。
上下の矢印キーで選択が出来ますので、デプロイ先の site はCreate & configure a new siteを選択します。
This folder isn't linked to a site yet
? What would you like to do?
Link this directory to an existing site
❯ + Create & configure a new site
次にどの team 配下に site を作るかが聞かれます。デフォルトの team のまま進みます。
? Team: (Use arrow keys)
❯ testlinedevelopers's team:
最後に Site name を何にするか聞かれるので、一意の名前を入力しましょう。
? Site name (leave blank for a random name; you can change it later):
Site name に使えるのは英数字とハイフンのみです。
上記でドラフト状態でのデプロイは完了です。
ターミナルにWebsite draft URL:で URL が表示されますので、ブラウザでアクセスすると以下のように内容を見ることができます。
デプロイ
ドラフトの表示に問題がなければ、最後に本番環境へデプロイを行います。
オプションで--prodを追加して実行をおこないましょう。
$ netlify deploy --build --prod
以下は私のデプロイしたページです。
皆さんのでも内容を見ることができるようになっているのがわかると思います。
まとめ
ここまでで、LIFF スターターアプリのデプロイが完了しました。
次回は、今回デプロイした LIFF スターターアプリを実際に LINE ミニアプリ化して動作確認を行っていきたいと思います。
残りは 20 日！
気になる方は是非フォローやカレンダー購読をお願いします