Heroku上にStrapi環境を構築する

ローカル環境でのStrapi構築方法は沢山情報があるのですが、実際にサーバーにインストールするにはどうしたら良いのか迷ったので備忘録として残します。
読みやすさとかは意識せず、あくまで備忘録なのでご勘弁ください。

以下は参考サイトです。
3.0.0-alphaだとものすごく簡単に環境が作れるみたいですが、betaからはどうも利用できなくなっているみたいです。
参考サイト：https://qiita.com/megurock/items/8cac741644f39ffec135

#前提条件
・mac OS Mojave（10.14.5）
・Herokuを初めて触る
・Strapiを初めて触る
・フロントエンド、サーバーサイドは少し触れる

#作業手順（heroku）
##1. herokuに登録
https://jp.heroku.com

##2. heroku CLIのインストール
以下サイトを参考にインストール
https://devcenter.heroku.com/articles/heroku-cli

Macでbrewがインストール済の場合はターミナルで以下コマンドを打つだけでOK

```
brew tap heroku/brew && brew install heroku
```

##3. heroku上でアプリを作成
以下URLのダッシュボードの右上にあるボタンから「Create new app」
https://dashboard.heroku.com/apps

![スクリーンショット 2019-10-30 22.12.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118677/fafcdad6-6b79-316a-f74c-f1a55bbd1c5b.png)

入力画面に飛んだらapp-nameを入力してCreate appをクリック。
regionは日本は無いのでアメリカを選択。
（Heroku Enterpriseだと日本リージョンも選択できるらしい）
app-nameはherokuアプリのURLにもなるのでよく考えてつけること。
既に誰かが付けたapp-nameは使えません。

![スクリーンショット 2019-10-30 22.14.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118677/f574366e-3eeb-d023-186c-801925c9b950.png)
herokuアプリってiPhoneアプリっぽいネーミングですが全く関係なく、heroku上に作成した環境の名前と思ってもらえれば。
完了画面っぽいのに飛んだらherokuでの準備は完了です。

#作業手順（strapi）
公式ドキュメントを参考に進めます。
https://strapi.io/documentation/3.0.0-beta.x/guides/deployment.html#heroku
英語でよくわからないですが、雰囲気と表示されているコマンドを手がかりに進めます。
ドキュメントと手順が異なる部分のみ記載します。

##3. Create a new project (or use an existing one)
公式だとstrapiコマンドを打つ的なことが書いてありますが、この手順だとできません。
というより3.0.0-betaからglobalにstrapiをインストールしなくなったようだ。

以下を参考にstrapi用のプロジェクトを作成します。
https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project

```
npx create-strapi-app my-project --quickstart
```

yarnが好みの方はyarnコマンドでも行けるかと思いますが、試していないのでよくわかりません。
ブラウザが勝手に起動してローカル環境が実行されますが、そのままでも起動したままでも構いません。

##6. Create a Heroku project
この手順で進めた場合は**heroku createコマンドは使いません。**
なぜなら作業手順（heroku）でherokuアプリが作成済のためです。

なので、公式ドキュメントのNOTEに記載してあるgit remoteコマンドを実行します。
これによりstrapi環境とherokuが紐づくようになります。
「your-heroku-app-name」は作業手順（heroku）で作成したときのアプリ名を入力します。

```
heroku git:remote -a your-heroku-app-name
```


#デプロイ
ここまで進めばheroku上でstrapiのデプロイまで完了しています。

##管理画面のURL
herokuのダッシュボードから対象のアプリ→Open appでアプリを開くことができます。
この画面です。
![スクリーンショット-2019-10-30-23.33.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118677/08e6e014-19f8-5aff-c81c-21aa73b649bc.png)

アプリを開くと画面上に

> Your built-in admin panel is available at /admin.

と表示されています。
/adminにアクセスすると最初の管理ユーザーを作成できます。

#問題があった箇所
##ビルド時にエラーが発生

こんなエラーが発生してビルドが進まない。
（git push heroku master実行時）

```
remote:        error Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.
remote:        info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
```

ログを見ると以下のコマンドを打てとあるので実行することで解決。

```
remote:        $ yarn install
remote:        $ git add yarn.lock
remote:        $ git commit -m "Updated Yarn lockfile"
remote:        $ git push heroku master
```

ビルドは数分かかるので辛抱強く待つ。
ビルドが成功するとデプロイまで実行される。

ビルドとは：JSとかのファイルをブラウザ上で実行できるようにファイルを生成すること（無理やりな説明）
デプロイとは：本番環境へ反映

##コンテンツタイプを作成できない
本番環境だと作成できないため、develop環境で作成する。
ターミナル上で以下を実行し、develop環境を起動する。

```
npm run develop
```

この環境でコンテンツタイプを作成したら、git pushを行うことで本番にデプロイされる。

```
git push heroku master
```