Strapiとは
StrapiとはNode.js環境において動作するオープンソースヘッドレスCMSです。Strapiは100%JavaScriptベースで開発者がお気に入りのツールやフレームワークを自由に使用することができます。
ヘッドレスCMSとは
ヘッドレスCMSとは従来のCMS（コンテンツ・マネジメント・システム）から見た目（View）の部分を切り離し、バックエンドのみの機能を用意したCMSの一種です。ヘッドレスCMSでは「バックエンド」のみを集中的に管理する目的があり、フロントエンドに関してはヘッドレスCMS外で運用する必要があります。基本的にはAPIを用いて入稿したコンテンツを取得し、表示したい場所へと映します。フロントエンドの自由度が高められることや表示速度が速いというメリットが挙げられます。
StrapiをHerokuでデプロイする方法
Herokuインストールする前に
1.Gitをローカルでインストールし、セットアップしてください。
2.Herokuの無料アカウントを作成して下さい。
1.Heroku CLIのインストール
brew tap heroku/brew && brew install heroku
2.CLIからHerokuにログイン
heroku login
3. Strapi新規プロジェクトを作成。（すでに作成済みの場合は4に進む）
Strapiの公式ドキュメントでは、--quickstartのオプションが紹介されていますが、この方法だとデフォルトでSQLiteがデータベースとして選択されてしまいます。StrapiをHerokuでデプロイするためには、Postgresを利用しないといけません。以下のようにコードを書いて、カスタムセットアップを選択し、データベースとしてPostgresを選択してください。
npx create-strapi-app@latest my-project
yarn create strapi-app my-project
npmでインストールをしたら、インストールがなかなか終了しないという事象が発生しました。
yarnでインストールしたらすぐに終わったのでおすすめします。
4..gitignoreファイルを更新
作成したプロジェクトの、.gitignoreファイルを開く。
最後の行にpackage-lock.jsonを追加する。
package-lock.json
5.Gitリポジトリを初期化して、プロジェクトをコミットする。
cd my-project
git init
git add .
git commit -m "Initial Commit"
6. Herokuプロジェクトを作成する。
heroku create
heroku create カスタムネームを指定すると、カスタムネーム.heroku.comURLを作成することができます。
すでにHerokuプロジェクトを作成済みの場合は、ローカルのプロジェクトフォルダを初期化するために以下のコマンドを叩いてください
heroku git:remote -a your-heroku-app-name
これでローカルの開発環境はHerokuで動作するようにセットアップが完了しました。
作成したStrapiプロジェクトとHerokuプロジェクトはデータベースと相互に接続する準備が整っています。
7.Herokuデータベースのセットアップ
1.Postgoresを利用するために、Heroku Postgresアドオンをインストール。
heroku addons:create heroku-postgresql:hobby-dev
2.データベースの資格情報を取得する。
heroku config
コマンドを叩くと、以下のような表示がされます。
DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b
3.データベース変数を自動的に設定する。
npm install pg-connection-string --save
yarn add pg-connection-string
4.本番用のHerokuデータベース構成ファイルを作成
./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を追加してください。
DATABASE_URL=your_DATABASE_URL
また、この新しいデータベース構成ファイルが確実に使用されるように、HerokuのNODE_ENV変数を本番環境に設定する必要があります。
ターミナルで以下のコマンドを叩いて下さい。
heroku config:set NODE_ENV=production
5.本番用のStrapiサーバー構成を作成
先ほど作成したproductionというサブフォルダの中に、 server.jsを作成します。
module.exports = ({ env }) => ({
url: env('MY_HEROKU_URL'),
});
また、MY_HEROKU_URLを生成するためにHerokuで環境変数を設定する必要があります。
これは、https://your-app.herokuapp.comのようなURLを生成します。
heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)
6.pg nodeモジュールをインストール
PostgreSQLでStrapiを最初にインストールした場合を除き、pg nodeモジュールをインストールする必要があります。
npm install pg --save
yarn add pg
7.変更をコミットする。
git add .
git commit -m "Update database config"
8. Yarn lockfileを更新する。
yarn install
9.変更をコミットする。
git add yarn.lock
git commit -m "Updated Yarn lockfile"
10. デプロイ
git push heroku HEAD:main
デプロイには数分かかります。
デプロイが完了すると、プロジェクトのURLが表示されます。
以下のコマンドでもプロジェクトを表示することができます。
heroku open
Welcomeページが表示されたら、セットアップ、構成、デプロイが正常に行われたということになります。
本番のデータベースは新しいもの（空）になるので管理者ユーザーを設定する必要があります。
セキュリティ上の理由から本番モードでは、コンテンツタイプビルダーは無効になります。
プロジェクトの更新
ストラップがHerokuにデプロイされると、Herokuは環境変数をNODE_ENV = productionに設定します。
そして、セキュリティ上の理由から本番モードでは、コンテンツタイプビルダーを無効になります。
さらに、Herokuのデフォルトの本番モードを変更したい場合、ファイルシステムは一時的なものであるため、機能しません。
コンテンツタイプを更新すると、Strapiはサーバーにファイルを書き込み、Herokuがサーバーを再起動すると更新したものは消えてしまいます。
モデル作成または他のjsonファイルへの書き込みを必要とする変更。 コンテンツタイプを作成または変更するには、開発環境でこれらの変更を行ってから、変更をHerokuにプッシュする必要があります。
Stripiを使用してアプリケーションの開発を続ける場合は、以下のように変更をHerokuに直接コミットしてプッシュすることができます。
git add .
git commit -m "comment"
git push heroku HEAD:main
こうすることで、開発環境で作成したコンテンツタイプを本番環境に反映することができます。
参考