Larave5.5 + Heroku のやったことメモ

このドキュメントについて

Heroku 環境の設定

nginx の設定を用意しておく

echo web: vendor/bin/heroku-php-nginx -C nginx_app.conf public/ > Procfile
echo 'location / { index index.html index.php; try_files $uri $uri/ /index.php?$query_string; }' > nginx_app.conf
git add .
git commit -m 'add web server setting'

Postgresql を用意して環境変数に設定を入れる

heroku addons:create heroku-postgresql:hobby-dev
php -r 'preg_match("/^postgres:\/\/(.+?):(.+?)@(.+?):(.+?)\/(.*?)$/", `heroku config:get DATABASE_URL`, $matches); `heroku config:set DB_CONNECTION=pgsql DB_HOST=$matches[3] DB_PORT=$matches[4] DB_DATABASE=$matches[5] DB_USERNAME=$matches[1] DB_PASSWORD=$matches[2]`;'

ビルドパックの準備

ビルドパックにnodejsを追加してnpmできるようにしておく

heroku buildpacks:set heroku/php
heroku buildpacks:add --index 1 heroku/nodejs
# confirm
heroku buildpacks

Heroku 用のビルド設定

package.json の変更

package.json の初期で devDependencies になっているのを dependencies に変更

package.json

    "dependencies": {
        "@fortawesome/fontawesome": "^1.1.8",
        "@fortawesome/fontawesome-free-brands": "^5.0.13",
        "@fortawesome/fontawesome-free-regular": "^5.0.13",
        "@fortawesome/fontawesome-free-solid": "^5.0.13",
        "axios": "^0.17",
        "bootstrap": "^4.0.0",
        "browser-sync": "^2.24.4",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "markdown-it": "^8.4.1",
        "popper.js": "^1.14.3",
        "vue": "^2.5.7"
    }

npm run production する設定を追加

package.json

    "scripts": {
....
        "heroku-postbuild": "npm run production"
    }

webpack.mix.js

https://qiita.com/llhrkll/items/513c23008b2596089a00 の内容を参考にしているが、 mix.browserSync は使わないのでコメントアウトしている。

webpack.mix.js

let mix = require('laravel-mix');

mix
    .disableNotifications()
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('autoprefixer')
        ]
    });

if (mix.config.inProduction) {
    mix.version();
} else {
    // mix.browserSync({
    //     proxy:     'localhost:8000',
    //     startPath: '/'
    // });
}

blade.php ファイル

css, js ファイルの読み込み時に asset 担っている箇所を mix に変更した。

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

参考

参考になりました→ https://qiita.com/kamukiriri/items/73ff35fc7f9083ca68c1
これとてもありがたかった→ https://qiita.com/llhrkll/items/513c23008b2596089a00