DAY26-在firebase上架你的react网站吧

前言：

今天是第26天啦，阿森在整个开发的部分也差不多完成了，准备进入最後上架测试阶段！

在上架的部分阿森选择使用firebase来当host，因为使用起来真的满方便的，免费的额度也很高，拿来测试几乎不用付到什麽钱。正式上架的计费阿森也觉得满ok的，所以在这里推荐给大家！

费用部分：

关於详细的计费方式可以直接到官方网站：

https://firebase.google.com/pricing

几个重点大概是免费版的spark专案一个月可以提供：

1G的储存空间

10G的下载量

20k写

50k读

20k删

而付费版的Blaze专案一个月计费是：

0.18usd/GB的储存计费

0.026usd/GB的下载计费

跟我们的需求换算下来其实很划算。

怎麽deploy：

再来就说到怎麽上架你的网站了，首先我们先到firebase：

https://firebase.google.com

可以直接用google帐户登入。

然後新增一个专案：

再来我们打开终端机，输入这串:

npm i -g firebase-tools

接着输入：

firebase login

应该会跳出Firebase CLI要求登入的页面，这里当然是用你的google帐号登入。

然後我们到专案的终端机输入：

firebase init

像这样：

再来会依序问几个set up和deploy的问题：

? Please select an option:

Use an existing project

? Select a default Firebase project for this directory:

这里选你刚刚新增的firebase专案

i  Using project 你的firebase专案

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory?

build

? Configure as a single-page app (rewrite all urls to /index.html)?

Yes

? Set up automatic builds and deploys with GitHub?

No

? File public/index.html already exists. Overwrite?

No

i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...

i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

都完成之後就表示他已经成功连上你的firebase了。

然後我们要使用这串：

npm run build

跑完一大堆东西後会出现：

这时候我们输入最後一串指令：

firebase deploy

看到complete就成功了喔！

https://dnms-93f6b.web.app

可以到他预设的url预览自己的网站，也可以传给其他人一起测试，这样比起前面的ngrok会快许多，也更符合之後上架的状态。

小结：

今天介绍了如何在firebase上架react网站，希望这个好用的工具能帮到各位！

那就先这样，我们明天见！