reactjs - 运行 firebase deploy 时找不到 404 页面

Question

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

所以，先安装了firebase-tools然后跑 npm run build之后我初始化了firebase(我已登录)。然后我跑了firebase deploy .回答完提示的问题后，一个URL到我所谓的工作地点是给我的。

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

404 Page Not Found The specified file was not found on this website. Please check the URL for mistakes and try again. Why am I seeing this? This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

要实时查看此错误，请访问 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 中的代码片段:

{
  "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"
        }
    ]
}