React Native项目index.html与Firebase Hosting工作机制及部署咨询

1. 可以将Firebase相关文件存放在backend文件夹内 #

操作注意事项如下：

• 执行firebase init初始化操作前，先在终端进入backend目录，后续生成的firebase.json、.firebaserc等Firebase配置文件都会默认保存在当前的backend目录下，不会影响前端项目的目录结构。
• 初始化过程中配置Hosting的公开目录时，填写你React Native Web项目打包产物的相对路径即可，比如打包产物存放在项目根目录的build文件夹，就填写../build。

2. 无需手动修改Firebase自动生成的欢迎页index.html #

你现在部署后只显示Firebase欢迎页的原因，是初始化时默认将Hosting公开目录设置为了backend文件夹本身，Firebase自动生成的欢迎页index.html就在该目录下，部署时会优先加载这个文件。
正确操作步骤：

1. 先在你的React Native Web项目根目录执行打包命令，通常为npm run build或yarn build，执行完成后会生成包含所有静态资源的打包目录，默认名称一般为build或dist。
2. 打开backend目录下的firebase.json文件，找到hosting配置项，将public字段的值修改为你打包目录的相对路径，示例：

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

3. 删掉backend目录下Firebase自动生成的欢迎页index.html，不需要对其内容做任何修改。
4. 重新执行firebase deploy，部署后就会加载你项目打包产物里的index.html，显示你的项目内容。

额外提示：如果你的项目使用了Browser模式的路由，可在hosting配置中添加重写规则，避免页面刷新出现404：

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

内容的提问来源于stack exchange，提问作者William O'Brien