# Build Your First Application with LWC OSS

## 進め方

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

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

## Herokuへのデプロイ

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

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

{% tabs %}
{% tab title="Procfile" %}
{% code title="Procfile" %}

```
web: npm run start:client

```

{% endcode %}
{% endtab %}
{% endtabs %}

画面に表示するデータの提供元が外部サイトであるため、[**Content Security Policy**](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP) に引っかからないようにする必要があります。

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

{% tabs %}
{% tab title="JavaScript" %}
{% code title="scripts/server.js" %}

```javascript
...

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());

...
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

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

例）wed-20210407-lv2-1-abcde
{% endhint %}

{% tabs %}
{% tab title="Console" %}

```bash
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 "好きな文字列"

```

{% endtab %}
{% endtabs %}

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