运行 firebase deploy 时找不到 404 页面

Question

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

因此，首先安装firebase-tools然后运行npm run build，然后我初始化了 firebase（我已登录）。然后我跑了firebase deploy。在回答了提示的问题后，我得到了一个指向我所谓的工作站点的URL。

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

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

要实时查看此错误，请访问以下链接

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

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 中的代码片段：

{
  "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目录。那挺好的。这是Create React App的输出目录。除非您有意更改 CRA 构建的位置，否则 Firebase 应该部署该build文件夹中的任何内容。

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

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