到目前为止做了那麽多东西，但都仅限於在自己的本机观看，还没有发布到网路上面，因此没有人可以看得到，因此本篇来介绍要如何将成品发布到网路上吧!!

设定发布细节

还记得一开始我们在设定 firebase-tools的工具吗?可以帮助我们快速设定好专案与firebase各个服务的连接设定，但是当时并没有使用到部属的 hosting 服务，所以我们在来设定一次。

在专案下输入

firebase init

会询问你已经设定过了，是否要再重新设定，输入是

之前只有选择 Firestore ，这次再多选一个 Hosting ，然後会再询问你要使用哪一个专案，就选择目前正在使用的专案

之後会再询问一些设定的问题，基本上一直按下去就好了，但是到了hosting的问题，要特别注意

• 发布的资料夹，预设是public，先直接按是，再来修改
• 是否为 SPA应用程序，这边要输入 yes
• 要不要与 github 功能设定结合，这边建议先按否，先不做这件事情

这样就建立完成罗，可以看到会自动帮你建立一个 firebase.json 的档案

{
  "hosting": {
		// 修改发布路径
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

其中刚刚设定要发布的public的资料夹路径需要修改。已 angular 专案来说，打包的成品会放在 dist 资料夹下面，而在nx 专案中，因为是 monorepo的关系，所以会再加上模组或应用程序的名称，来区分下面各个专案。

以本专案来说会修改成

"public": "dist/apps/hello-nx-ironman",

发布专案

在发布之前，别忘了先建构与打包好专案

ng build

打包好之後，发布专案

firebase deploy --only-hosting

如果觉得每次都要下两个指令很麻烦的话，也可以用 npm 将两个指令二合一

这样就可以打包好後发布

{
...
build:deploy:"ng build && firebase deploy --only-hosting"
}

发布上去之後，就可以看到自己的专案的网址罗，而且是 [web.app](http://web.app) 结尾，看起来蛮专业的。

另外firebase 的 hosting 还有简易的版本管理的功能，如果发现不对，可以一键切换版本，只要一秒钟而已，非常方便