何がどのように崩れているのでしょうか。
現状だと他者が言えることは何もないと思います。
デプロイ忘れやエラー確認はしましたか？
ローカルと本番の環境の差異は何ですか？
xserver上で公開したアプリのレイアウトが崩れている原因がわかりません。
https://personal-development-contest.com/laravel/
上記URLのトップ画面の右上のlogin又はregisterでログイン画面に遷移するとローカル環境では何も問題がなかった画面のレイアウトが崩れてしまいます。
ログイン画面にはjetstreamライブラリを使用しているので、再度xserverにssh接続を行ってプロジェクト直下でjetstreamをインストールをしてみたのですが変わりませんでした。
参考サイト：https://chigusa-web.com/blog/xserver-laravel-github/
https://qiita.com/yuu_1st/items/8495bf670442980b3311
gitでリポジトリを作成しているので何かプッシュされていないものがあるのかと考えて.gitignoreをみたのですが特に関係ありそうなものはありませんでした。
/node_modules /public/hot /public/storage /storage/*.key /vendor .env .env.backup .phpunit.result.cache docker-compose.override.yml Homestead.json Homestead.yaml npm-debug.log yarn-error.log /.idea /.vscode
レイアウトが崩れないようにするにはどのようにすればいいでしょうか。
ご教授願います。
追記
レイアウトが崩れてるについて
下記画像がローカル環境で表示される画面で、本番環境で表示したい画面です。
本番環境では以下の画像のようになりレイアウトが崩れています。
デプロイ忘れについて
gitでリモートからプルしているので、gitignoreの部分で問題なければデプロイ忘れはないと思います。
本番環境だとCSSを置く場所が違うとかなのでしょうか？
エラー確認ついて
ブラウザでエラー確認を忘れていました。
下記の画像のようにCSS,JSファイルが読み込まれていないことがわかりました。
確認したところpublicフォルダにもresourcesフォルダにもCSSが存在していましたが読み込まれていない原因がわかりません。
追記２
ローカル環境はファイルが root 直下に配置されていて http://localhost/でアクセスしていて、本番環境のエックスサーバーではファイルがサブディレクトリ laravel 配下の `http://example.com/laravel/ に配置していませんか？
＞おっしゃる通りで、ローカル環境と本番環境ではシンボリックリンクを以下のように設定しています。
laravel -> /home/xxx/laravel-project/contest/public
また実際に開発者ツールでパスにlaravelを追加したところうまくいきました。
ここでシンボリックリンクを以下のように変更すればうまくいくのではないかと考え変更したのですがうまくいきませんでした。
$HOME/laravel-project/contest/public $HOME/personal-development-contest.com/public_html
次に、webpack.mix.jsのパスにlaravelを追加して、npm run devをすればうまくいくかなと思い試したのですがうまくいきませんでした。
webpack.mix.jsで
mix.js('resources/js/app.js', 'public/laravel/js') .postCss('resources/css/app.css', 'public/laravel/css', [ require('postcss-import'), require('tailwindcss'), ]); if (mix.inProduction()) { mix.version(); }
本番環境に上げるたびに各画面のcssとjsのパスを変更しないといけないのでしょうか？
また、下記ソースコードが登録画面のphpファイルなのですがlaravel初心者すぎて申し訳ないのですが、どこからcssとjsを参照しているのかわかりません・・・
長くなって申し訳ありません。
register.blade.php
<x-guest-layout> <x-jet-authentication-card> <x-slot name="logo"> <x-jet-authentication-card-logo /> </x-slot> <x-jet-validation-errors class="mb-4" /> <form method="POST" action="{{ route('register') }}"> @csrf <div> <x-jet-label for="name" value="{{ __('Name') }}" /> <x-jet-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" /> </div> <div class="mt-4"> <x-jet-label for="email" value="{{ __('Email') }}" /> <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required /> </div> <div class="mt-4"> <x-jet-label for="password" value="{{ __('Password') }}" /> <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" /> </div> <div class="mt-4"> <x-jet-label for="password_confirmation" value="{{ __('Confirm Password') }}" /> <x-jet-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" /> </div> @if (Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature()) <div class="mt-4"> <x-jet-label for="terms"> <div class="flex items-center"> <x-jet-checkbox name="terms" id="terms"/> <div class="ml-2"> {!! __('I agree to the :terms_of_service and :privacy_policy', [ 'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Terms of Service').'</a>', 'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Privacy Policy').'</a>', ]) !!} </div> </div> </x-jet-label> </div> @endif <div class="flex items-center justify-end mt-4"> <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}"> {{ __('Already registered?') }} </a> <x-jet-button class="ml-4"> {{ __('Register') }} </x-jet-button> </div> </form> </x-jet-authentication-card> </x-guest-layout>
追記３
＞bladeテンプレート内で、public_path()を使えば良さそうですが。
上記 public_path関数をguest.blade.php内で以下のように使用しました。
guest.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Fonts --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"> <!-- Styles --> <link rel="stylesheet" href="<?php echo public_path('css/app.css') ?>"> <!-- Scripts --> <script src="<?php echo public_path('css/app.css') ?>" defer></script> </head> <body> <div class="font-sans text-gray-900 antialiased"> {{ $slot }} </div> </body> </html>
開発者ツールでソース内のパスをみたところパス自体は書かれているのですが、やはりcssやjsが効いていないようです。
guest.blade.phpとapp.blade.phpを以下のように変更すると、うまくいきました。
やはり本番環境とローカル環境でフォルダの位置が違う場合は、パスを本番環境用に変更しないといけないのでしょうか？
それともpublic_path()の使い方が間違っているのでしょうか？
またフォルダ構成で以下の画像のようにcssとjsが重複してるのはシンボリックリンクが原因ですか？
シンボリックリンクが原因だったら問題ないのですが・・・
guest.blade.php
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Fonts --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"> <!-- Styles --> <link rel="stylesheet" href="laravel/css/app.css"> <!-- Scripts --> <script src="laravel/js/app.js" defer></script> </head> <body> <div class="font-sans text-gray-900 antialiased"> {{ $slot }} </div> </body> </html>
app.blade.php
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Fonts --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"> <!-- Styles --> <link rel="stylesheet" href="laravel/css/app.css"> @livewireStyles <!-- Scripts --> <script src="laravel/js/app.js" defer></script> </head> <body class="font-sans antialiased"> <x-jet-banner /> <div class="min-h-screen bg-gray-100"> @livewire('navigation-menu') <!-- Page Heading --> @if (isset($header)) <header class="bg-white shadow"> <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> {{ $header }} </div> </header> @endif <!-- Page Content --> <main> {{ $slot }} </main> </div> @stack('modals') @livewireScripts </body> </html>
コメントありがとうございます。
追記いたしました。
まだ回答がついていません
会員登録して回答してみよう
