Получить Express API с интерфейсом React на Firebase

Question

Я пытаюсь получить простой "Hello World" на Firebase.

У меня все нормально работает локально, так как это очень простое приложение.

Структура каталогов:

/
--/client
----/public
------/src
--------/App.js
----/...
----/package.json
--/public
--/app.js
--/package.json
--/...

пакет. json в /

{
    "name": "server",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start:all": "concurrently \"npm run start\" \"npm --prefix client run start\" --kill-others",
        "start": "node app.js"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "concurrently": "^5.2.0",
        "cors": "^2.8.5",
        "express": "^4.17.1"
    }
}

приложение. js в /

const express = require('express');
const cors = require('cors');

const app = express();
const port = 5000;

app.use(cors());

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.get('/test', (req, res) => {
    res.json('TEST ROUTE!');
});

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
});

пакет. json в / client

{
    "name": "client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.1"
    },
    "proxy": "http://localhost:5000",
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build && npm run clean && mv build ../public",
        "clean": "rimraf ../public",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

App. js at / client / src /

import React from 'react';
import './App.css';

const App = () => {
    fetch('/test')
        .then((response) => response.json())
        .then((data) => console.log(data));

    return <div className="App">REACT App.js</div>;
};

export default App;

работает

npm run start:all

В результате будет Express работает на 5000 и React работает на: 3000

Затем я увижу сообщение от моего клиента «React App. js» и сервера через консоль браузера «ТЕСТОВЫЙ МАРШРУТ» .

Когда я запускаю:

firebase deploy

, я вижу сообщение из внешнего интерфейса «React App. js», но в консоли я см .:

localhost:5000/test:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
(index):1 Uncaught (in promise) TypeError: Failed to fetch

Как мне развернуть это приложение в Firebase, чтобы интерфейс и серверная часть могли общаться друг с другом?

Answer 1

Хостинг Firebase не поддерживает развертывание узловых приложений (или любого бэкэнд-кода). Он просто обслуживает статические c ресурсы, такие как HTML, CSS, JS, и изображения.

Хостинг Firebase поддерживает запросы проксирования к облачным функциям , которые могут запускать код в приложениях nodejs и даже Express. Это требует значительно более сложной настройки и развертывания, и вы не можете использовать app.listen() - вы должны принять структуру, которую Cloud Functions предоставляет для обработки ваших конечных точек API. Для получения дополнительной информации прочтите документацию .