サイトのSSL化によりサイトのホーム ("/")アクセス時、CSSが反映されない事象が起こりました。
なんとか対応できたので、備忘録に書き記したいと思います。
前提
- Herokuにデプロイしている
- 以下の形で、httpsを強制している
app/Providers/AppServiceProvider.php
<?php
namespace App\Providers;
use App\User;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
/**
* .envファイルの(APP_ENV=production)のとき、強制https化
*/
if(\App::environment('production')) {
\URL::forceScheme('https');
}
bladeテンプレートの参照をsecure_assetに変更
bladeテンプレートなどでLaravelフォルダ内を参照にしている場合、
asset -> secure_asset
に変更する。
resoure/views/layouts.app
{{-- CSS --}}
<link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">
しかしこのままだとローカル環境ではSSL化されていないので、アプリを動かした時にCSSが反映されなくなってしままいます
開発効率が悪くなってしまうので@if使って切り分けましょう。
resource/views/layouts.app
@if(app('env') == 'production')
<link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">
@else
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@endif
これでスッキリします。
参考
[Laravelのアセットに関するTips]https://qiita.com/sakuraya/items/411dbc2e1e633928340e