Heroku での Lightning Web コンポーネントオープンソースの使用
はじめに
このチュートリアルを使用して、Heroku で Lightning Web コンポーネントオープンソース (LWC OSS) プロジェクトを作成してデプロイします。
前提条件
- 確認済みの Heroku アカウント
- ローカルにインストールされた Node.js および npm
- ローカルにインストールされた Git。
- Eco dyno プランをサブスクライブしている (推奨)
低料金プランを使用してこのチュートリアルを完了することをお勧めします。資格のある学生の皆様は、新しい Heroku for GitHub Students プログラムを通じてプラットフォームクレジットを申請できます。
設定する
Heroku Command Line Interface (CLI) をインストールします。CLI は、アプリの管理やスケール、アドオンのプロビジョニング、ログの表示、ローカルでのアプリの実行に使用できます。
Heroku CLI には、一般によく使われている Git というバージョン管理システムが必要です。Git がまだインストールされていない場合は、先に進む前に次の手順を完了してください。
ご使用のプラットフォーム用のインストーラをダウンロードし、実行してください。
macOS
WindowsHeroku CLI のその他のインストールオプションについては、こちらを参照してください。
インストール後、コマンドシェルで heroku コマンドを使用できます。
Windows では、コマンドプロンプト (cmd.exe) または Powershell を起動して、コマンドシェルを開きます。
Heroku CLI にログインするには、heroku login コマンドを使用します。
$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com
このコマンドにより、Web ブラウザで Heroku ログインページが開きます。ブラウザですでに Heroku にログインしている場合は、ページのログインボタンをクリックします。
この認証は、heroku と git コマンドが正常に動作するために必要な操作です。
Heroku CLI のインストールや使用に問題がある場合は、アドバイスとトラブルシューティングステップについて、Heroku CLI のメイン記事を参照してください。
外部の HTTP/HTTPS サービスへの接続にプロキシを使用するファイアウォールを利用している場合は、heroku コマンドを実行する前に、ローカルの開発環境で HTTP_PROXY または HTTPS_PROXY 環境変数を設定してください。
LWC プロジェクトを作成する
Lightning Web コンポーネントプロジェクトを作成するには、Lightning Web ランタイム (LWR) を使用します。
このツールは、短いセットアップ手順をユーザーに示し、Lightning Web コンポーネントプロジェクトの足場を構築します。
$ npm init lwr # Follow the on-screen instructions
# Select the "Single Page App" project
# Select the "LWC" option
$ cd ExampleLWCProjectName
Git でのコードの追跡
デプロイ方法は他にもありますが、コードを Heroku にデプロイするための最も一般的な方法は git を使用する方法です。プロジェクト用の Git リポジトリを作成し、ファイルをコミットします。
当社では、平等に関する当社の価値観に適合するよう、インクルーシブでない用語を可能な範囲で変更しました。当社製以外のシステムに関する記述では、インクルーシブでない用語をそのまま使用していますが、当社では開発者コミュニティに対し、よりインクルーシブな表現の採用を奨励しています。該当する用語については、技術的な正確さのために必要でなくなった時点での更新を予定しています。
リポジトリを作成する
次のコマンドを実行して、リポジトリを初期化します。
$ git init
Git では依然としてデフォルトで、デフォルトのブランチ名として master を使用しています。デフォルトのブランチを master から main に切り替えるには、新しいブランチをローカルで作成し、古いブランチを削除します。
$ git checkout -b main
$ git branch -D master
それ以降は、ローカル環境では main ブランチのみが認識されます。このブランチにファイルをコミットします。
ファイルを Git にコミットする
$ git add .
$ git commit -m “Initial commit”
これで、ローカル Git リポジトリでファイルを追跡するようになります。
アプリの依存関係を宣言する
Heroku では、ルートディレクトリに package.json ファイルがあると、LWC プロジェクトを Node.js アプリと認識します。Heroku では Node.js アプリを検出すると、公式の Node.js buildpack がアプリに追加され、これによってアプリの依存関係がインストールされます。
npm init lwr によって作成されるプロジェクトには、以下のような package.json ファイルが含まれています。
{
"name": "example-lwc-project",
…
},
"dependencies": {
"lwc": "2.5.8",
"lwr": "0.6.5"
},
"engines": {
"node": ">=14.15.4 <17"
}
}
ローカル依存関係をインストールする
ローカルディレクトリで npm install を実行して依存関係をインストールし、アプリをローカルで実行できるようにシステムを準備します。
$ npm install
npm install を実行すると、package-lock.json ファイルが自動生成されます。アプリをデプロイすると、Heroku は package.json を読み取って適切な Node バージョンをインストールし、package-lock.json を読み取って依存関係をインストールします。
新しい依存関係を追加すると、npm install でも、このファイルに適切な変更が加えられます。初期インストールや、依存関係へのすべての後続の変更の後で、このファイルをコミットするようにしてください。
$ git add .
$ git commit -m "Added package-lock.json"
Procfile を追加する
Procfileは、アプリを起動するために使用されるプロセスとコマンドを明示的に宣言するために Heroku アプリによって使用される特殊なプレーンテキストファイルです。
ファイル拡張子のない Procfile という名前のファイルをプロジェクトのルートディレクトリに追加します。次の行をファイルに追加します。
web: npm run start
この行では、単一のプロセスタイプの web と、それを実行するためのコマンドを宣言しています。webという名前が重要です。これにより、このプロセスタイプが Heroku の HTTP ルーティングスタックにアタッチされ、Web トラフィックを受信できることが宣言されます。
Procfile には追加のプロセスタイプを含めることができます。たとえば、アイテムをキューから外す処理を実行するバックグラウンドワーカーを宣言できます。このチュートリアルでは他の処理について説明しませんが、Procfile およびプロセスモデルで詳しい情報を参照できます。
ファイルを必ずコミットしてください。
$ git add .
$ git commit -m “Added Procfile”
アプリをローカルで実行する
アプリをローカルで実行する前に npm install がすでに実行されていることを確認します。
heroku local CLI コマンドを使用して、アプリケーションをローカルで開始します。
$ heroku local --port 5001
...
3:31:05 p.m. web.1 | > lwr-project@0.0.1 start
3:31:05 p.m. web.1 | > lwr serve --mode prod
3:31:07 p.m. web.1 | (node:4454) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
3:31:07 p.m. web.1 | (Use `node --trace-deprecation ...` to show where the warning was created)
3:31:09 p.m. web.1 | server running at: port: 5001 | mode: prod
Heroku プラットフォームと同じように、heroku local も Procfile を確認して実行するコマンドを判断します。
Web ブラウザで http://localhost:5001 を開き、アプリがローカルで実行中であることを確認します。
アプリのローカルでの実行を停止するには、ターミナルウィンドウに戻り、CTRL+C を押して終了します。
アプリをデプロイする
Git リモートは、他のサーバー上で稼働するリポジトリのバージョンです。アプリに関連付けられた、Heroku でホストされる特別なリモートにコードをプッシュすることにより、アプリをデプロイします。
Heroku アプリと Git リモートを作成する
Heroku でアプリを作成して、デプロイ用のソースコードを受け取るよう準備します。このコマンドにより、アプリと、ローカルの Git リポジトリと関連付けられた heroku という名前の Git リモートが作成されます。
$ heroku create --app example-lwc-project
Creating app... done, example-lwc-project
https://example-lwc-project-1234567890ab.herokuapp.com/ | https://git.heroku.com/example-lwc-project.git
デフォルトでは、アプリの名前はランダムに生成されます。--appパラメータを渡すと、独自のアプリ名を指定できます。
CLI コマンドの代わりに Heroku Dashboard 経由でアプリを作成した場合、heroku git:remote --app example-app でローカルリポジトリにリモートを追加します。
コードのデプロイ
dyno を使用してこのチュートリアルを完了した場合、使用量のカウントに入ります。コストを抑制するために、完了したらすぐに dyno を 0 にスケーリングしてください。
Eco にサブスクライブしている場合、アプリではデフォルトで Eco dyno が使用されます。それ以外の場合は、デフォルトで Basic dyno が使用されます。Eco dyno プランは、アカウントのすべての Eco dyno 間で共有され、多数の小さなアプリを Heroku にデプロイする場合にお勧めします。詳細は、こちらを参照してください。資格のある学生の皆様は、Heroku for GitHub Students プログラムを通じてプラットフォームクレジットを申請できます。
コードをデプロイします。
$ git push heroku main
Enumerating objects: 12971, done.
Counting objects: 100% (12971/12971), done.
Delta compression using up to 8 threads
Compressing objects: 100% (9805/9805), done.
Writing objects: 100% (12971/12971), 21.68 MiB | 9.62 MiB/s, done.
Total 12971 (delta 2486), reused 12971 (delta 2486)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Determining which buildpack to use for this app
remote: -----> Node.js app detected
…
remote: Verifying deploy... done.
To https://git.heroku.com/example-lwc-project.git
これで、your-app-name-1234567890ab.herokuapp.com からアプリにアクセスできます。
dyno の使用
dyno は、Procfile で指定されているコマンドを実行する軽量の Linux コンテナです。デプロイ後に、1 つの web dyno がアプリを実行していることを確認します。実行されている dyno の数を確認するには、heroku ps コマンドを使います。この例では、Eco dyno プランをサブスクライブしていると仮定しています。
$ heroku ps
Eco dyno hours quota remaining this month: 997h 48m (99%)
Eco dyno usage for this app: 0h 0m (0%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping
=== web (Eco): npm run start (1)
web.1: up 2022/05/02 15:48:33 -0400 (~ 6m ago)
実行中の web dyno がリクエストに応答します。アプリ名で生成された URL にあるアプリを開きます。次のショートカットを使うと、簡単に Web サイトを開くことができます。
$ heroku open
Eco dyno は、アイドル状態 (トラフィックを何も受信しない状態) が 30 分続くとスリープします。このスリープ動作により、スリープ解除するときの最初のリクエスト時に数秒の遅延が発生します。その後のリクエストは正常に処理されます。Eco dyno は、月ごとに割り当てられるアカウント別の Eco dyno 時間を消費します。割り当て時間が残っている限り、アプリは稼働し続けます。
dyno がスリープしないようにするには、「dyno タイプ」で紹介されている Basic または Professional の dyno タイプを使用します。
アプリをスケールする
Heroku でアプリケーションを水平方向にスケーリングすることは、実行中の dyno の数を変更することを意味します。
Web dyno の数を 0 にスケールしてみます。
$ heroku ps:scale web=0
ブラウザを更新するか、heroku open を実行して、もう一度アプリにアクセスします。リクエストに応答できる Web dyno がアプリにないので、エラーメッセージが表示されます。
もう一度スケールしてみましょう。
$ heroku ps:scale web=1
大規模な dyno にアップグレードすることによって、垂直方向のスケーリングを行うこともできます。詳細は、「dyno タイプ」および「Dyno formation のスケーリング」を参照してください。
ログを表示する
Heroku では、アプリとプラットフォームのコンポーネントの両方の出力ストリームがすべて単一チャネルの時系列ログに集約されます。
実行中のアプリに関する情報を表示するには、heroku logs --tail コマンドを使います。
$ heroku logs --tail
2022-05-02T19:57:28.471748+00:00 heroku[router]: at=info method=GET path="/" host=example-lwc-project-1234567890ab.herokuapp.com request_id=67e164cc-fe43-40cb-869d-8843437d8aab fwd="204.14.236.210" dyno=web.1 connect=0ms service=348ms status=200 bytes=916 protocol=https
2022-05-02T19:57:28.618296+00:00 heroku[router]: at=info method=GET path="/1/bundle/esm/l/en-US/bi/0/module/mi/example%2Fapp%2Fv%2F0_0_1/s/dd906b596d93b171095575adf165247650854928/bundle_example_app.js" host=example-lwc-project-1234567890ab.herokuapp.com request_id=fb4212cc-654e-4e10-8512-148999abc9a9 fwd="204.14.236.210" dyno=web.1 connect=0ms service=2ms status=200 bytes=1066 protocol=https
ブラウザで再びアプリケーションを表示すると、別のログメッセージが生成されます。
ログのストリーム出力を停止するには、CTRL+C を押します。
デフォルトで、Heroku では、アプリの最新ログが 1500 行、保存されます。長期の保存のために、ログ記録アドオンをプロビジョニングするか、独自のログドレインを実装することができます。次のステップでは、ログ記録アドオンをアプリに追加します。
アドオンをプロビジョニングする
アドオンは、アプリケーションにデータベース、ログ記録、監視などの追加サービスを提供するクラウドのサービスです。
ログの永続化、検索、アラートなどの機能を提供するいくつかのログ記録アドオンを利用できます。Papertrail は、無料プランで使えるそのようなアドオンです。
アドオンをプロビジョニングする
$ heroku addons:create papertrail
Creating papertrail on example-lwc-project... free
Welcome to Papertrail. Questions and ideas are welcome (technicalsupport@solarwinds.com). Happy logging!
Created papertrail-asymmetrical-88691 as PAPERTRAIL_API_TOKEN
Use heroku addons:docs papertrail to view documentation
このコマンドを使用して、アドオンのプロビジョニングを行い、アプリケーションのためにアドオンを設定します。このアドオンが動作していることを確認するため、アプリケーションの Heroku URL に数回アクセスします。アクセスするたびにログメッセージが生成され、Papertrail のアドオンに送られます。
次のコマンドで、アプリのアクティブなアドオンをすべて一覧表示できます。
$ heroku addons
Papertrail にログを表示する
Papertrail のコンソールにアクセスし、ログメッセージを確認します。
$ heroku addons:open papertrail
ブラウザで Papertrail の Web コンソールが開き、最新のログイベントが表示されます。このインターフェースでは、検索したり通知を設定したりできます。
ローカルの変更をプッシュする
このステップでは、アプリケーションへのローカルでの変更を Heroku に反映させる方法を学びます。
src/modules/example/app/app.html を開きます。Hello, World!の挨拶の代わりに名前が表示されるように変更します。
heroku local を実行して、ローカルでの変更を確認します。
このローカルの変更をコミットして Heroku にデプロイします。アプリにアクセスして動作の変更を確認してみましょう。
$ git add .
$ git commit -m "Changed greeting"
$ git push heroku main
$ heroku open
One-off dyno を起動する
heroku run コマンドを使用して、One-off dyno 内のアプリでメンテナンスや管理のタスクを実行できます。このコマンドでは、アプリの環境で試行錯誤するためにローカルのターミナルにアタッチされた REPL プロセスや、デプロイされたアプリケーションコードを起動することもできます。
$ heroku run node --version
v16.15.0
Error connecting to process というエラーが表示された場合は、ファイアウォールを設定します。
必ず exit と入力してシェルを閉じ、dyno を終了してください。
次のステップ
これで完了です。ここまでは、LWC プロジェクトのデプロイ、プロジェクトのローカルでの実行、プロジェクトのスケール、ログの表示、アドオンのアタッチ、変更のプッシュの方法を説明しました。
引き続き LWC および Heroku を活用するためにお勧めするリソースを以下に紹介します。
- 「Heroku の仕組み」では、アプリの作成、設定、デプロイ、および実行時に必要な技術的な概念の概要を紹介しています。
- LWC 開発者ガイド
- LWC レシピ
- LWC OSS を使用して Salesforce に安全にアクセスする方法
- Node.js、LWC OSS および Heroku を使用してクリスマスアプリを構築する方法