Q&A公開したLaravelプロジェクトにcssを反映させたい
独学でポートフォリオ作成中の者です。
ssl接続でgithubにpushしたlaravelプロジェクトを、SentOSの/var/www/プロジェクト ディレクトリにクローンし、LaravelのWelcome画面の表示ができるところまで来ました。
しかしURLにルートを入力し、切り替わったページにcssとjavascriptが適応されていません。
(HTMLがそのまま表示されますが、動的な処理に問題はありません)
ローカルでの表示、Welcome画面ではcssが効いています。
全てのページでcss/javascriptが適応されるためのアドバイスや、確認した方がよいファイルがございましたら教えていただきたいです。
該当のソースコード
resource/views/layouts/header.blade.php
HTML
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <!-- Viewport --> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 9 <!-- Fonts --> 10 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 11 <link href="https://fonts.googleapis.com/css2?family=Coda+Caption:wght@800&display=swap" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet"> 13 14 <!-- Styles --> 15 <link rel="stylesheet" href="{{ asset('css/app.css') }}"> 16 <link rel="stylesheet" href="{{ asset('css/style-reset.css') }}"> 17 <link rel="stylesheet" href="{{ asset('css/style.css') }}"> 18 <link rel="stylesheet" href="{{ asset('css/style-mobile.css') }}"> 19 20 <!-- Scripts --> 21 <script src="{{ asset('js/script.js') }}"></script> 22 23 <title>my project</title> 24 </head>
デプロイ先のソースコード
HTML
1<!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <!-- Viewport --> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 9 <!-- Fonts --> 10 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 11 <link href="https://fonts.googleapis.com/css2?family=Coda+Caption:wght@800&display=swap" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet"> 13 14 <!-- Styles --> 15 <link rel="stylesheet" href="https://ec2-xx-xxx-xx-xx.ap-northeast-1.compute.amazonaws.com/css/app.css"> 16 <link rel="stylesheet" href="https://ec2-xx-xxx-xx-xx.ap-northeast-1.compute.amazonaws.com/css/style-reset.css"> 17 <link rel="stylesheet" href="https://ec2-xx-xxx-xx-xx.ap-northeast-1.compute.amazonaws.com/css/style.css"> 18 <link rel="stylesheet" href="https://ec2-xx-xxx-xx-xx.ap-northeast-1.compute.amazonaws.com/css/style-mobile.css"> 19 20 <!-- Scripts --> 21 <script src="https://ec2-xx-xxx-xx-xx.ap-northeast-1.compute.amazonaws.com/js/script.js"></script> 22 23 <title>my project</title> 24 </head>
###ディレクトリ構造
/var/www/プロジェクト/public/css/各style.css
/var/www/プロジェクト/public/js/script.js
試したこと
デプロイ先のソースコードをクリックすると、リンクが見つからずにタイムアウトし下記表示
このサイトにアクセスできません
ec2-xx-xxx-xx-xx.ap-northeast-1.compute.amazonaws.comからの応答時間が長すぎます。
[aws,rails,css]awsにデプロイした時にcssが反映されないエラーの解決例
この記事を参考にしましたが、ec2上に/etc配下のnginxディレクトリがない、Railsの記事のため断念
LaravelをAWSのEC2へデプロイする手順
デプロイは主にこの記事を参考に行いました
補足情報
OS centos7 / PHP 7.2.33 / laravel 5.8.38
回答1件
0
自己解決
assetをあきらめてcssファイルまでの相対パスをそのまま記載したところ適応されました。
質問前にも確認したはずでしたが、どこかの記載がおかしく失敗していたようです。
別の箇所に根本的な原因があるような気がするので、分かり次第追記します。
HTML
1<!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <!-- Viewport --> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 9 <!-- Fonts --> 10 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 11 <link href="https://fonts.googleapis.com/css2?family=Coda+Caption:wght@800&display=swap" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet"> 13 14 <!-- Styles --> 15 <link rel="stylesheet" href="css/app.css"> 16 <link rel="stylesheet" href="css/style-reset.css"> 17 <link rel="stylesheet" href="css/style.css"> 18 <link rel="stylesheet" href="css/style-mobile.css"> 19 20 <!-- Scripts --> 21 <script src="js/script.js"></script> 22 23 <title>my project</title> 24 </head>
投稿2020/10/03 14:22
総合スコア30
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。