Help us understand the problem. What is going on with this article?

(初心者向け)Firebase HostingへReactプロジェクトを公開する手順

More than 1 year has passed since last update.

概要

  • Reactアプリ(DBなし)をFirebase Hostingへdeployするための手順です
  • 新規性0だけど、その分、スクリーンショット豊富に説明したので、初心者のお役に立つはず!

Firebase Hostingを使う動機

Reactアプリ(DBなし)を格安で公開できる環境を探した結果、Firebase Hostingに行き着きました。

Reactをとりあえず書いて公開したい場合は最高の環境。HTTPSだし。(gooogleだから当然か。グーグル、HTTPページへの警告表示を強化へ--10月リリース予定の「Chrome 62」から)

趣味の範囲なら、料金ほぼ無料です。https://firebase.google.com/pricing/?hl=ja

環境

  • googleのアカウントを持っていること
  • macOS

参考

下記のページを見てできる方は、この記事は糧にならないかも。

手順

アプリcase-control-testというアプリを作成することを想定します。

手順の概要は以下の通りです。

  1. 事前準備
  2. Firebaseで新規プロジェクトを作る
  3. create-react-appでアプリのひな形を作る
  4. ローカルのPCとFirebaseを連携させる
  5. アプリにFirebase Hostingへの接続設定を追加する
  6. Firebaseへdeployする
  7. 確認する

事前準備

Firebase CLIcreate-react-appをインストールします。

npmでコマンド打つだけです。

Firebase CLIインストール

> npm install -g firebase-tools
...省略
    └── stack-trace@0.0.10 

create-react-appインストール

> npm install -g create-react-app
...省略
    └── builtins@1.0.3 

Firebaseでプロジェクトを作る

  • 下記URLにアクセスする

https://firebase.google.com/products/hosting/?hl=ja

  • 無料で開始を押す

https://gyazo.com/f22129f55b62c09171bd46c75806043b

  • プロジェクトを追加を押す

https://gyazo.com/39b0510df27448c6d065ba5510240b2c

  • プロジェクト名と国/地域を入力してプロジェクトを作成

今回のアプリ名(プロジェクト名)はcase-control-testです(実際は各自のアプリの名称にしてください)。

任意の名前でOKですが、個人的にはプロジェクトIDと一致した方が楽なので、全体で固有の文字列になるように試行錯誤した方がいいと思います。(なお、プロジェクトIDとプロジェクト名が一致していれば全体で固有の文字列です)

国/地域は日本。(これは、regionではないので、深く考えず日本でOK)

https://gyazo.com/faa85614eb5efe5f71a9549f7dd982b9

  • 次へを押す

https://gyazo.com/d327979c7bf344b4049a5ecefeb7f235

create-react-appでアプリのひな形を作る

任意の場所でcreate-react-appを実行します。
今回は、react-appという名称のディレクトリを作業ディレクトリとします。

> cd
> mkdir react-app
> cd react-app
  • create-react-appを実行

firebaseのプロジェクト名はcase-control-testでアプリのひな形を作成します。

> create-react-app case-control-test
...省略
Happy hacking!

case-control-testとういアプリ名。実行するとcase-control-testというディレクトリが作られて、その中にreactの色々が詰め込まれます。

ローカルのPCとFirebaseを連携させる

  • 先に作った、アプリディレクトリcase-control-testに移動する。
> cd ~/react-app/case-control-test
  • firebase loginを実行する
firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information?
 Yes
Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=XXXXXXX.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=000000&redirect_uri=http%3A%2F%2Flocalhost%3A0000

Waiting for authentication...

ブラウザが開いて、自分のgoogleアカウント選びます。

https://gyazo.com/16827aa68bbc2a040208cb9934e8bba7

権限がリクエストされるので許可を押す。

https://gyazo.com/2067b83611d98b46d06934aa054a1378

無事つながりました。

https://gyazo.com/1000d4d35588141a3d6b473678bab91b

自動的にターミナルに戻って完了します。下記のメッセージが出ているはずです。

✔  Success! Logged in as jun5araki@gmail.com

アプリにFirebase Hostingへの接続設定を追加する

  • firebase initを実行する
> firebase init
...省略
  • 矢印キーをHostingに合わせてスペースキーを押して選択状態にして、Enterを押します
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

以下のメッセージが出ます。

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.
...省略
  • 先に作成したプロジェクトcase-control-test (case-control-test)が選択肢にあるので選択してEnterを押す
? Select a default Firebase project for this directory: 
  [don't setup a default project] 
❯ case-control-test (case-control-test) 
  [create a new project] 

case-control-testディレクトリ内に.firebasercfirebase.jsonが追加されます。

それぞれの最初の中身はこんな感じ。

> cat .firebaserc 
{
  "projects": {
    "default": "case-control-test"
  }
}

> cat firebase.json 
{}
  • deployのための設定をfirebase.json に追加する
firebase.json
{
  "hosting": {
    "public": "build"
  }
}

  • アプリのタイトルを追加

特にやる必要はないのですが、ローカルのソースが反映している事を区別するためチョットだけ編集します。

Welcome to ReactCase control testでぷろいできた! に置換します。

src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Case control testでぷろいできた</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Firebaseへdeployする

  • buildする
> npm run build
> case-control-test@0.1.0 build /Users/junara/react-app/case-control-test
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  35.72 KB  build/static/js/main.ee7b2412.js
  299 B     build/static/css/main.c17080f1.css
...省略
  • deployする
> firebase deploy

=== Deploying to 'case-control-test'...

i  deploying hosting
i  hosting: preparing build directory for upload...
✔  hosting: 10 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/case-control-test/overview
Hosting URL: https://case-control-test.firebaseapp.com

確認する

  • https://case-control-test.firebaseapp.com にアクセス(現在の表示とはことなります。)する

https://gyazo.com/1903719721ac355b93f69c87451f0356

Case control testでぷろいできた!が表示されて入れば成功です!

(公開を停止する)

deployを停止する場合はfirebase hosting:disable 参考 公式ドキュメント

> firebase hosting:disable
? Are you sure you want to disable Firebase Hosting?
  This will immediately make your site inaccessible! Yes
✔  Hosting has been disabled for case-control-test. Deploy a new version to re-enable.

以上

junara
10年間医療の研究していたが、Webサービス作りたくて、エンジニアへ。 Rails, Javascritptのエンジニアとして働きながら、生命科学学会検索サービスを作りました。 https://www.dokode.work
bldt
"Your growth, Improve the world" をビジョンに掲げ、自社事業やシステム開発サービスを提供しています
https://bldt.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away