投稿経緯

S3とclearDBを使用したherokuデプロイを行いましたが、つまづくことも非常に多かったので備忘録として投稿します。

開発環境

laravel5.8
stripe:laravelcashier10

大筋の流れ

①herokuの導入
②clearDBの導入（stripeを実装の場合）
③S3の導入(画像投稿機能を実装の場合)
今回は、②③をメインに説明していきます。

①heroku導入

https://yu-nocode.com/wp/entry/laravel-quest-6/#Heroku
こちらの記事が本当に分かりやすいのでおすすめです。
今回の説明の主目的ではないので省略します。

②clearDBの導入（stripeを実装の場合）

stripeを導入している場合、DB作成時

heroku run php artisan migrate --seed

を行うと以下のエラー。

SQLSTATE[42704]: Undefined object: 7 ERROR: collation "utf8mb4_bin" for encoding "UTF8" does not exist at character 57 (SQL: alter table "users" add column "stripe_id" varchar(191) collate "utf8mb4_bin" null, add column "card_brand" varchar(191) null, add column "card_last_four" varchar(4) null, add column "trial_ends_at" timestamp(0) without time zone null)

一言で言うとstripe導入時に、usersテーブルに追加されたカラム「stripe_id,card_brand,card_last_four,trial_ends_at」が不具合を起こしています。

https://github.com/laravel/cashier-stripe/issues/747
上記の記事(英語)を見ていると、
今回の開発で
local環境→DB:mysql
heroku環境→DB:pqsql(基本mysqlは使えないため)
に移行したことが原因の様でした。

そこでheroku環境でもDB:mysqlが使えるclearDBを導入しました。

ClearDBとは

Herokuでは、ClearDBというクラウドサービスのMySQLを利用することができます。"ignite" と呼ばれるデータ容量5MBの最小構成であれば無料で使えるので、こちらを利用していきます。

ClearDB導入の流れ

1.herokuにてクレジットカードの設定。

※ 超過しない限り請求はされません。

2.①で作成した、herokuのDATABASEURLを競合しない様削除。

heroku addons:destroy heroku-postgresql -a <アプリ名>

3.ClearDBのアドオンを追加、無料枠のigniteの使用を指示。

heroku addons:create cleardb:ignite
表示結果
mysql://[ユーザ名]:[パスワード]@[ホスト]/[DB名]?reconnect=true

4.表示結果の環境変数にデータベース設定を追加

heroku config:set \ DB_CONNECTION=mysql \ DB_HOST=[ホスト] \ DB_DATABASE=[DB名] \ DB_USERNAME=[ユーザ名] \ DB_PASSWORD=[パスワード]

5.データベースの設定（マイグレーション&シーディング）

heroku run php artisan migrate --seed

6.herokuにpush

git push heroku [送りたいbranch名]:master

これでwebアプリを確認して表示されていればOK。

③S3の導入

webアプリを見ると以下の様に写真が表示されていない。

local環境ではstorage>app>public下に画像を保存していたが、
ネット環境では、awsのS3を用いて画像の保存、表示をすることとした。

導入の流れ

1.AWSのIAMユーザーから以下のコードを入手。

Access key ID
シークレットアクセスキーをメモ
※後で使用。

2.S3のバケットを作成。

S3へ移動し、以下の画像のバケットを作成するをクリックし、作成する。

3.以下をインストール。

LaravelのファイルストレージとS3を連携させる
composer require aws/aws-sdk-php
composer require league/flysystem-aws-s3-v3

4.Herokuの環境変数をそれぞれ設定。

heroku config:set AWS_ACCESS_KEY_ID='AWSで作成したAccess key ID' heroku config:set AWS_SECRET_ACCESS_KEY='AWSで作成したシークレットアクセスキー' heroku config:set AWS_DEFAULT_REGION='作成したバケットのリージョン名' heroku config:set AWS_BUCKET_BUCKET='作成したバケット名'

※東京ならap-northeast-1

5.controllerやVIEWの設定変更。

僕の場合は、
controllerの以下の文でs3のpublic>tempに画像を投稿できる設定を記述。
$temp_path = Storage::disk('s3')->put('public/temp',$path, 'public');
そして、VIEWファイルの以下の文でs3の$temp_pathの場所の画像を表示と記述した。
<img src = "{{ Storage::disk('s3')->url($temp_path) }}" width="450px">

6.S3のアクセス権限を以下に設定。

これで以下の様にパブリックアクセスのオブジェクトの読み取りだけがはいになり、全ての人(everyone)に読み取り権限を与えることができた。

完成

投稿画像も表示される様になった。

終わりに

今回は、せっかく整理するならと初めてqiita投稿をしてみました。
この書き方は、ダメだよ等ありましたらコメントいただけると幸いです。

最後までみていただいた方、ありがとうございました。

参考記事

Heroku コマンド集
https://qiita.com/yu_eguchi/items/8cd53942b88b7ff2fecb

HerokuでMySQLを利用する方法
https://blog.nakamu.life/posts/heroku-mysql

HerokuでMySQLを使うときはDATABASE_URLを書き換える
https://qiita.com/SomeyaNaoki/items/1167fa816fa9647e4464

「Herokuにデプロイしたページの画像が表示されない！？」を解決する AWS S3 超カンタン利用法
https://qiita.com/Hiroyuki-Hiroyuki/items/72aed73ff7c0f8508700#%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E6%A9%9F%E8%83%BD%E3%82%92%E5%AE%9F%E8%A3%85