태그를 heroku에 배치하려면

간단한 절차가 이런 느낌이에요.

Heroku 계정 만들기

새 어플리케이션

Heroku CLI 설치

프로젝트 디렉터리를 만드는 데 필요한 파일

PostgreSQL 사용

각종 환경 변수의 설정

artisan 명령 실행

이미지가base64로 인코딩됨

debug 비활성화 및 생산 모드 진입

계정 만들기

아래 URL에 따라 계정 만들기
https://signup.heroku.com/login

새 응용 프로그램

계정 생성 후 애플리케이션 생성

create new app 선택

이번에 App name을fugaapplication

으로 설정

앱 만들기를 사용하여 만들기 완료

Heroku CLI 설치

# herokuインストール
$ brew tap heroku/brew && brew install heroku

# 下記コマンドでのインストールは公式非推奨
$ npm install -g heroku

# バージョン確認
$ heroku --version

로그인 heroku

다음 명령을 누르면 어떤 키를 쳐야 하는지 물어보기 때문에enter를 누르면 로그인 인증된 브라우저가 열리고login 단추를 누르면 로그인이 완료됩니다

$ heroku login

프로젝트 디렉터리에 필요한 파일 만들기

heroku 프로필 만들기

프로젝트 디렉터리로 이동하여 바로 아래에 프로필 만들기

작성된 프로필 편집

# ファイル作成
$ touch Procfile

# ファイル編集
$ vi Procfile

#  iでINSERTモードにし、下記内容を書き込む
$ web: vendor/bin/heroku-php-apache2 public/

# escでINSERT終了し、:wqで保存して閉じる

필요에 따라git로 제출 및 전송

$ git add -A .
$ git commit -m "Add Procfile"
$ git push heroku master

heroku와github를 협업하여 Automatic deploys를 허용하면github에 전송을 통해 하루에 한 번 자동으로 배치

PostgreSQL 준비

추가 모듈 추가

heroku의 추가 Heroku Postgres를 이용한 무료 프로그램(Hobby Dev)

리소스 탭에서 추가 모듈 검색 및 추가

heroku에 로그인하거나 터미널에 추가

$ heroku login

# 無料プランでDBを作成
$ heroku addons:create heroku-postgresql:hobby-dev

# アドオンが有効になったか確認
$ heroku pg:wait

환경 변수 설정

heroku 환경 변수 검사

로컬 환경에서 .env 파일을 설정했지만 헤로쿠에서 수정.env 파일을 수정하지 않으면 헤로쿠에 대해 환경 설정을 할 수 있다

# ログインした状態で設定状況を確認する
$ heroku login

# 全部の環境変数のキー:値を知りたい時
$ heroku config

# キーが分かるときその値のみ知りたい時
$ heroku config:get DATABASE_URL

DATABASE 환경 변수 설정

Heroku Postgres 추가 모듈을 추가할 때 DATABASE_URL을 key로 환경 변수 저장

DATABASE_URL 값에 따라 변수 설정

# DB情報を確認
$ heroku config:get DATABASE_URL
# 出力結果
postgres://<ユーザ名>:<パスワード>@<ホスト>:5432/<DB名>

# この出力結果に基づき、次のように設定する
DB_CONNECTION: pgsql
DB_DATABASE : <DB名>
DB_HOST : <ホスト>
DB_USERNAME : <ユーザ名>
DB_PASSWORD : <パスワード>

## 環境変数設定するときのコマンド
$ heroku config:set DB_HOST=hostname

# コマンド実行後の実際の出力
postgres://tyfcuncgcimlpf:2d080624５４３４５４３４dfsf３４３４eefa76dbcf868a５４３w４５４３４５４５４b@ec2-54-５４1-５４３-５４４.compute-1.amazonaws.com:5432/dfiiks1５４３４５４３
DB_CONNECTION:     pgsql
DB_DATABASE:       dfiiks1５４３４５４３
DB_HOST:           ec2-54-５４1-５４３-５４４.compute-1.amazonaws.com
DB_USERNAME:       tyfcuncgcimlpf
DB_PASSWORD:       2d080624５４３４５４３４dfsf３４３４eefa76dbcf868a５４３w４５４３４５４５４b

화면에 환경 변수를 추가할 수도 있어요.

추가 창을 열면 setting 탭의 데이터베이스 Credentials를 통해 DB 정보를 확인할 수 있습니다

heroku 화면의 setting 탭의 Config vars를 통해 환경 변수를 확인할 수 있습니다

Heroku를 PostgreSql에 연결하는 방법

다음 명령을 통해 연결 가능

