Firebaseでプログラミング作品を公開 ~windows10~

## この記事の目的
夏休みに作成した、子供のプログラミングの作品を公開する方法として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
```


![スクリーンショット 2020-08-16 19.42.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/c3454829-ce06-1f65-cef1-160c904d8118.png)

### Firebaseコマンド実行
以下のコマンドをPowershellで実行をします

```
> firebase login
```

初めにコマンドを実行するとエラーレポートをあつめてもよろしいですか？
と聞かれるので、「Y」にしましょう

![スクリーンショット 2020-08-16 19.45.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/ea9f568b-cf67-ef4c-9abe-fdcdb0b4c75a.png)

#### アカウントを選択
Firebaseのコマンドを実行すると、どのアカウントでログインをするかがブラウザに表示されますので、利用するGoogleアカウントを選択しましょう
Chromeブラウザでやるとやりやすいです

![スクリーンショット 2020-08-16 19.47.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/fd746392-c9a1-d742-267b-29c51584697e.png)

#### 認証確認
Firebaseの利用を承認しますか？といった画面がでてきますので、承認を選択して、これがでたらコマンドの準備が完了です

![スクリーンショット 2020-08-16 19.48.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/b297e6b5-cf59-914f-cbf1-fb9f0c292911.png)

Windows PowerShellログインするGoogleアカウントがでたらOK！！
![スクリーンショット 2020-08-16 19.49.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/1c2b3432-95b8-c919-6c8a-0874d13f5f93.png)

### Firebaseのプロジェクトを作成
コンソールにアクセスしてプロジェクトを作成していきます
URL：https://firebase.google.com/
![スクリーンショット 2020-08-16 19.52.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/f26ac2be-386a-eef6-98b8-c3668686002c.png)

プロジェクトを追加を選択
![スクリーンショット 2020-08-16 19.53.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/c2b88ad6-967a-1d72-820d-8e21fb7bca03.png)

公開したいプロジェクトの名前をつけましょう
![スクリーンショット 2020-08-16 19.54.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/1aea0e36-cf08-1269-3dc2-834491247010.png)

今回はGoogleアナリティクスの機能を利用しないため「なし」でプロジェクトを作成するを選択する
![スクリーンショット 2020-08-16 19.55.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/fbb7066d-8e81-e6ac-c163-7d99f8a0d208.png)

準備ができたら続行を選択
![スクリーンショット 2020-08-16 19.56.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/b8327814-b81a-0f93-6bd6-137f2c6b0226.png)

続行を選択してこの画面が現れたらプロジェクト側の準備が完了！！
![スクリーンショット 2020-08-16 19.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/4210d1fc-39ea-4c40-e715-dd83a038e13d.png)

### Firebaseで公開
#### 公開したいフォルダの作成
自分が公開したいプログラムのフォルダをつくりそこでfirebaseのデプロイ準備を進めていきます
例としては `C:\Users\{ユーザーの名前}\Desktop\Project\shareProject` でコマンドを実行していきます
![スクリーンショット 2020-08-16 20.00.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/fc808651-1311-67f1-32cf-a14e496931e2.png)

#### Hosting設定
以下のコマンドをPowershellで実行をします（フォルダは`C:\Users\{ユーザーの名前}\Desktop\Project\shareProject`）

```
> firebase init
```

- 今回はHostingのみを利用するので、矢印キーでHostingに合わせて、スペースキーを入力し「＊」がHostingのみにする
- 構成設定が終わったらエンターキー

![スクリーンショット 2020-08-16 20.02.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/f284ad07-085b-2635-cd32-04b8b4bcf5f4.png)

#### プロジェクトの設定
プロジェクトの選択では、既存のプロジェクトを利用するので
「Use an existing prokect」を選択
![スクリーンショット 2020-08-16 20.03.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/8bcc1383-6e52-4a44-8d0f-05a43627e7ab.png)

先ほど作成したプロジェクトを選択する
![スクリーンショット 2020-08-16 20.04.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/abe82401-d081-fa13-c40f-cd62e5baf942.png)

#### 公開設定
公開設定はPublicで他の方が見れるようにしましょう
What do you want to use as your public directory?と聞かれるので「Public」を記入してエンター
![スクリーンショット 2020-08-16 20.05.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/1524379f-c75c-ad62-5a22-a4770af3ebea.png)

Configure as a single-page appは利用しなので「N」を選択してエンター
![スクリーンショット 2020-08-16 20.06.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/95ae46a3-bc1a-c572-aacc-1ce62b9a0ab6.png)

#### ファイルの確認
全てのセットアップが完了したら以下のファイルが作成されます

- Public
- .firebaserc
- .gitignore
- firebase.json

Web上には【Public配下】のものが公開されます

![スクリーンショット 2020-08-16 20.08.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/dd2bfcba-f0af-ca72-80a4-5256ad4c9f10.png)

#### 公開しよう！
publicのフォルダに「myAppフォルダ」を作成し、「myApp」フォルダの中に自分の公開したい作品を入れる

![スクリーンショット 2020-08-16 20.08.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/d8917667-c829-4ce5-0212-c789a01f13fa.png)

コマンドをPowershellで実行をします（コマンド実行場所は`C:\Users\{ユーザーの名前}\Desktop\Project\shareProject`で実行）

```
> firebase deploy
```

![スクリーンショット 2020-08-16 20.10.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282719/89ad0322-70a5-c669-64a5-00887b43efef.png)

実際に公開した作品がこちらです
https://sharemyprojecttakahashi-1.web.app/myApp/

## まとめ
夏休みに`html`, `javascript`, `css` の作品を作ったものをFirebaseにおいて、作品を共有するのに試していただけると幸いです。