問題点
テスト環境: Chrome(Windows10)
以下のコードで 「http://localhost:5000/color」でアクセスすると、
「このページは動作していません。リダイレクトが繰り返し行われました」と表示されます。
(「http://localhost:5000/」の場合はうまく表示されます)
Firebase
1ファイル構成 2myapp/ 3`-- functions 4 |-- index.js 5 `-- views 6 |-- color 7 | |-- index.ejs 8 | `-- styles.css 9 |-- index.ejs 10 `-- styles.css
/functions/index.js
Express
1const functions = require('firebase-functions'); 2const express = require('express'); 3const app = express(); 4 5app.set('views', __dirname + '/views'); 6app.set('view engine', 'ejs'); 7app.use(express.static(__dirname + '/views')); // ここが怪しい 8 9app.get('/', (req, res) => { 10 const color = 'orange'; 11 res.render('index', { 12 title: color, 13 color: color 14 }); 15}); 16 17app.get('/color', (req, res) => { 18 const color = 'yellow'; 19 res.render('color/index', { 20 title: color, 21 color: color 22 }); 23}); 24 25exports.app = functions.https.onRequest(app);
/functions/views/index.ejs
ejs
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>myapp -<%= title %></title> 6 <link rel="stylesheet" href="/styles.css"> 7</head> 8<body> 9<p><%= color %></p> 10</body> 11</html>
/functions/views/styles.css
css
1body { 2 background: orange; 3}
/functions/views/color/index.ejs
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>myapp -<%= title %></title> 6 <link rel="stylesheet" href="/color/styles.css"> 7</head> 8<body> 9<p><%= color %></p> 10</body> 11</html>
/functions/views/color/styles.css
css
1body { 2 background: yellow; 3}
試してみたこと
functions の中に新たに「static」という名のフォルダを作って、そこに css ファイルを移動。
静的ファイルの設定を
app.use(express.static(__dirname + '/static'));
と書き換え、css ファイルのリンク先も合わせて変更。
これでうまく表示されるようになりますが、表示用のフォルダが二つになってカッコ悪いです。
(views フォルダの中に static フォルダを入れてみたけど、なぜかだめでした)
確かちょっと前にコードを書いたときは、
app.use(express.static(__dirname + '/views')); で、
views フォルダにcss やら bootstrap を入れても、きちんと動いていたような気がします。
何かお気づきの点がありましたら、アドバイスよろしくお願いします。
追記
もしかしたら、どこかファイルが破損しているかもしれない、と思い、もう一度、まっさらな状態からやり直してから、firebase deploy をしてみました。
以下がその画像です。
一見、うまく表示されているみたいですけど、url の方を見てみると、color の後に自動でスラッシュがついてしまっています。なんか原因がこれっぽいです。
「/color/」を探して「/」と「/color」しかないから、ループ???
でもまだ、どうしたらいいかわかりません。引き続き調査中です...
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。