SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

基礎からはじめるReact入門

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

プロジェクトをFirebase Hosting向けにセットアップする

 次は手元のcreate-react-app製のプロジェクトをFirebase Hosting向けに設定します。引き続き、ブラウザで表示されている指示に従って操作していきます。

コマンドラインツールの導入とログイン

 まずは、Firebaseと連携するためのコマンドラインツールを導入します(リスト4)。

[リスト4]firebaseコマンドをインストールする
$ npm install -g firebase-tools

 これで firebase コマンドが使えるようになりますので、次に、Googleアカウントでログインします。次のコマンドを実行してください(リスト5)。

[リスト5]Firebaseにログインする
$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes

 動作に関する匿名での情報収集について、質問がありますが、これはYesでもNoでも好きな方を回答してください。

 すると、ブラウザが開いて、Firebaseのコマンドラインツールにアクセス許可を与えるかどうかを聞かれるので、許可します(図12)。

図12:アクセス許可を行う
図12:アクセス許可を行う

 コマンドラインに戻ると、リスト6の表示が出て、ログインが成功しています。

[リスト6]Firebaseにログインする
Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth...

Waiting for authentication...

✔  Success! Logged in as xxxxx@gmail.com

 これで firebase コマンドの初期設定は完了です。この操作は一度行えば firebase logout を行わない限り、ログインしたままになります。

プロジェクトをFirebase向けにセットアップする

 ログインが終わったら、次はいよいよcreate-react-app製のプロジェクトをFirebase Hosting向けに設定していきます。リスト7のコマンドを、プロジェクトフォルダ内で実行します。

[リスト7]セットアップを開始する
$ firebase init

 すると、大文字焼きのような派手な絵文字とともに、セットアップが始まります。Firebaseのどの機能と接続するのかを聞かれるので、矢印をカーソルキーで「Hosting」の行まで動かして、スペースキーで選択してください(図13)。そこからエンターキーを押すと確定します。

図13:Hosting向けに設定する
図13:Hosting向けに設定する

 次に、Firebaseのどのプロジェクトと連携するのかを聞かれます。矢印をカーソルキーで先ほど作成した my-first-react-app の行まで動かして、エンターキーで確定します(図14)。

図14:接続先のFirebaseプロジェクトを選択する
図14:接続先のFirebaseプロジェクトを選択する

 その次はFirebase Hostingのための設定です(図15)。

図15:Hosting特有の設定
図15:Hosting特有の設定

 それぞれ重要な設定なので、個別に解説します。

 1つめの「What do you want to~」は、どのフォルダをデプロイ対象にするかを聞かれています。 npm run build で生成された build フォルダがまさしくこれにあたるので、「build」を入力してエンターキーを押します。

 2つめの「Configure as a~」は、シングルページアプリケーションでReact Routerのようなツールを使っているアプリケーションのための設定です。もし、React Routerで /hoge/fuga といったURLを設定してあったとしても、これをブラウザのアドレスバーに直接打ち込んだ場合、通常のWebサーバーは /hoge/fuga.html/hoge/fuga/index.html を返却しようとします。

 しかし、シングルページアプリケーションには /index.html しか用意されていないので、404 Not Foundが返ってきてしまいます。ですが、「Configure as a~」の設定にYes(y)で回答すると、すべてのアクセスを /index.html に転送するようになります。これは開発サーバーと同じ挙動であり、React Routerのようなライブラリが十全に力を発揮できるようになるので、ぜひ設定しておくとよいでしょう。

 3つめの「File build/index.html~」は、既存の index.html を上書きしてもよいかといった質問ですが、それは困るのでNo(N)で回答しておきます。

 さて、ここまでの設定が終わると、プロジェクト内に .firebasercfirebase.json の2つのファイルが生成されます(図16)。

図16:Firebaseのための設定ファイルが生成された
図16:Firebaseのための設定ファイルが生成された

 コマンドラインで回答してきた内容が記述されているので、興味があればのぞいてみるとよいでしょう。

