StrapiをバックエンドとしてセットアップしてHerokuでデプロイする方法




## Strapiとは


StrapiとはNode.js環境において動作するオープンソースヘッドレスCMSです。Strapiは100%JavaScriptベースで開発者がお気に入りのツールやフレームワークを自由に使用することができます。

https://strapi.io/why-strapi


## ヘッドレスCMSとは


ヘッドレスCMSとは従来のCMS（コンテンツ・マネジメント・システム）から見た目（View）の部分を切り離し、バックエンドのみの機能を用意したCMSの一種です。ヘッドレスCMSでは「バックエンド」のみを集中的に管理する目的があり、フロントエンドに関してはヘッドレスCMS外で運用する必要があります。基本的にはAPIを用いて入稿したコンテンツを取得し、表示したい場所へと映します。フロントエンドの自由度が高められることや表示速度が速いというメリットが挙げられます。


## StrapiをHerokuでデプロイする方法


#### Herokuインストールする前に

 1.[Git](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup)をローカルでインストールし、セットアップしてください。
 2.Herokuの[無料アカウント](https://signup.heroku.com/)を作成して下さい。

### 1.Heroku CLIのインストール


```sh:sh
brew tap heroku/brew && brew install heroku
```


### 2.CLIからHerokuにログイン

```sh:sh
heroku login
```

### 3. Strapi新規プロジェクトを作成。（すでに作成済みの場合は4に進む）

:::note alert
Strapiの公式ドキュメントでは、--quickstartのオプションが紹介されていますが、この方法だとデフォルトでSQLiteがデータベースとして選択されてしまいます。StrapiをHerokuでデプロイするためには、**Postgres**を利用しないといけません。以下のようにコードを書いて、カスタムセットアップを選択し、データベースとして**Postgres**を選択してください。

:::

```js:npm
npx create-strapi-app@latest my-project
```


```js:yarn
yarn create strapi-app my-project
```

:::note warn
npmでインストールをしたら、インストールがなかなか終了しないという事象が発生しました。
yarnでインストールしたらすぐに終わったのでおすすめします。
:::


### 4.`.gitignore`ファイルを更新

作成したプロジェクトの、`.gitignore`ファイルを開く。
最後の行に`package-lock.json`を追加する。

```js:.gitignore
package-lock.json
```


### 5.Gitリポジトリを初期化して、プロジェクトをコミットする。

```sh:sh
cd my-project
git init
git add .
git commit -m "Initial Commit"
```

### 6. Herokuプロジェクトを作成する。

```shell:sh
heroku create
```

`heroku create カスタムネーム`を指定すると、`カスタムネーム.heroku.com`URLを作成することができます。


:::note
すでにHerokuプロジェクトを作成済みの場合は、ローカルのプロジェクトフォルダを初期化するために以下のコマンドを叩いてください
```sh:Sh
heroku git:remote -a your-heroku-app-name
```
:::

これでローカルの開発環境はHerokuで動作するようにセットアップが完了しました。
作成したStrapiプロジェクトとHerokuプロジェクトはデータベースと相互に接続する準備が整っています。



### 7.Herokuデータベースのセットアップ

#### 1.Postgoresを利用するために、Heroku Postgresアドオンをインストール。
```sh:sh
heroku addons:create heroku-postgresql:hobby-dev
```

#### 2.データベースの資格情報を取得する。

```sh:sh
heroku config
```
コマンドを叩くと、以下のような表示がされます。
`DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b`

#### 3.データベース変数を自動的に設定する。
```sh:npm
npm install pg-connection-string --save
```
```sh:yarn
yarn add pg-connection-string
```

#### 4.本番用のHerokuデータベース構成ファイルを作成

./config/env/にproductionという新しいサブフォルダーを作成し、その中に新しいdatabase.jsを作成します。


```js:./config/env/production/database.js
const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: {
        rejectUnauthorized: false
      },
    },
    debug: false,
  },
});
```

`.env`ファイルの中に、２で取得したDATABASE_URLを追加してください。
```js:.env
DATABASE_URL=your_DATABASE_URL
```

また、この新しいデータベース構成ファイルが確実に使用されるように、HerokuのNODE_ENV変数を本番環境に設定する必要があります。
ターミナルで以下のコマンドを叩いて下さい。

```sh:sh
heroku config:set NODE_ENV=production
```

#### 5.本番用のStrapiサーバー構成を作成

先ほど作成したproductionというサブフォルダの中に、 `server.js`を作成します。
```js:./config/env/production/server.js
module.exports = ({ env }) => ({
  url: env('MY_HEROKU_URL'),
});
 
```

また、MY_HEROKU_URLを生成するためにHerokuで環境変数を設定する必要があります。
これは、`https://your-app.herokuapp.com`のようなURLを生成します。
```sh
heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)
```

#### 6.pg nodeモジュールをインストール
PostgreSQLでStrapiを最初にインストールした場合を除き、pg nodeモジュールをインストールする必要があります。
```sh:npm
npm install pg --save
```
```sh:yarn
yarn add pg
```

#### 7.変更をコミットする。
```sh:sh
git add .
git commit -m "Update database config"
```

#### 8. Yarn lockfileを更新する。
```sh:sh
yarn install
```

#### 9.変更をコミットする。
```sh:sh
git add yarn.lock
git commit -m "Updated Yarn lockfile"
```

#### 10. デプロイ
```sh:sh
git push heroku HEAD:main
```
デプロイには数分かかります。
デプロイが完了すると、プロジェクトのURLが表示されます。
以下のコマンドでもプロジェクトを表示することができます。

```sh:sh
heroku open
```

Welcomeページが表示されたら、セットアップ、構成、デプロイが正常に行われたということになります。
本番のデータベースは新しいもの（空）になるので管理者ユーザーを設定する必要があります。

:::note warn
セキュリティ上の理由から本番モードでは、コンテンツタイプビルダーは無効になります。 
:::


### プロジェクトの更新

ストラップがHerokuにデプロイされると、Herokuは環境変数を`NODE_ENV = production`に設定します。
そして、セキュリティ上の理由から本番モードでは、コンテンツタイプビルダーを無効になります。 

さらに、Herokuのデフォルトの本番モードを変更したい場合、ファイルシステムは一時的なものであるため、機能しません。 
コンテンツタイプを更新すると、Strapiはサーバーにファイルを書き込み、Herokuがサーバーを再起動すると更新したものは消えてしまいます。

:::note
モデル作成または他のjsonファイルへの書き込みを必要とする変更。 コンテンツタイプを作成または変更するには、開発環境でこれらの変更を行ってから、変更をHerokuにプッシュする必要があります。
:::


Stripiを使用してアプリケーションの開発を続ける場合は、以下のように変更をHerokuに直接コミットしてプッシュすることができます。
```sh:sh
git add .
git commit -m "comment"
git push heroku HEAD:main

```

こうすることで、開発環境で作成したコンテンツタイプを本番環境に反映することができます。


## 参考


https://anken-hyouban.com/blog/2021/12/21/strapi/

https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html#_6-install-the-pg-node-module