FirebaseにてWeb(https、無料)を公開してみるをやる

#はじめに
やったらものすごく簡単にできて…だった( ･ὢ･ )
`$`はうつコマンドの前につけてあるだけなので`$`部分は打たないでください。

#Step1
:unicorn: **[Firebase へようこそ](https://console.firebase.google.com/)へログイン**

#Step2
:unicorn: **自分のプロジェクトの作成**
今回地域は『日本』とし、Cloud Firestore のロケーションは『us-east1』としました。
<img width="384" alt="スクリーンショット 2019-02-02 15.40.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/54acfea2-3934-28bd-d84a-ff7fe3aba544.png">

こんな感じの画面が出てきたら完了です。
ちなみに今回作成したプロジェクトの名前は赤枠の『miniminiApp』です。
<img width="1118" alt="スクリーンショット 2019-02-02 15.45.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/75711d03-c9ca-65e6-a08f-e09d6bb4e32d.png">

#Step3
:unicorn: **FirebaseのサービスHostingを使う**
以下のようにHostingの使ってみるをタップ
Hostingについて知りたい方は以下リンク参照(画像のリンク部分)
[Firebase Hosting](https://firebase.google.com/docs/hosting/?authuser=0)
[高速かつ安全なウェブ ホスティング](https://firebase.google.com/products/hosting/?authuser=0)
<img width="1051" alt="スクリーンショット 2019-02-02 15.49.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/fac22f75-d3c1-1062-5071-d4e6a3f6f019.png">

使ってみるタップ後にこのような画面が出てくるのでその通りに進めていく
<img width="728" alt="スクリーンショット 2019-02-02 15.59.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/2b996517-597f-ef7c-6626-efdd0fcfc840.png">

macの方はターミナルを開きます。windowsはコマンドプロンプト？を開きます。
では早速うって行きます！

```
$　npm install -g firebase-tools
```

一回打ったことあるとエラー出るみたい。しかし次のコマンドログインができるので大丈夫そう？

次に好きなディレクトリ作成して移動します。
その場で作るのなら `$　mkdir sample` `$　cd sample`でも大丈夫です。

ディレクトリに移動したらまずはログイン

```
$　firebase login
```

ここでWeb画面開かれる的なことがあったのですがそのまま進めばOKです。(ログイン終わったなと思ったらターミナルまたはプロンプトに戻ってきてください。)

firebaseプロジェクト作成

```
$　firebase init
```

ここで少し質問されるので答えて行きましょう。
※ちなみにmacなら選択はスペースでできます。

---
```
You're about to initialize a Firebase project in this directory:

 /miniminiApp

? Which Firebase CLI features do you want to setup for this folder? Press Space 
to select features, then Enter to confirm your choices. (Press <space> to select
)
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
```
~~google翻訳バージョン+私的意訳~~
@u83unlimited さんに訳を訂正していただきました。

```
このディレクトリでFirebaseプロジェクトを初期化しようとしています:

  /miniminiApp

? このフォルダでなにやるの？行う設定にチェックしてください。
 ◯ Firebase Realtime Database(旧形式のDB機能)用にルールを展開します
 ◯ FireStore(新形式のDB機能)用にルールを展開し、インデックスを作成します
 ◯ Cloud Functions（プログラム実行機能）用に設定、展開します
❯◉ Firebase Hosting sites（ホスティング機能）用に設定、展開します
 ◯ Cloud Storage（ファイル保管機能）用にセキュリティルールを展開します
```

---

```
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: (Use arrow keys)
　[don't setup a default project] 
  fir-demo-project (Firebase Demo Project) 
  imayannderuno (imayannderuno) 
  ojisannyouseiwo (ojisannyouseiwo) 
❯ [create a new project] 

```
google翻訳バージョン+私的意訳

```
あとで色々できるけどとりあえずデフォルトの設定してください。

？ 作るの選んで
  セットアップなんてしない
  デモ
  今病んでるの
  おじさん妖精を
❯ 新しいプロジェクト

```
---

```
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? (public) miniminiAppdirectory

```
google翻訳バージョン+私的意訳

```
公開されるディレクトリはこの中身になるでしょう

? ディレクトリ名何する? miniminiAppdirectory


```
続けてどんどん聞かれます

---

```
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N
```
そうすると今ディレクトリの中はこのような感じに。
miniminiAppdirectoryとかにしたけどhtmlとかにする方が無難だったかなとかも思ったり思わなかったり…
<img width="354" alt="スクリーンショット 2019-02-02 16.41.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/0de621c6-1bab-a7d1-6ef7-86f677741e7d.png">
---

#Step4
:unicorn: **早速公開**

```
$　firebase deploy
```

エラー発生:bangbang:プロジェクトがアクティブではない！！--project <projectId>でやるか作るかしろと言うことなので、要はプロジェクト指定していないのでそれが、わからないとのこと。

```
No project active. Run with --project <projectId> or define an alias by
running firebase use --add
```

先ほど作ったプロジェクトのidを使い行う。以下画像の左上がそのidなのでそれをくっつけてあげるのみ！

<img width="380" alt="スクリーンショット 2019-02-02 16.57.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/f9c98972-7d2e-020f-858d-4f1ec932660d.png">

```
$　firebase deploy --project miniminiapp-4a450
```

できた！！すごいこれだけでhttpsのサイトで公開できた( ･ὢ･ )
<img width="1108" alt="スクリーンショット 2019-02-02 16.58.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/9e31ee19-209f-a599-66c3-778532d73d0a.png">

#setp5
:unicorn: **中身を変更してみる**
先ほどのディレクトリの中身を変えて上のコマンドで再度デプロイ！！できた！
ちなみに中に入れているのはOnsen UIでのデモアプリです。
<img width="978" alt="スクリーンショット 2019-02-02 17.03.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/aa3bd85c-91df-77a5-fa80-e5d8ec9accbc.png">

<img width="432" alt="スクリーンショット 2019-02-02 17.04.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/05017a4f-1889-cc32-4f5b-aab8a08865e6.png">

ちなみにこのOnsen UIとはなんぞやという方に朗報です！！
Onsen UIを使ってminiminiAppを作るまでの記事を以下であげたのでみていただければ嬉しいです！
[Onsen UI、Vue.jsでアプリを作る初めの一歩(開発→本番)](https://qiita.com/sachiko-kame/items/dec61189b3de2e353106)

#setp6
:unicorn: **プロジェクトの削除**
以下画像歯車のところ押して一番下にいくと削除ができるのでそれで削除します。
<img width="471" alt="スクリーンショット 2019-02-02 17.10.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/e0eafaec-a1d5-b71e-4dc3-f7537ab72c1a.png">
<img width="956" alt="スクリーンショット 2019-02-02 17.10.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/eb30a197-0d6c-eecf-899a-04afc3da1dc2.png">

#最後に
一旦公開してみたいならかなりこれとてもいいきがしました。
逆に、Basic認証など特定の認証つけるとかならまだ調査が必要だと思いました！！(✿´ ꒳ ` )


#参考
ありがとうございます！:bow_tone2:
https://qiita.com/potato4d/items/95eaf2e41404711e621e