この記事の目的
夏休みに作成した、子供のプログラミングの作品を公開する方法としてFirebaseを利用した方法で、html, javascript, css の作品を公開する方法ができないかなぁと色々と調べてみたことを残して誰かの作品アウトプットに役に立てれば良いかなと思い記事を書きました
必要なもの
パソコン環境
- Windows10
- nodeJs
- version 10.16.3を使用
- npm
- Windows Powershell
アカウント
Googleアカウントだけ
手順
Windows Powershellを利用してコマンドを実行していきます
Firebaseコマンドを準備
nodeJsをインストール
chocolateyを利用してnodejsのバージョンを指定してインストールをします
参考記事↓↓
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'))
【nodeJs インストールコマンド】
> choco install nodejs.install --version 10.16.3 -y
node -v コマンドで v10.16.3 になっていれば成功です
Firebaseコマンドをインストール
ここからは管理者権限で実行しなくても大丈夫です
以下のコマンドをPowershellで実行をします
> npm install -g firebase-tools
Firebaseコマンド実行
以下のコマンドをPowershellで実行をします
> firebase login
初めにコマンドを実行するとエラーレポートをあつめてもよろしいですか？
と聞かれるので、「Y」にしましょう
アカウントを選択
Firebaseのコマンドを実行すると、どのアカウントでログインをするかがブラウザに表示されますので、利用するGoogleアカウントを選択しましょう
Chromeブラウザでやるとやりやすいです
認証確認
Firebaseの利用を承認しますか？といった画面がでてきますので、承認を選択して、これがでたらコマンドの準備が完了です
Windows PowerShellログインするGoogleアカウントがでたらOK！！
Firebaseのプロジェクトを作成
コンソールにアクセスしてプロジェクトを作成していきます
URL：https://firebase.google.com/
プロジェクトを追加を選択
公開したいプロジェクトの名前をつけましょう
今回はGoogleアナリティクスの機能を利用しないため「なし」でプロジェクトを作成するを選択する
準備ができたら続行を選択
続行を選択してこの画面が現れたらプロジェクト側の準備が完了！！
Firebaseで公開
公開したいフォルダの作成
自分が公開したいプログラムのフォルダをつくりそこでfirebaseのデプロイ準備を進めていきます
例としては C:\Users\{ユーザーの名前}\Desktop\Project\shareProject でコマンドを実行していきます
Hosting設定
以下のコマンドをPowershellで実行をします（フォルダはC:\Users\{ユーザーの名前}\Desktop\Project\shareProject）
> firebase init
- 今回はHostingのみを利用するので、矢印キーでHostingに合わせて、スペースキーを入力し「＊」がHostingのみにする
- 構成設定が終わったらエンターキー
プロジェクトの設定
プロジェクトの選択では、既存のプロジェクトを利用するので
「Use an existing prokect」を選択
先ほど作成したプロジェクトを選択する
公開設定
公開設定はPublicで他の方が見れるようにしましょう
What do you want to use as your public directory?と聞かれるので「Public」を記入してエンター
Configure as a single-page appは利用しなので「N」を選択してエンター
ファイルの確認
全てのセットアップが完了したら以下のファイルが作成されます
- Public
- .firebaserc
- .gitignore
- firebase.json
Web上には【Public配下】のものが公開されます
公開しよう！
publicのフォルダに「myAppフォルダ」を作成し、「myApp」フォルダの中に自分の公開したい作品を入れる
コマンドをPowershellで実行をします（コマンド実行場所はC:\Users\{ユーザーの名前}\Desktop\Project\shareProjectで実行）
> firebase deploy
実際に公開した作品がこちらです
https://sharemyprojecttakahashi-1.web.app/myApp/
まとめ
夏休みにhtml, javascript, css の作品を作ったものをFirebaseにおいて、作品を共有するのに試していただけると幸いです。