質問編集履歴

3

追記3

2022/04/11 11:55

投稿

soso0programmer
soso0programmer

スコア35

test CHANGED
File without changes
test CHANGED
@@ -146,6 +146,122 @@
146
146
  </x-guest-layout>
147
147
  ```
148
148
 
149
-
149
+ 追記3
150
-
150
+ >bladeテンプレート内で、public_path()を使えば良さそうですが。
151
-
151
+ 上記 public_path関数をguest.blade.php内で以下のように使用しました。
152
+
153
+ ```guest.blade.php
154
+ <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
155
+ <head>
156
+ <meta charset="utf-8">
157
+ <meta name="viewport" content="width=device-width, initial-scale=1">
158
+ <meta name="csrf-token" content="{{ csrf_token() }}">
159
+
160
+ <title>{{ config('app.name', 'Laravel') }}</title>
161
+
162
+ <!-- Fonts -->
163
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
164
+
165
+ <!-- Styles -->
166
+ <link rel="stylesheet" href="<?php echo public_path('css/app.css') ?>">
167
+
168
+ <!-- Scripts -->
169
+ <script src="<?php echo public_path('css/app.css') ?>" defer></script>
170
+ </head>
171
+ <body>
172
+ <div class="font-sans text-gray-900 antialiased">
173
+ {{ $slot }}
174
+ </div>
175
+ </body>
176
+ </html>
177
+ ```
178
+ 開発者ツールでソース内のパスをみたところパス自体は書かれているのですが、やはりcssやjsが効いていないようです。
179
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-11/07a12ffd-585f-4449-b9df-becc7b21843f.png)
180
+
181
+ guest.blade.phpとapp.blade.phpを以下のように変更すると、うまくいきました。
182
+ やはり本番環境とローカル環境でフォルダの位置が違う場合は、パスを本番環境用に変更しないといけないのでしょうか?
183
+ それともpublic_path()の使い方が間違っているのでしょうか?
184
+ またフォルダ構成で以下の画像のようにcssとjsが重複してるのはシンボリックリンクが原因ですか?
185
+ シンボリックリンクが原因だったら問題ないのですが・・・
186
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-11/5280fee0-bbb5-4533-993c-1a05f4ae1587.png)
187
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-11/242e975b-abcb-45f5-af39-8c5b926d9924.png)
188
+
189
+
190
+ ```guest.blade.php
191
+ <!DOCTYPE html>
192
+ <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
193
+ <head>
194
+ <meta charset="utf-8">
195
+ <meta name="viewport" content="width=device-width, initial-scale=1">
196
+ <meta name="csrf-token" content="{{ csrf_token() }}">
197
+
198
+ <title>{{ config('app.name', 'Laravel') }}</title>
199
+
200
+ <!-- Fonts -->
201
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
202
+
203
+ <!-- Styles -->
204
+ <link rel="stylesheet" href="laravel/css/app.css">
205
+
206
+ <!-- Scripts -->
207
+ <script src="laravel/js/app.js" defer></script>
208
+ </head>
209
+ <body>
210
+ <div class="font-sans text-gray-900 antialiased">
211
+ {{ $slot }}
212
+ </div>
213
+ </body>
214
+ </html>
215
+ ```
216
+ ```app.blade.php
217
+ <!DOCTYPE html>
218
+ <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
219
+ <head>
220
+ <meta charset="utf-8">
221
+ <meta name="viewport" content="width=device-width, initial-scale=1">
222
+ <meta name="csrf-token" content="{{ csrf_token() }}">
223
+
224
+ <title>{{ config('app.name', 'Laravel') }}</title>
225
+
226
+ <!-- Fonts -->
227
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
228
+
229
+ <!-- Styles -->
230
+ <link rel="stylesheet" href="laravel/css/app.css">
231
+
232
+ @livewireStyles
233
+
234
+ <!-- Scripts -->
235
+ <script src="laravel/js/app.js" defer></script>
236
+ </head>
237
+ <body class="font-sans antialiased">
238
+ <x-jet-banner />
239
+
240
+ <div class="min-h-screen bg-gray-100">
241
+ @livewire('navigation-menu')
242
+
243
+ <!-- Page Heading -->
244
+ @if (isset($header))
245
+ <header class="bg-white shadow">
246
+ <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
247
+ {{ $header }}
248
+ </div>
249
+ </header>
250
+ @endif
251
+
252
+ <!-- Page Content -->
253
+ <main>
254
+ {{ $slot }}
255
+ </main>
256
+ </div>
257
+
258
+ @stack('modals')
259
+
260
+ @livewireScripts
261
+ </body>
262
+ </html>
263
+ ```
264
+
265
+
266
+
267
+

2

回答に対しての返信追記

2022/04/10 14:24

投稿

soso0programmer
soso0programmer

スコア35

test CHANGED
File without changes
test CHANGED
@@ -56,4 +56,96 @@
56
56
 
57
57
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-10/bc0447b9-5804-45bb-826a-94e28523de86.png)
58
58
 
59
+ 追記2
60
+ ローカル環境はファイルが root 直下に配置されていて http://localhost/でアクセスしていて、本番環境のエックスサーバーではファイルがサブディレクトリ laravel 配下の `http://example.com/laravel/ に配置していませんか?
61
+ >おっしゃる通りで、ローカル環境と本番環境ではシンボリックリンクを以下のように設定しています。
62
+ laravel -> /home/xxx/laravel-project/contest/public
63
+ また実際に開発者ツールでパスにlaravelを追加したところうまくいきました。
64
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-10/78a370f3-4904-45b0-8556-8a3898786033.png)
59
65
 
