More than 3 years have passed since last update.

第6回 2020年版 React+Firebaseで画像のアップロード（その１）

Last updated at 2020-04-22Posted at 2020-03-18

1. 概要

ReactでFirebaseを利用して、画像ファイルをアップロードする方法について説明します。
FirebaseのCloud Storageに画像をアップロード可能とし、その後、Cloud Functionsでリサイズするアプリを開発するまでの手順を３回に分けて説明します。

2. 前提条件

作業日時

2020/3/18

環境

MacBook Pro (15-inch, 2018)
macOS Catalina 10.15.2（19C57）

ソフトウェアのバージョン

分類	ソフトウェア	バージョン
フレームワーク	React	16.13.0
フレームワーク	React-dom	16.13.0
静的型付け	TypeScript	3.7.5
ライブラリ	create-react-app	v3.4.0
ライブラリ	Material UI	v4.9.4
	@material-ui/core	4.9.4
	@material-ui/icons	4.9.1
Firebase CLI	firebase-tools	7.14.0

3. Firebaseのプロジェクト作成

3.1. プロジェクトの作成

まずは、 FirebaseのWebサイトでプロジェクトを作ります。

Firebaseにサインアップします。Googleアカウントがあればすぐ登録できます。
プロジェクトを新規作成します。

3.2. リージョンを選択する。

なるべく多くの機能がある方が良いので、東京リージョン(asia-northeast1)を選択する。
*リージョンは後から変更することができないので、注意。
なお、Realtime Databaseのイベントトリガーを利用する場合の推奨リージョンはus-central1となる。

参考:Cloud Functions のロケーション

3.3. Webアプリを追加する

「プロジェクトの概要」　＞　「全般」　＞　「アプリを追加する」でWebアプリを追加します。

3.4 Database

Databaseがネイティブモードになっていない場合、移行の初期化時にエラーとなるので、ネイティブモードに変更する。
FirebaseのコンソールからGoogle cloud platformに遷移し、ネイティブモードに変更する。

4. Firebase CLIのセットアップ

次に、ローカル環境にFirebase CLIをインストールします。

$ yarn global add firebase-tools

Firebase CLIでFirebaseへログインすることで、認証されます。
ブラウザが起動して、ログイン画面が表示されるのでログインします。

firebase login

5. Reactアプリの作成

Firebaseのサンプル用のReactのアプリを作成します。

$ npx create-react-app firebase-storage-sample --template typescript
$ cd firebase-sample/

6. Firebaseの初期設定

6.1. Firebaseの初期設定を行う

Firebaseの初期化を行います。

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/hoge/Documents/00_mygit/hoshimado/firebase-sample

色々質問をされるので、次のように選択します。

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i>
 to invert selection)
❯◉ 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
 ◉ Emulators: Set up local emulators for Firebase features

→aで全て選択します。

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.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: 
❯ sample-9f36d (sample)

→Use an existing projectを選択肢、その後、先程作成したプロジェクトを選択する。

Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? (database.rules.json)

→database.rules.jsonを利用するので、そのままエンター。

Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? (firestore.rules)

→firestore.rulesを利用するので、そのままエンター。

? What file should be used for Firestore indexes? (firestore.indexes.json)

→firestore.indexes.jsonを利用するので、そのままエンター。
なお、Databaseがネイティブモードになっていない場合、エラーとなる。
＊冒頭に説明した通り、Firebaseの管理画面でネイティブモードに変更する。

Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? 
  JavaScript 
❯ TypeScript

→Typescriptを選択する。

? Do you want to use TSLint to catch probable bugs and enforce style? (Y/n)

→Yを選択する。

? Do you want to install dependencies with npm now? (Y/n)

→Nを選択する。
create react appでインストールしたライブラリが消えて、動作しなくなるため。

Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public)

→Enter(publicを利用する)を押下する。

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

→SPA用の設定にするため、yを入力し、Enterを押下する。

? File public/index.html already exists. Overwrite? (y/N)

→create-react-appが生成したものを利用するため、Nを入力し、Enterを押下する。

Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow
uploads and downloads. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Storage Rules? (storage.rules)

→Enter(storage.rulesを利用する)を押下する。

Emulators Setup

? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◯ Functions
 ◯ Firestore
 ◯ Database
 ◯ Hosting
 ◯ Pubsub

→aで全て選択する。

? Which port do you want to use for the functions emulator? 5001
? Which port do you want to use for the firestore emulator? 8080
? Which port do you want to use for the database emulator? 9000
? Which port do you want to use for the hosting emulator? 5000
? Which port do you want to use for the pubsub emulator? 8085
? Would you like to download the emulators now? No

→ポートは全てデフォルト値とする。
ただし、Would you like to download the emulators now?はNoにする。
なぜかfirebase.jsonと.firebasercが作られなかったため。

最後に

最後に以下のようなメッセージが出れば、成功です。

i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

6.2. インストール後の作業

インストール完了後のフォルダ構成は以下の通り。

$ ls -1
README.md
database.rules.json
firebase.json
firestore.indexes.json
firestore.rules
functions
node_modules
package.json
public
src
storage.rules
tsconfig.json
yarn.lock

firebaseホスティングの設定変更

firebaseの設定を修正する。
ローカルのbuildディレクトリをリモートのpublicにアップロードするように修正する。

firebase.json

{
  "hosting": {
    "public": "build", /* publicからbuildに修正する。*/
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

firestore, database, storageの設定変更

firestore.rules、database.rules.json、storage.rulesを修正する。

firestore.rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }
  }
}

database.rules.json

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

storage.rules

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth!=null;
    }
  }
}

7. 追加のライブラリのインストール

firebase initでインストールしなかった、以下のライブラリをインストールする。

$ yarn add firebase-admin firebase-functions
$ yarn add -D @types/firebase

8. デプロイする

ここまでで一旦、Firebase Hostingにデプロイするので、アプリをビルドします。

$ yarn run build

その後、以下のコマンドでFirebase Hostingにデプロイします。

$ firebase deploy

9. 動作確認

デプロイ後に表示されるHosting URLをブラウザで開くとReactの画面が確認できます。

=== Deploying to '*****'...
略
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/*****/overview
Hosting URL: https://*****.firebaseapp.com

10. 最後に

次回は画像をアップロードするプログラムについて説明します。

11. 関連記事

Reactに関する記事です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up