# 接続
$ heroku pg:psql DATABASE_URL

# テーブル一覧表示
$ DATABASE=> \d

로컬 설정이 불가능한 상태에서 오류 문장 출력

설치 방법 별도 확인 Postgressql

# error 
▸ The local psql command could not be located. For help installing psql, see
▸ https://devcenter.heroku.com/articles/heroku-postgresql#local-setup

옮기다

heroku의 DB 환경 설정 완료 후 마이그레이션

heroku 마이그레이션 명령

# マイグレーションとシーディングを実行
$ heroku run php artisan migrate --seed

# (マイグレーションをやり直したい場合)
$ heroku run php artisan migrate:refresh --seed

Class'Faker\Factory'not found 오류가 발생했을 때

laravel에서faker를 사용할 때 fzaninotto/faker를 설치해야 합니다
https://github.com/laravel/framework/issues/14130

$ composer require fzaninotto/faker

마이그레이션을 통해 해결

이미지는 base64 인코딩

이미지를 생성하여storage의 이미지 파일에 저장하고 이 링크를 DB에 저장하지만 heroku에서는 파일을 생성할 수 없으며 이미지 바이너리 데이터를 DB에 직접 넣어 대응한다

이미지 바이너리를 포함하는 열 만들기

이미지 바이너리 파일을 가져와base64 인코딩하여 DB에 저장

base64 이미지 표시

https://team-lab.github.io/skillup/step2/image_document.html
https://qiita.com/RitaChan/items/d59001430f50789c570f

저장된 이미지의 열 유형 변경

이미지를 저장하는 링크의 열, 열을 변경하면 인코딩된 긴 문장을 저장할 수 있다

마이그레이션 파일을 만들고string형에서 longText형

으로 변경

$ php artisan make:migration change_{カラム名}_to_{テーブル名} --table={テーブル名}

마이그레이션 파일 예

    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
          $table->longText('profile_img')->default('')->change();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
          $table->dropColumn('profile_img');
          $table->string('profile_img')->nullable()->change(); 
        });
    }

이미지의 뷰 변경 예 표시

php로 쓴 경우.

// 変更前
<img class="c-img" src="/storage/profile_images/{{ $user->id }}.jpg" alt="プロフィール画像">

// 変更後
<img class="c-img" src="data:image/png;base64,{{ $user->profile_img }}" alt="プロフィール画像">

vue로 표시되면

// 変更前
<img class="c-img" v-if="message.profile_img !== null" v-bind:src="'/storage/profile_images/' + message.from_user_id + '.jpg'" alt="プロフィール画像">

// 変更後
<img class="c-img" v-bind:src="'data:image/png;base64, '+ message.profile_img" alt="プロフィール画像">

컨트롤러 변경 예

// 変更前
$user->profile_img = $request->profile_img->storeAs('public/profile_images', Auth::id() . '.jpg');

// 変更後
$user->profile_img = base64_encode(file_get_contents($request->profile_img));

위에서 설명한 바와 같이 인코딩된 긴 문자열을 DB에 저장하고 표시합니다.

애플리케이션 정보 설정

다음 명령을 실행하여 설정 완료

# デバッグを有効にする
$ heroku config:set DEBUGBAR_ENABLED=true

# キーを設定する
$ heroku config:set APP_KEY=$(php artisan key:generate --show)

메일 보내기 설정

mailtrap 또는 gmail의 SMTP를 사용할 때의 설정 값 확인 참조여기

heroku 메일 환경 변수 설정

DB 설정과 마찬가지로 heroku에 대한 환경 설정

명문으로 보내지 않으면 오류가 발생하기 때문에 MAIL_PORT 587호

# ログインした状態で確認する
$ heroku login

# 全部の環境変数のキー:値を知りたい時
$ heroku config

# キーが分かるときその値のみ知りたい時
$ heroku config:get DATABASE_URL

# 環境変数のセッティング例
$ heroku config:set DB_HOST=hostname

# 設定内容(2019/8/23)現在
MAIL_DRIVER:       smtp
MAIL_FROM_ADDRESS: [email protected]
MAIL_FROM_NAME:    hogeapplication
MAIL_HOST:         smtp.gmail.com
MAIL_PASSWORD:     wcfghjkljhnsn
MAIL_USERNAME:     [email protected]

생산 환경에 들어가다

디버그 모드 비활성화

$ heroku config:set DEBUGBAR_ENABLED=false

생산 모델을 만들다

다음 명령을 통해 컨트롤러에 출력된 vue deveropment의 문자도 사라짐

$ npm run production