無料でカンタンにWebサイトを作る方法(2018)



この記事は[31億市場!?  チャットの作り方 [1日コース]](https://qiita.com/st5757/items/c2c5cf21c97fe242a4c0)の１コマ目の記事です。
（この記事をスキップする方は、[「2コマ目： ゼロから作る、簡単WebチャットUIの作り方」](https://qiita.com/st5757/items/ad4806c086b02a25d45d)）

## 今回やること

チャットの開発でFirebaseを使うので、その最低限の準備をします。
結果的に題名のようなことができます。

## これができると何が良い？
この回だけでもやっておくと、無料でWebサイトが公開できる様になります。
Firebaseの導入方法もわかります。

### ●Firebaseってなに？
軽く触れておくと、
**アプリケーション開発のためのプラットフォーム**です。
機能が豊富にあるのですが、今回利用する機能は1つだけ。
サンプル用のWebサイトを置くための`ホスティング機能`です。
連載を通しては、リアルタイムなチャットを実現するための`リアルタイムデータベース機能`も使っていきます。
![Firebase_img.png](https://qiita-image-store.s3.amazonaws.com/0/13827/54babb86-db91-8aaf-7d22-ae3e83c229a5.png)

FirebaseはGoogleが提供しているサービスで、個人が利用するレベルだとほぼ無料で使えます。

## Firebaseの準備
### ●ログイン
まずは[Firebase](https://firebase.google.com/?hl=ja)にアクセスしてください。
右上の`ログイン`ボタンをクリックします。
![Firebase_ログイン.png](https://qiita-image-store.s3.amazonaws.com/0/13827/d86e35fa-817b-32b9-d7d0-c4aa2d842d54.png)


（※Googleにログインしていない場合、Googleログインが求められます。）
Googleのアカウントを持っていない人は、アカウントを作成してからここに戻ってきてください。

### ●プロジェクトの追加
「Firebaseへようこそ」のページが表示されたと思います。
`プロジェクトの追加[+]`をクリックします。

その後、以下のような画面になるので`プロジェクト名`を入れ、（必要なら`プロジェクトID`を変更し）`国/地域`を選択してください。
<img width="300" alt="プロジェクトの作成.png" src="https://qiita-image-store.s3.amazonaws.com/0/13827/d6ca6a72-d3d7-72fc-2279-249bafcad484.png">


`プロジェクトの作成`をクリックします。
そうすると以下のような画面になります。
![作成完了_ホスティング.png](https://qiita-image-store.s3.amazonaws.com/0/13827/c093dc75-b2b8-382a-0441-5b4f1ec9cc3d.png)


### ●Firebaseにチャット画面を置くためのサイト準備
↑の画面で`hostingの「使ってみる」`をクリックし`使ってみる`をクリックします。



**・Firebaseコマンドラインのインストール**
Firebase Command Line Interface (CLI) はローカルで作っているアプリをFirebaseのホスティングにアップするのに使います。

Macならターミナル、Windowsならコマンドプロンプトから以下を実行します
`npm install -g firebase-tools`
<img width="300" alt="Fireabseコマンドラインツールのインストール.png" src="https://qiita-image-store.s3.amazonaws.com/0/13827/4c824786-9b27-1d5f-7190-8e401fb410a7.png">
で`次へ`をクリック

**・npmやNodeのインストールが済んでいない場合はそれもやる**
以下の記事などを参考にインストールしてください
[Macの参考記事](https://qiita.com/akakuro43/items/600e7e4695588ab2958d)
[Windowsの参考記事](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)

**・ホスティング設定**

<img width="300" alt="ホスティング設定.png" src="https://qiita-image-store.s3.amazonaws.com/0/13827/720fd2dd-f91f-640d-a846-4f11532c9082.png">

この通りにやるだけです
1. firebase login
ターミナルで`firebase login`を実行
すると"allow firebase to collect anonymous CLI usage and error reporting information?(Y/n)"と聞いてきます。どっちでもいいのでYかnをクリック
ブラウザでGoogleの認証画面になるのでアカウントを選択します。
![CLI認証.png](https://qiita-image-store.s3.amazonaws.com/0/13827/ad385c2b-4cf7-7672-d660-2548e34b5f89.png)


次の画面で`許可する`をクリックします。すると
"Woohoo! Firebase CLI Login Successful"というテンション高めの画面になったらOK

2. firebase init
これを実行すると今いるディレクトリでFirebaseのプロジェクトがinitializeされるので、Firebase用のディレクトリを作成します。
で、ターミナルでそこに移動。
`firebase init`を実行すると、ターミナルが燃えますw

![firebase_init.png](https://qiita-image-store.s3.amazonaws.com/0/13827/44784c59-ac7a-41b4-397f-ac08ca457b3b.png)

- 2-1. "Which firebase CLI features do you want to setup for this folder?"と聞かれるので、↑↓キーで動かして、**DatabaseとHostingを選択**します（選択はスペースキー）
- 2-2. "Select a default Firebase project for this directory"と聞かれるので、**eb上で作成したプロジェクトを選択**
- 2-3. What file should be used for Database Rules?(database.rules.json)と聞かれるんで、**そのままEnter**
- 2-4. What do you want to use as your public directory?(public)で、**これもEnter**
- 2-5. Configure as a single-page app(rewrite all urls to /inde.html)? (y/N)と聞かれるので、今回はどっちでもいいですが、**Nを選択**
以上でfirebase initは完了

3. firebase deploy
- 2の作業で、Firebase用に作成したディレクトリのpublicフォルダ内に`index.html`ファイルが出来ています。
このファイルが、FirebaseにホスティングされるWebページのホームページになります。
中身を削除して`こんにちは`とか入れて保存します。
- ターミナルに戻って、pulicフォルダが見えるディレクトリで`firebase deploy`を実行
これで、Web上にページが公開されました。
- ターミナルに記載されている`https://****.firebaseapp.com`にアクセスします。「こんにちは」というページが表示されれば成功です。
- WebのFirebaseのコンソールで`終了`をクリックするとデプロイの履歴が確認できます。

あとはindex.htmlをいじっていけば、自分の好きなようにWebサイトを構築できますね。
（WordPressは使えませんが）
以上で準備完了です。

次回は[「2コマ目： ゼロから作る、簡単WebチャットUIの作り方」](https://qiita.com/st5757/items/ad4806c086b02a25d45d)です

いよいよチャット作っていきま〜す！
（※連載一覧は[こちら](https://qiita.com/st5757/items/c2c5cf21c97fe242a4c0#機能としてはこんな感じです)）