質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

解決済

xserverの本番環境でレイアウトが崩れる

soso0programmer
soso0programmer

総合スコア32

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

2回答

0評価

0クリップ

407閲覧

投稿2022/04/10 06:33

編集2022/04/11 20:57

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が存在していましたが読み込まれていない原因がわかりません。
イメージ説明

イメージ説明

追記2
ローカル環境はファイルが 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>

追記3
>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>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2022/04/10 07:08

何がどのように崩れているのでしょうか。 現状だと他者が言えることは何もないと思います。 デプロイ忘れやエラー確認はしましたか? ローカルと本番の環境の差異は何ですか?
soso0programmer

2022/04/10 09:04

コメントありがとうございます。 追記いたしました。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。