运行 firebase deploy 时找不到 404 页面

Question

我使用 react 和 Google 的 firebase 为 auth 和数据库构建了一个令人惊叹的网络应用程序。在我的本地服务器上，一切运行良好。我可以验证某些用户并在成功登录后导航到下一页。当使用 Firebase 托管部署我的网络应用程序时，问题就开始了。

所以，首先安装了firebase-tools，然后运行npm run build，然后我初始化了firebase（我已登录）。然后我跑了firebase deploy。在回答了提示的问题后，给了我一个 URL 到我应该工作的网站。

现在，当我使用应该成功登录的详细信息登录时，我收到以下错误：

404 网页未找到 在此网站上找不到指定的文件。请检查 URL 是否有错误，然后重试。 为什么我会看到这个？ 此页面由 Firebase 命令行界面生成。要修改它，请编辑项目配置的公共目录中的 404.html 文件。

要实时查看此错误，这里是the link

成功登录后应该将用户导航到下一页的部分代码如下所示：

import React, { Component } from 'react';
import fire from './Firebase';
import List from './components/List';

class Login extends Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      email: '',
      password: ''
    };
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  login(e) {
    e.preventDefault();
    fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{
        window.location = 'list'; 
    }).catch((error) => {
        console.log(error);
        alert("You don't have priviledges to log in!")
      });
  }

这是 firebase.json 中的代码 sn-p：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

函数的错误：

=== Deploying to 'my-tutor-d4133'...

i  deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /home/superlelo/Desktop/myTutor/mytutor/functions
> eslint .

sh: 1: eslint: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! functions@ lint: `eslint .`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/superlelo/.npm/_logs/2019-09-26T21_15_49_018Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code1

我不知道如何解决这个问题，有人可以帮忙吗？

谢谢。

Answer 1

您的firebase.json 文件的hosting->public 条目正确指向build 目录。那挺好的。那是output directory for Create React App。除非您有意更改 CRA 的构建位置，否则 Firebase 应该部署该 build 文件夹中的任何内容。

由于您希望路由发生在客户端 - 由 React 处理 - 您需要后端 (Firebase) 为您的 React 网站提供所有请求的路由。为此，您可以在配置中添加 rewrites 部分：

"hosting": {
    "public": "build",
    "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
    ],
    "rewrites": [
        {
            "source": "**",
            "destination": "/index.html"
        }
    ]
}