在Firebase上发布自己的编程作品 ~windows10~

这篇文章的目的是什么?

我在寒假期间使用Firebase作为公开孩子编程作品的方法进行了一些研究,希望能够找到一种将HTML、JavaScript和CSS作品公开的方式。我写下这些想法,希望对其他人作品的展示有所帮助。

必需品 (bì xū

电脑环境

    • Windows10

 

    • nodeJs

version 10.16.3を使用

npm
Windows Powershell

账户

只需Google帐号。

操作步骤

我們將使用Windows Powershell來執行命令。

准备Firebase命令

安装Node.js

使用Chocolatey来指定Node.js的版本并进行安装。
参考文章↓↓
https://qiita.com/sat0tabe/items/b3f74bd1fe901719c975

注意事项

在通过以管理员身份启动的Windows Powershell上执行以下命令:
【chocolatey 安装命令】

> Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

【Node.js安装命令】

> choco install nodejs.install --version 10.16.3 -y

只要在命令行中输入 node -v 后显示 v10.16.3,即为成功。

安装Firebase命令

不需要以管理员权限执行,可以从这里执行以下的Powershell命令。

> npm install -g firebase-tools
スクリーンショット 2020-08-16 19.42.36.png

执行Firebase命令

在PowerShell中执行以下命令

> firebase login

当你执行命令时,被询问是否可以收集错误报告,你可以选择“是”(Y)。

スクリーンショット 2020-08-16 19.45.38.png

请选择账户

在执行Firebase命令时,浏览器会显示要使用哪个帐户登录,请选择您要使用的Google帐户。使用Chrome浏览器更加方便。

スクリーンショット 2020-08-16 19.47.21.png

验证确认

当出现“是否批准使用Firebase?”的界面时,请选择批准,一旦出现此界面即表示命令已准备就绪。

スクリーンショット 2020-08-16 19.48.58.png
スクリーンショット 2020-08-16 19.49.51.png

创建Firebase项目

スクリーンショット 2020-08-16 19.52.52.png
スクリーンショット 2020-08-16 19.53.58.png
スクリーンショット 2020-08-16 19.54.35.png
スクリーンショット 2020-08-16 19.55.23.png
スクリーンショット 2020-08-16 19.56.26.png
スクリーンショット 2020-08-16 19.56.59.png

在Firebase上发布

创建想公开的文件夹

スクリーンショット 2020-08-16 20.00.18.png

主持聚會的配置

使用PowerShell在以下位置执行命令(文件夹路径为C:\ Users \ {用户名} \ Desktop \ Projects \ shareProject)。

> firebase init
    • 今回はHostingのみを利用するので、矢印キーでHostingに合わせて、スペースキーを入力し「*」がHostingのみにする

 

    構成設定が終わったらエンターキー
スクリーンショット 2020-08-16 20.02.16.png

项目设置

スクリーンショット 2020-08-16 20.03.58.png
スクリーンショット 2020-08-16 20.04.35.png

公开设置

スクリーンショット 2020-08-16 20.05.42.png
スクリーンショット 2020-08-16 20.06.17.png

确认文件

当所有设置都完成后,将创建以下文件。

    • Public

 

    • .firebaserc

 

    • .gitignore

 

    firebase.json

网上会公开【公共目录】下的内容。

スクリーンショット 2020-08-16 20.08.03.png

让它公之于众!

在公共文件夹中创建一个名为”myApp”的文件夹,并将我想要公开的作品放入”myApp”文件夹中。

スクリーンショット 2020-08-16 20.08.59.png

在PowerShell中执行命令(命令执行路径为C:\Users\{用户的名称}\Desktop\Project\shareProject)。

> firebase deploy
スクリーンショット 2020-08-16 20.10.09.png

以下是我真正发布的作品链接:
https://sharemyprojecttakahashi-1.web.app/myApp/

总结

希望您能在暑假期间尝试将我制作的HTML、JavaScript和CSS作品放在Firebase上,以便共享作品。

bannerAds