Heroku での Lightning Web コンポーネントオープンソースの使用

​はじめに

このチュートリアルを使用して、Heroku で Lightning Web コンポーネントオープンソース​ (LWC OSS) プロジェクトを作成してデプロイします。

前提条件

• 確認済みの Heroku アカウント
• ローカルにインストールされた Node.js​ および npm​
• ローカルにインストールされた Git​。
• Eco dyno プラン​をサブスクライブしている (推奨)

Git がまだインストールされていない場合は、先に進む前に次の手順を完了してください。

• Git のインストール
• Git の初期設定

​Install the Heroku CLI をインストールする

Heroku Command Line Interface (CLI) をインストールします。CLI は、アプリケーションの管理やスケール、アドオンのプロビジョニング、最近のアプリケーションログの表示、アプリケーションのローカル実行に使用します。

ご使用のプラットフォーム用のインストーラをダウンロードし、実行してください。

インストールが完了したら、ターミナルで heroku​ コマンドを使用できます。

ログイン

​ `heroku login`​ コマンドを使って Heroku CLI にログインします。 “`term $ heroku login heroku: Press any key to open up the browser to login or q to exit › Warning: If browser does not open, visit › https://cli-auth.heroku.com/auth/browser/*** heroku: Waiting for login… Logging in… done Logged in as me@example.com ”` このコマンドにより、Web ブラウザで認証を完了するための Heroku ログインページが開きます。ブラウザですでに Heroku にログインしている場合は、ページに表示されている**`Log in`**​ (ログイン) ボタンをクリックします。 `heroku`​ と `git`​ のコマンドが両方とも正しく機能するには、この認証が必要です。 外部の HTTP/HTTPS サービスへの接続にプロキシが必要なファイアウォールを使っている場合は、`heroku`​ コマンドを実行する前に、ローカルの開発環境で [`HTTP_PROXY`​ または `HTTPS_PROXY`​ 環境変数を設定](articles/using-the-cli#using-an-http-proxy)​してください。

​LWC プロジェクトを作成する

Lightning Web コンポーネントプロジェクトを作成するには、[Lightning Web ランタイム (LWR)](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-get-started.html)​ を使用します。 このツールは、短いセットアップ手順をユーザーに示し、Lightning Web コンポーネントプロジェクトの足場を構築します。 “`term $ npm init lwr # Follow the on-screen instructions # Select the "Single Page App” project # Select the “LWC” option $ cd ExampleLWCProjectName “`

​Git でのコードの追跡

デプロイ方法は他にもありますが、コードを Heroku にデプロイするための最も一般的な方法は `git`​ を使用する方法です。プロジェクト用の Git リポジトリを作成し、ファイルをコミットします。 >callout > 当社では、平等に関する当社の価値観に適合するよう、インクルーシブでない用語を可能な範囲で変更しました。当社製以外のシステムに関する記述では、インクルーシブでない用語をそのまま使用していますが、当社では開発者コミュニティに対し、よりインクルーシブな表現の採用を奨励しています。該当する用語については、技術的な正確さのために必要でなくなった時点での更新を予定しています。

リポジトリを作成する

次のコマンドを実行して、リポジトリを初期化します。

$ 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
...
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: 5000 | mode: prod

Heroku プラットフォームと同じように、heroku local​ も Procfile​ を確認して実行するコマンドを判断します。

Web ブラウザで http://localhost:5000​ を開き、アプリがローカルで実行中であることを確認します。

アプリのローカルでの実行を停止するには、ターミナルウィンドウに戻り、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.herokuapp.com/ | https://git.heroku.com/example-lwc-project.git

デフォルトでは、アプリの名前はランダムに生成されます。--app​ パラメータを渡すと、独自のアプリ名を指定できます。

コードのデプロイ

 

コードをデプロイします。

$ 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.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

​ログを表示する

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.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.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 の仕組み​」では、アプリの作成、設定、デプロイ、および実行時に必要な技術的な概念の概要を紹介しています。
• Heroku の開発者としての体験および CI/CD 機能についての詳細は、「Heroku Enterprise Developer Learning Journey​」を参照してください。
• LWC 開発者ガイド
• LWC レシピ
• LWC OSS を使用して Salesforce に安全にアクセスする方法
• Node.js、LWC OSS および Heroku を使用してクリスマスアプリを構築する方法