Хостинг React / Firebase: почему при обновлении страницы пользователю предлагается войти в систему?

У меня есть реагирующее веб-приложение, развернутое на хостинге firebase с использованием базы данных firebase.

При локальном запуске приложения (yarn start) все работает должным образом ... Я могу обновить страницу, и она просто перезагрузит контент. Однако, как только я развертываю его в firebase и пытаюсь выполнить те же действия, веб-приложение перенаправляется на https://appengine.google.com, где пользователь должен войти в систему.

Хостинг React / Firebase: почему при обновлении страницы пользователю предлагается войти в систему?

Я использую webpack для создания приложения и развертывания в firebase. Я использую инструменты firebase.

Это сложная проблема для объяснения, поскольку я не понимаю, почему пользователя просят войти в систему. Веб-приложение не имеет функции входа в систему (аутентификации).

Веб-пакет содержит следующее:

  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },

  devServer: {
    historyApiFallback: true,
  },

Для обработки маршрутизации я использую BrowserRouter от react-router-dom:

import { BrowserRouter, Route, Switch } from 'react-router-dom'

<BrowserRouter>
  <Switch>
    <Route
      exact
      path='/projects'
      component = {Projects} />
  </Switch>
</BrowserRouter>

firebase.json:

{
  "database": {
    "rules": "rules/rules.json"
  },
  "hosting": {
    "public": "webapp/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "webapp"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  }
}

Заранее спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
742
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Фиксированный!

Проблема была вызвана функцией в массиве перезаписей. Это заставило firebase попытаться загрузить функцию с именем webapp. Однако у меня не было функции firebase под названием webapp.

Чтобы решить эту проблему, мне нужно было сделать "destination": "/index.html" вместо «function»: «webapp». Таким образом, мы получили следующий firebase.json:

{
  "database": {
    "rules": "rules/rules.json"
  },
  "hosting": {
    "public": "webapp/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  }
}

Другие вопросы по теме