как перенаправить все запросы сервера к функции в Firebase Hosting - PullRequest
Новая
       40

как перенаправить все запросы сервера к функции в Firebase Hosting

0 голосов
/ 28 апреля 2018

Пытаюсь реализовать SSR с помощью Firebase, поэтому я использую функцию для предварительного отображения каждой страницы приложения React. Он работает хорошо, за исключением домашней страницы, поэтому должно быть либо совпадение на перенаправлении firebase, либо, возможно, на самом экспресс-маршруте.

firebase.json 

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "**",
        "function": "contentServer"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

contentServer.js 

import * as functions from 'firebase-functions';
import * as fs from 'fs';
import * as path from 'path';

import React from 'react';
import Helmet from 'react-helmet';
import { renderToString } from 'react-dom/server';
import Server from '../browser/Server.js';

const express = require('express');

const app = express();

// might be this? Also tried /**

app.get(['**'], (request, response) => {
  const context = {};
  const location = request.url;
  console.log('Processing request for ', location);

  let appCode;
  try {
    appCode = renderToString(<Server context={context} location={location} />);
  } catch (err) {
    appCode = 'with error';
  }

  // const appState = {
  //   pageTitle: 'Hello World',
  // };

  // const preloadedState = JSON.stringify(appState).replace(/</g, '\\u003c');
  const fileName = path.join(__dirname, '../index.html');
  const htmlTemplate = fs.readFileSync(fileName, 'utf8');
  const head = Helmet.renderStatic();

  const responseString = htmlTemplate
    .replace('<div id="root"></div>', `<div id="root">${appCode}</div>`)
    .replace('<title>React App</title>', `${head.title}\n${head.link}`);
  return response.send(responseString);
});

export default functions.https.onRequest(app);

Curl

Я бегу firebase serve --only functions,hosting

Затем используйте curl, чтобы проверить ответ: 

curl http://localhost:5000 - does not render the home page - just the standard react page
curl http://localhost:5000/ - also does not work - just the standard react page.
curl http://localhost:5000/contact-us - works well and returns the contact us page, all other pages on the site work and trigger the function.

1 Ответ

0 голосов
/ 28 апреля 2018

Если вы хотите перенаправить каждый URL-адрес вашего хоста в экспресс-приложение в облачных функциях, вам нужно будет сделать следующее:

Убедитесь, что в вашей общедоступной папке хостинга нет index.html (в противном случае он всегда будет указываться с путем /).

Сконфигурируйте хостинг Firebase в firebase.json, чтобы переписать все URL функции (вы в настоящее время делаете это в своем блоке «хостинга», что хорошо): 

"rewrites": [
  {
    "source": "**",
    "function": "contentServer"
  }
]

Написать экспортируемую облачную функцию с тем же именем, что и функция в перезаписи , и присоединить экспресс-приложение, которое обрабатывает маршрут с подстановочными знаками *. В index.js в вашей папке функций, минимально: 

const functions = require('firebase-functions')
const express = require('express')

const app = express()

app.get("*", (request, response) => {
    response.send("OK")
})

exports.contentServer = functions.https.onRequest(app)

Если вы запускаете это локально с firebase serve --only hosting,functions, каждый путь, который вы отправляете на localhost: 5000, скажет «ОК».

...