React.jsとFirebaseでツイートアプリを作ってみた 【第3弾】

code

こんにちは。今年から東京のベンチャー企業でエンジニアとして働いてます。
ひろき(@hiro_az4511)です。

本記事は下記の方に、向けて書きました!

こんな方向け記事です
■React.jsを使って何かアプリを作ってみたい。
■Firebaseのデータベースをいじりたい。
■アプリをFirebaseでデプロイさせたい。

本記事は第3弾!

前回までで作ったアプリをFirebase Hostingで、デプロイしてみます。

前回までの流れが知りたい方は、下のリンクからご覧ください。

Firebase Hostingとは??

Firebase Hostingは、SSL(Secure Socket Layer)を利用して、静的/動的コンテンツを安全・高速にグローバル コンテンツ配信ネットワーク(CDN)にデプロイできる、Webコンテンツのホスティングサービスです。

今回はこのFirebase Hostingを使って、前回作ったツイートアプリを公開してみます。

Firebase CLI (Command Line Interface) を使用すると、ほんの数秒でアプリを稼働させることができるので、こちらを使ってやってみました。

この、「CLI」という言葉はけっこう色んな所で出てきますが、PCのキーボードからコマンド(命令)を打ち込んでコンピュータを操作することです。

Firebase  CLIを使ったデプロイ手順

Firebase CLI をインストール

Firebase CLIを動かすにはNode.jsが必要です。

第一弾の記事の手順を踏んでいれば、もう既にNode.jsは入っていて、npmコマンドが使える状態になっているはずです。下記を実行してみてください。

npm install g firebasetools

「-g」はグローバルという意味で、どのディレクトリにいても「firebase ****」というコマンドがターミナルで利用できるようになっているはずです。

Firebaseにログイン

下記でgoogleアカウントでFirebaseにログインします。

$firebase login

もう既にログインしてる人は、「Already login…」 みたいなメッセージが出ると思いますが、はじめての場合、「うーほー!」と出てくると思います。

始めて「うーほー」を見たときは笑いましたw

Firebaseのリージョン設定が英語圏だと下みたいな画像が出てきます。確かに、訳すと「うーほー」になるんかな、、、w

新しいFirebase プロジェクトをセットアップ

Firebase でのデプロイはかなりシンプルです。

プロジェクトのディレクトリにいることを確認してから、initコマンドを打ちましょう!

pwd

/Users/hirokianzai/projects/react-firebase-chat-app

$firebase init

これだけです。こんな画面が出てくればOKです。

ここではFirestoreとHostingを選択して次に進みます。

この後、各種設定について色々聞かれるのですが、「Firebase init」コマンドでいつでも設定を変えることができるので、ひとまずエンターを押していってデフォルトの設定で進めます。

firebase.jsonの確認

個々まで進めると、firebase.jsonという設定ファイルがプロジェクトのディレクトリに作られているので、そちらを確認してください。

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

“hosting”の項目で 「 “public”: “build”」に設定をするのを忘れないようにしてください。

一度アプリが立ち上がるか確認しましょう。

$ yarn start

ビルドする

$ yarn build

もしくは

$ yarn run build

今まで書いたプログラムをリンクやコンパイルして、実際に動作するプログラムにする作業をビルドといいます。

こちらを実行することで、いよいよデプロイ可能になります。

いよいよデプロイ

$firebase deploy

上のコマンドでいよいよデプロイします。下記のようにDeploy Complete!と出てくれば成功です。

実際に一番下のHosting URLにアクセスして、しっかりアプリが表示されているか確認してみてください。

画面が表示されていない場合、ビルドしていないか、firebase.jsonの設定が間違えてたりする可能性もあるので、チェックしてみてください。

まとめ

お疲れ様でした!

React.jsで作ったアプリをFirebaseでデプロイできましたでしょうか!

今回は最初なのでシンプルにアプリ作成からデプロイまでをやったつもりですが、これ以外にもFirebaseは認証やプッシュ通知などいろんなことができます。

また色々試してみて、記事にしたいと思いますので、そちらも良ければご覧ください!

ここまでお読みいただき、ありがとうございました。

それでは!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です