在 Firebase 上使用 React 前端运行 Express API答案

【问题标题】：Get Express API running with React frontend on Firebase在 Firebase 上使用 React 前端运行 Express API
【发布时间】：2020-08-04 04:00:05
【问题描述】：

我正在尝试在 Firebase 上获得一个简单的“Hello World”。

我在本地运行良好，因为它是一个非常简单的应用程序。

目录结构是：

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

package.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"
    }
}

app.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}`);
});

/client 中的 package.json

{
    "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 位于 /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 running on 5000 和 React running on :3000

然后我将通过浏览器控制台“TEST ROUTE”看到来自我的客户端“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，以便前端和后端可以相互通信？

【问题讨论】：

标签： node.js reactjs firebase express firebase-hosting

【解决方案1】：

Firebase 托管不支持部署节点应用（或任何后端代码）。它只提供静态资源，如 HTML、CSS、JS 和图像。

Firebase 托管确实支持对Cloud Functions 的代理请求，它可以在 nodejs 甚至 Express 应用上运行代码。这需要更复杂的设置和部署，并且您不能使用 app.listen() - 您必须接受 Cloud Functions 提供的用于处理 API 端点的框架。 Read the documentation for more information.

【讨论】：