Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Firebase Hostingでアプリを本番環境にデプロイする

基礎からはじめるReact入門 第13回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/10/04 14:00

目次

リリース用の静的コンテンツを生成しよう

 サーバーに触る前に、リリース用のコンテンツを生成する方法について解説します。まずは、今回デプロイするプロジェクトを作成します。

[リスト1]プロジェクトを作成する
$ create-react-app deploy-sample
$ cd deploy-sample

 デプロイの手順を学ぶ上ではアプリケーションの内容は重要ではないので、ソースコードは特に変更せず、初期状態のままにしておきます。

 さて、前述の通り、create-react-appで作成したプロジェクトのnpm scriptsには、リリースのために build というコマンドが用意されています(リスト2)。

[リスト2]package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

 それでは、npm run build を実行してみましょう。リスト3のようになります。

[リスト3]ビルドを実行したところ
$ npm run build
> deploy-sample@0.1.0 build /path/to/deploy-sample
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.94 KB  build/static/js/main.a285be49.js
  299 B     build/static/css/main.c17080f1.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/2vY88Kr

 ビルドが終わると、プロジェクトフォルダの中に build という名前のフォルダが増えています(図4)。

図4:ビルドするとbuildフォルダが生成される
図4:ビルドするとbuildフォルダが生成される

 中を見ると、 public フォルダと src フォルダを組み合わせて再配置したような構成になっていることが分かります(図5)。

図5:buildフォルダの中身
図5:buildフォルダの中身

 ただ再配置しただけではなく、ファイル名にハッシュを埋め込むことによりキャッシュが適切に働くようにしてあるなど、最適化のためのノウハウが適用されています。このフォルダをWebサーバーに配置することで、Webアプリケーションとしてアクセスできるようになります。

Firebase Hostingにプロジェクトを作成する

 Firebase Hostingは、アプリケーション開発支援ツール「Firebase」が持つ機能の1つで、その名の通り、Webアプリケーションをホスティング(コンテンツを保管・配信すること)する機能を持っています。

 FirebaseはGoogleアカウントを持っていれば利用できます。まずは公式サイトを開き、ページの右上から「コンソールへ移動」をクリックします(図6)。

図6:コンソールへ移動
図6:コンソールへ移動

 この際に、Googleアカウントを求められるので、ログインしてください。Googleアカウントをお持ちでない場合は、「アカウントを作成」のボタンから手順に従ってアカウントを作成してください。

 コンソールにログインすると、「プロジェクトを追加」のボタンがあるので、これをクリックします(図7)。

図7:プロジェクトの作成を始める
図7:プロジェクトの作成を始める

 すると、Firebase上に作成するプロジェクトの名前や地域の設定を求められるので、図8の通り設定します。

図8:プロジェクトの設定内容
図8:プロジェクトの設定内容

 実際には次の表のように設定しました。

表:プロジェクトの設定内容
項目
プロジェクト名 my-first-react-app
プロジェクトID <自動生成に任せる>
アナリティクスの地域 日本
Cloud Firestoreのロケーション <変更しない>
Googleアナリティクスのデータ共有 チェックを付ける
データ保護条項に同意 チェックを付ける

 入力が済んだら、「プロジェクトを作成」のボタンをクリックします。少し待つと「新しいプロジェクトの準備ができました」と表示が出る(図9)ので、「次へ」をクリックします。

図9:プロジェクトの作成が完了した
図9:プロジェクトの作成が完了した

 すると、プロジェクト管理画面が開きます。左のメニューから「Hosting」の項目を見つけて、クリックします(図10)。

図10:プロジェクト管理画面でHostingを開く
図10:プロジェクト管理画面でHostingを開く

 次の画面で出てくる「使ってみる」のボタンをクリックすると、コマンドラインによる続きの手順が紹介されます。

図11:コマンドライン操作の手順が出てくる
図11:コマンドライン操作の手順が出てくる

 ひとまずこれで、ブラウザ側で行う作業は一段落です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact入門

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5