Firebase Hostingにデプロイする

 ここまで来ればあと少しです。コマンドラインからの最後の手順として、リスト8のコマンドを実行しましょう。

[リスト8]buildフォルダをデプロイする
$ firebase deploy

 少し待つと、デプロイが完了した旨とともに、「Hosting URL」として、割り当てられたURLが表示されます(図17)。

図17:デプロイが完了した
図17:デプロイが完了した

 このURLを開くと、見慣れたcreate-react-appのWelcome画面が表示されます(図18)。

図18:Webアプリケーションがデプロイされている
図18:Webアプリケーションがデプロイされている

 おめでとうございます! これで全世界にあなたのWebアプリケーションが公開されました! 自動でHTTPS証明書が割り当てられるのもうれしいところですね。

デプロイ後の管理について

 さて、デプロイが完了したので、ブラウザで開いていたFirebaseのプロジェクト設定に戻ってみましょう。手順をすべて終えたので、「終了」ボタンをクリックします(図19)。

図19:デプロイの手順を終了する
図19:デプロイの手順を終了する

 すると、画面が更新されて、ドメインに関する設定と、デプロイの履歴が出てくるようになります(図20)。

図20:デプロイの履歴が表示される
図20:デプロイの履歴が表示される

 これ以降、アプリケーションに手を加えて、再度デプロイをしたい場合には、npm run buildfirebase deploy のコマンドを実行するだけで更新できます。その際には、図20の画面にデプロイ履歴が蓄積されていくことになります。

 誰がいつ更新したのかも見られるので、業務で運用する場合にも安心ですね。

カスタマイズするポイント

 さて、あとはこれまでの連載で得た知識を生かしながら、Reactアプリケーションとして充実させていけばよさそうですが、2点だけ、「これをやっておくと見栄えがよくなる」ポイントについて紹介します。

favicon.icoとタイトルを更新する

 まずは、faviconとタイトルです。現状ではfaviconがReactのマークになっていたり、タイトルが「React App」だったりと、デフォルトらしいものになっています(図21)。

図21:faviconとタイトルがデフォルトのまま
図21:faviconとタイトルがデフォルトのまま

 faviconは /public/favicon.ico を置き換えることで更新できます。検索するとfaviconのジェネレーターが見つかるので、調べてみるとよいでしょう。

 また、タイトルは /public/index.html<title> タグだけではなく、/public/manifest.jsonnameshort_name にも定義しておくとよいでしょう。 short_name はスマートフォンなどでホーム画面にショートカットを作った際に、アプリ名として表示されます。

独自ドメインを設定する

 もうひとつは、独自ドメインの設定です。自分だけのドメインでWebアプリケーションを提供できたらかっこいいですよね。

 ドメインそのものはどこかのサービスで購入してくることになりますが、Webアプリケーションに適用する場合には、Hostingの設定画面にある「ドメインを接続」のボタンから設定することができます(図22)。

図22:独自ドメインを設定できる
図22:独自ドメインを設定できる

 接続したいドメインの入力後、図23のように提示されるレコードを、ドメイン管理サービスに登録することで、Webアプリケーションを独自ドメインに対応させることができます。

図23:DNSの設定指示
図23:DNSの設定指示

 素晴らしいことに、この方法で接続したドメインには、自動的にHTTPSの証明書が割り当てられます。今後は http:// なWebサイトは安全ではないものとして扱われていく時代になるので、こういった機能はうれしいですね。

まとめ

 create-react-appで作ったアプリケーションを、Firebase Hostingにデプロイする方法について解説しました。初期設定は少し手がかかりますが、initが終わってしまえば、毎回のデプロイはとても少ない手数で行うことができます。面白いアプリケーションを世界に公開していきましょう。

 次回は、アプリの初期表示を高速化する、サーバーサイドレンダリングについて解説します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
基礎からはじめるReact入門連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11103 2018/10/04 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング