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

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

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

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

596閲覧

Firebase functions (Express + Ejs)の設定でエラー(リダイレクトループ)

退会済みユーザー

退会済みユーザー

総合スコア0

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2019/07/23 04:56

編集2019/07/23 09:12

問題点

テスト環境: 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」しかないから、ループ???
でもまだ、どうしたらいいかわかりません。引き続き調査中です...

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

どうやら app.get('/color', (req, res) => {}); の 「color」と
views の中にあるフォルダ名が「color」で同じだと後ろにスラッシュがついてしまう模様。
なので、views の中にあるフォルダ名を「colors」に変更しました。

コードの変更箇所は以下の通り。
/functions/index.js

express

1省略 2app.get('/color', (req, res) => { 3 const color = 'yellow'; 4 res.render('colors/index', { 5 title: color, 6 color: color 7 }); 8}); 9省略

/functions/views/colors/index.ejs

ejs

1省略 2<link rel="stylesheet" href="/colors/styles.css"> 3省略

イメージ説明

※補足
views の中に css 以外のbootstrap や jQuery などのファイルを入れてみたけど、問題ないようです。

投稿2019/07/23 12:10

編集2019/07/23 20:22
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問