Firebaseことはじめ

Firebaseはリアルタイム、ユーザ認証、静的なサイトのホスティングに対応したプラットフォーム。Googleがバックに付いてます。

今回は、React + React Routerで作る静的ページをホストできるようにしてみました。

tools

% npm i -g firebase-tools

npmでCLIをインストールできます。

% firebase login

を実行するとブラウザが開き、Googleアカウントでのログインを求められます。

ログイン成功後、適当なディレクトリを作り

% firebase init

でプロジェクトの初期化を行います。とりあえず、「Hosting」を選んで、Firebaseでサイトをホスティングしてみます。[create a new project]を選択し、とりあえずデフォルトの選択肢を選んでいきます。今回はSPAをホストする設定を選択しました。

.
.
.
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

以下のような、ファイルが生成されます。

% tree .
.
├── database.rules.json
├── firebase.json
└── public
    └── index.html

それっぽいファイルが作られているので、そのままデプロイしてみます。Firebaseの管理画面へアクセスし、サイドメニュー > Hostingで表示されるドメインのIDを確認しておきます。このIDを使って以下のようにデプロイします。

% firebase deploy --project {PROJECT_ID}

管理画面上のプロジェクトのURLにアクセスすると以下のような画面になります。

public/index.htmlと同じ内容なので、デプロイできているみたいです:-) 以下のようにすると、デフォルトで使用するプロジェクトを決められるようです。

% firebase use --add {PROJECT_ID}

また、firebase openを実行すると管理画面や、デプロイしたサイトを開いてくれます。さらにfirebase serveで開発用サーバが起動します。開発中はこれを利用するのが良さそうです。

SPA

Reactで簡単なSPAを作ってホスティングしてみます。create-react-appを使って、新しいプロジェクトを作成します。

% create-react-app firebase-react
% cd firebase-react
% firebase init

途中で、public/index.htmlを上書きするかどうか聞かれるので、Ncreate-react-appで生成したindex.htmlを活かしておきます。

完了したら、一旦このままデプロイしてみます。

% npm run build

create-react-appで作成したブロジェクトはbuild以下にビルドされるので、このディレクトリをホストするように設定します。

// firebase.json

...
"hosting": {
    "public": "build",
...

ホストするディレクトリをbuildに設定、デプロイしてアクセスします。

% firebase deploy
% firebase open hosting:site

これで、開発中はnpm startでローカルサーバーを使い、デプロイはnpm run build + firebase deployで行ける感じになりました。

次はReact Routerを使って、フロントでルーティングをできるようにしてみます。

% npm i -S react-router
// index.js
import React from 'react';  
import { render } from 'react-dom';  
import { Router, Route, IndexRoute, browserHistory } from 'react-router';  
import App from './App';  
import Home from './components/Home';  
import About from './components/About';  
import Contact from './components/Contact';  
import './index.css';

const router = (  
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="about" component={About} />
      <Route path="contact" component={Contact} />
    </Route>
  </Router>
);

render(  
  router,
  document.getElementById('root')
);
// App.js
import React, { Component } from 'react';  
import { Link } from 'react-router';  
import logo from './logo.svg';  
import './App.css';

class App extends Component {  
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="about">About</Link></li>
            <li><Link to="contact">Contact</Link></li>
          </ul>
        </nav>
        {this.props.children}
      </div>
    );
  }
}

export default App;  
// components/About.js
import React from 'react';

export default function About(props) {  
  return (
    <h1>About</h1>
  );
}
// components/Contact.js
import React from 'react';

export default function Contact(props) {  
  return (
    <h1>Contact</h1>
  );
}
// components/Home.js
import React from 'react';

export default function Home(props) {  
  return (
    <h1>Home</h1>
  );
}

これで、ビルド + デプロイすればルーティングがうまく行われてます。

% npm run build && firebase deploy