Build Your First Application with LWC OSS

Trailheadで新規作成したLWC OSSアプリをHerokuへデプロイしてみましょう。

進め方

次のURLにアクセスし、指示に従って進めてください。

https://trailhead.salesforce.com/ja/content/learn/projects/build-your-first-app-with-lightning-web-components-open-source

Herokuへのデプロイ

Trailheadで作成したアプリをHerokuへデプロイするためには、いくつか追加設定が必要です。

Procfileを作成して配置します。

Procfile

Procfile

web: npm run start:client

画面に表示するデータの提供元が外部サイトであるため、Content Security Policy に引っかからないようにする必要があります。

scripts/server.js のコードを一部修正します。

JavaScript

scripts/server.js

...

const app = express();
// app.use(helmet());
app.use(
  // Sets all of the defaults, but overrides img-src and script-src
  helmet.contentSecurityPolicy({
    directives: {
      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
      'img-src': ["'self'", 'https://developer.salesforce.com'],
      'connect-src': ["'self'", 'https://conference-lwc-app.herokuapp.com']
    }
  })
);
app.use(compression());

...

あとは、Lv.1で学習した内容と同じです。

Herokuアプリの名前は、世界中で一意であれば自分の好きな文字列を指定することができます。先頭は英字にしてください。

例）wed-20210407-lv2-1-abcde

Console

heroku create "好きな文字列"

# ローカルで動作確認
npm run build:development
heroku local web

git add .
git commit -m "Lv.2-1 completed"
git push heroku main

heroku open -a "好きな文字列"

ローカルと同じ動作になってることを確認できたらOKです。