66
+ ここでシンボリックリンクを以下のように変更すればうまくいくのではないかと考え変更したのですがうまくいきませんでした。
67
+ ```ここに言語を入力
68
+ $HOME/laravel-project/contest/public $HOME/personal-development-contest.com/public_html
69
+ ```
70
+ 次に、webpack.mix.jsのパスにlaravelを追加して、npm run devをすればうまくいくかなと思い試したのですがうまくいきませんでした。
71
+ ```webpack.mix.jsで
72
+ mix.js('resources/js/app.js', 'public/laravel/js')
73
+ .postCss('resources/css/app.css', 'public/laravel/css', [
74
+ require('postcss-import'),
75
+ require('tailwindcss'),
76
+ ]);
77
+
78
+ if (mix.inProduction()) {
79
+ mix.version();
80
+ }
81
+ ```
82
+ 本番環境に上げるたびに各画面のcssとjsのパスを変更しないといけないのでしょうか?
83
+ また、下記ソースコードが登録画面のphpファイルなのですがlaravel初心者すぎて申し訳ないのですが、どこからcssとjsを参照しているのかわかりません・・・
84
+ 長くなって申し訳ありません。
85
+
86
+ ```register.blade.php
87
+ <x-guest-layout>
88
+ <x-jet-authentication-card>
89
+ <x-slot name="logo">
90
+ <x-jet-authentication-card-logo />
91
+ </x-slot>
92
+
93
+ <x-jet-validation-errors class="mb-4" />
94
+
95
+ <form method="POST" action="{{ route('register') }}">
96
+ @csrf
97
+
98
+ <div>
99
+ <x-jet-label for="name" value="{{ __('Name') }}" />
100
+ <x-jet-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
101
+ </div>
102
+
103
+ <div class="mt-4">
104
+ <x-jet-label for="email" value="{{ __('Email') }}" />
105
+ <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
106
+ </div>
107
+
108
+ <div class="mt-4">
109
+ <x-jet-label for="password" value="{{ __('Password') }}" />
110
+ <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
111
+ </div>
112
+
113
+ <div class="mt-4">
114
+ <x-jet-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
115
+ <x-jet-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
116
+ </div>
117
+
118
+ @if (Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature())
119
+ <div class="mt-4">
120
+ <x-jet-label for="terms">
121
+ <div class="flex items-center">
122
+ <x-jet-checkbox name="terms" id="terms"/>
123
+
124
+ <div class="ml-2">
125
+ {!! __('I agree to the :terms_of_service and :privacy_policy', [
126
+ '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>',
127
+ 'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Privacy Policy').'</a>',
128
+ ]) !!}
129
+ </div>
130
+ </div>
131
+ </x-jet-label>
132
+ </div>
133
+ @endif
134
+
135
+ <div class="flex items-center justify-end mt-4">
136
+ <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
137
+ {{ __('Already registered?') }}
138
+ </a>
139
+
140
+ <x-jet-button class="ml-4">
141
+ {{ __('Register') }}
142
+ </x-jet-button>
143
+ </div>
144
+ </form>
145
+ </x-jet-authentication-card>
146
+ </x-guest-layout>
147
+ ```
148
+
149
+
150
+
151
+

1

質問修正依頼対応

2022/04/10 09:03

投稿

soso0programmer
soso0programmer

スコア35

test CHANGED
File without changes
test CHANGED
@@ -31,3 +31,29 @@
31
31
 
32
32
  レイアウトが崩れないようにするにはどのようにすればいいでしょうか。
33
33
  ご教授願います。
34
+
35
+ 追記
36
+ レイアウトが崩れてるについて
37
+ 下記画像がローカル環境で表示される画面で、本番環境で表示したい画面です。
38
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-10/19e5302f-dc5f-4354-990c-2f4376bc2d70.png)
39
+
40
+ 本番環境では以下の画像のようになりレイアウトが崩れています。
41
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-10/a85d708e-a68d-4e6e-8ca4-466d2914a752.png)
42
+
43
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-10/c388f8fc-4db4-4d17-bed4-95ac53f45924.png)
44
+
45
+ デプロイ忘れについて
46
+ gitでリモートからプルしているので、gitignoreの部分で問題なければデプロイ忘れはないと思います。
47
+ 本番環境だとCSSを置く場所が違うとかなのでしょうか?
48
+
49
+ エラー確認ついて
50
+ ブラウザでエラー確認を忘れていました。
51
+ 下記の画像のようにCSS,JSファイルが読み込まれていないことがわかりました。
52
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-10/a7128d2c-1de7-4938-8319-ac91562605e9.png)
53
+
54
+ 確認したところpublicフォルダにもresourcesフォルダにもCSSが存在していましたが読み込まれていない原因がわかりません。
55
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-10/7a20f009-e8c0-4ec3-9b59-892fa22d62bd.png)
56
+
57
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-10/bc0447b9-5804-45bb-826a-94e28523de86.png)
58
+
59
+