Zenn
✨

Firebase + Reactでサンプルアプリをデプロイしてみた

2021/11/29に公開
Firebase
React
tech

概要

こちらの技術書の内容を参考にデプロイまでのフローを備忘録として残します

https://booth.pm/ja/items/1572683

セットアップ

bash
# envファイルの詰め合わせをインストール
brew install anyenv

# パスを通す
echo 'eval "$(anyenv init -)"' >> ~/.zshrc

# 初期化
anyenv init

# シェルを再起動
exec $SHELL -l

# 初期設定
anyenv install --init

# node,envをインストール
anyenv install nodenv

# シェルを再起動
exec $SHELL -l

# バージョンを確認
nodenv install -l
nodenv install 12.7.0 | nodenv install 10.16.0 | nodenv global 12.7.0 

# プロジェクトを作成
npx create-react-app ts-tutorial --template typescript

TypeScriptの設定ファイルを作成

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    # コンパイルエラーを回避
    "allowSyntheticDefaultImports": true,
    # さまざまな型チェック動作を可能にする
    "strict": true,
    # import時にファイルパスの文字列で大文字小文字を区別
    "forceConsistentCasingInFileNames": true,
    # fallthroughなcaseのうち、1行以上処理が存在しているにも関わらず脱出処理（breakやreturn）が無いものにエラーを吐く
    "noFallthroughCasesInSwitch": true,
    # 出力するjsのモジュールの仕組みとして何を使用するかを指定
    "module": "esnext",
    # tscのモジュール解決の方法を指定
    "moduleResolution": "node",
    # JSONファイルから型の抽出・生成
    "resolveJsonModule": true,
    # 全てのファイルを単一のモジュールとしてコンパイル
    "isolatedModules": true,
    # コンパイル結果を出力しない
    "noEmit": true,
    # tsxファイルをjsxやjsにコンパイルする際の出力の形式を指定
    "jsx": "react-jsx",
    # 以前コンパイルを実行したコードと現在のコードとの差分を検出して、必要なファイルだけをコンパイル
    "incremental": true
  },
  # コンパイルする対象ファイルを記述す
  "include": [
    "src"
  ],
  # コンパイルする対象から外すファイル
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "functions"
  ]
}

解説

コンパイルする際のオプション

compilerOptions

どのバージョンでjsを出力するか

 "target": "es5"

コンパイルする際に使用する組み込みライブラリ

"lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],

.jsと.jsxもコンパイル対象に含まれる

"allowJs": true

コンパイル時間を削減（型チェックの精度を下げる）

"skipLibCheck": true

コンパイル時にヘルパーメソッドを生成

"esModuleInterop": true

コンパイル時にヘルパーメソッドを生成

"esModuleInterop": true

コンパイルエラーを回避

"allowSyntheticDefaultImports": true

さまざまな型チェック動作を可能にする

"strict": true

import時にファイルパスの文字列で大文字小文字を区別

"forceConsistentCasingInFileNames": true

fallthroughなcaseのうち、1行以上処理が存在しているにも関わらず脱出処理（breakやreturn）が無いものにエラーを吐く

"noFallthroughCasesInSwitch": true

出力するjsのモジュールの仕組みとして何を使用するかを指定

"module": "esnext"

tscのモジュール解決の方法を指定

"moduleResolution": "node"

JSONファイルから型の抽出・生成

"resolveJsonModule": true

全てのファイルを単一のモジュールとしてコンパイル

"isolatedModules": true

コンパイル結果を出力しない

"noEmit": true

tsxファイルをjsxやjsにコンパイルする際の出力の形式を指定

"jsx": "react-jsx"

以前コンパイルを実行したコードと現在のコードとの差分を検出して、必要なファイルだけをコンパイル

"incremental": true

コンパイルする対象ファイルを記述する

  "include": [
    "src"
  ],

コンパイルする対象から外すファイル

  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "functions"
  ]

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

https://blog.katsubemakito.net/firebase/firebase-make-newproject

Firebaseの初期化とデプロイ

bash
# firebase-toolsをインストール
npm install -g firebase-tools

# Firebase CLIへログイン
firebase login

? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in: # Googleログインを行う

Waiting for authentication...

✔  Success! Logged in as naosprintrunner6385@gmail.com

# firebaseの初期化
firebase init

# デプロイを行うのでHostingをスペースで選択しEnter
? Are you ready to proceed? Yes
? 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

=== Project Setup

# 既存のプロジェクトを使用します
? Please select an option: Use an existing project

# 作成したFirebaseのプロジェクト名を選択します
? Select a default Firebase project for this directory: mangarel-demo-50e37 (mangarel-demo)
i  Using project mangarel-demo-50e37 (mangarel-demo)

# デフォルトのまま
? What file should be used for Firestore Rules? firestore.rules
? What file should be used for Firestore indexes? firestore.indexes.json

# Cloud Functionsを書くのに使いたい言語を設定
? What language would you like to use to write Cloud Functions? TypeScript

# 有効にするとエラーなどを事前に教えてくれます。今回はNoにします
? Do you want to use ESLint to catch probable bugs and enforce style? No

# 依存ライブラリをインストールするかどうか。今回はnpmでやりたいのでYes
Do you want to install dependencies with npm now? Yes

# 公開ディレクトリを変更します
? What do you want to use as your public directory? build

# 今回はSPAにしておきます
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

# 既に存在しているindex.htmlを上書きするか。Noにします
Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

# GitHubで自動ビルドとデプロイを設定するか。今回はNoにしています
Set up automatic builds and deploys with GitHub? No

# 完了
✔  Firebase initialization complete!
=== Firestore Setup

# ビルド
npm run build

# デプロイ
firebase deploy --only hosting 

# 以下にアクセスする
Hosting URL: https://xxx.web.app

デプロイ完了

最後に

読んでいただきありがとうございます。
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。

GitHubで編集を提案

Discussion