monorepo構成で、ReactアプリとFirebase Functionsを同居させる

22190 ワード

テキストリンク

TL;DR

monorepo構成でReactアプリとFirebase Functionsを同じリポジトリで管理し、共通のロジックや型を使いまわせるようにします。

モノレポ（monorepo）とは？

モノレポとは、同一のリポジトリに複数のアプリやパッケージを管理する手法のことを指します。複数のアプリのPRやコード差分などを1つのリポジトリで管理するため煩雑になりやすいというデメリットはありつつも、共通のロジックを使いまわせたり、単一の依存ファイルで管理できるといった恩恵を得ることができます。

モノレポについては、CircleCIのブログにわかりやすくまとめられています。

今回は、yarnのworkspacesという機能を用いて、ReactアプリとFirebase Functionsをモノレポで管理していこうと思います。

セットアップ

monorepo-react-appという名前で、実装を進めていきます。また、yarnのバージョンは3.0.0を使用します。

$ mkdir monorepo-react-app
$ cd monorepo-react-app
monorepo-react-app:$ yarn init -y
monorepo-react-app:$ yarn set version 3.0.0

.yarnrc.yml

# nodeLinkerを追加する
nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-3.0.0.cjs

.gitignoreファイルを作成します。

monorepo-react-app:$ touch .gitignore

.gitignore

# dependencies
**/node_modules
**/.pnp
**/.pnp.js

# testing
**/coverage

# yarn
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# misc
**/.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

# log
**/npm-debug.log*
**/yarn-debug.log*
**/yarn-error.log*

packagesフォルダにそれぞれのアプリ（React・Firebase Functions）を管理していきます。

monorepo-react-app:$ mkdir packages

./package.json

{
  "name": "monorepo-react-app",
  "private": true,
  // workspacesを追加する
  "workspaces": {
    "packages": [
      "packages/*"
    ]
  },
  "packageManager": "[email protected]"
}

Reactの環境構築

本記事では、create-react-appではなく、viteでアプリを構築します。

monorepo-react-app:$ yarn create vite packages/client --template react-ts

package.jsonのnameがclientになっていることを確認します。

packages/client/package.json

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  // ...
}

monorepo-react-app:$ yarn install
monorepo-react-app:$ yarn workspace client dev

Firebase Functionsの環境構築

firebase cliを導入していない方は、先にセットアップしておく必要があります。

以下のコマンドを叩くと、functionsフォルダ・.firebaserc・firebase.jsonが作成されます。

monorepo-react-app:$ firebase init functions

functionsフォルダをpackagesフォルダに移動させます。

firebase.jsonを以下のように修正します。

firebase.json

{
  "functions": {
    "predeploy": "yarn workspace functions run build",
    "source": "packages/functions"
  }
}

src/index.tsにhelloWorld関数を追加しておきます。

packages/functions/src/index.ts

import * as functions from "firebase-functions";

// Start writing Firebase Functions
// https://firebase.google.com/docs/functions/typescript
export const helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});

monorepo-react-app:$ yarn workspace functions build

TypeScriptのバージョンを統一する

clientとfunctionsのTypeScriptのバージョンが一致していないので、ルートのpackage.jsonでTypeScriptのバージョンを管理するようにします。

まず、すでにインストールされているTypeScriptを削除します。

monorepo-react-app:$ yarn workspace client remove typescript
monorepo-react-app:$ yarn workspace functions remove typescript

TypeScriptをインストールします。

monorepo-react-app:$ yarn add -D typescript

eslint・prettierを導入

monorepo-react-app:$ yarn add -D eslint eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-sort @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier prettier-plugin-sort-json

eslintとprettierの設定ファイルを作成します。

monorepo-react-app:$ touch .eslintrc .eslintignore .prettierrc .prettierignore

.eslintrc

{
  "env": {
    "browser": true,
    "es2017": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:react/recommended",
    "plugin:sort/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "plugins": ["import", "sort", "@typescript-eslint"],
  "root": true,
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_"
      }
    ],
    "import/no-unresolved": [
      "error",
      {
        "ignore": ["\\?raw$"]
      }
    ],
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        },
        "newlines-between": "always"
      }
    ],
    "react/jsx-sort-props": [
      "error",
      {
        "reservedFirst": true,
        "shorthandFirst": true
      }
    ],
    "react/prop-types": ["off"],
    "react/react-in-jsx-scope": "off",
    "sort/imports": ["off"]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
    "react": {
      "version": "detect"
    }
  }
}

**/node_modules/*
**/dist/*
**/lib/*
.yarn

.prettierrc

{
  "jsonRecursiveSort": true,
  "trailingComma": "all"
}

**/node_modules/*
**/dist/*
**/lib/*
.yarn
*.md

参考記事

Author And Source

この問題について(monorepo構成で、ReactアプリとFirebase Functionsを同居させる), 我々は、より多くの情報をここで見つけました https://zenn.dev/alesion/articles/7aba3031b4d24c

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Collection and Share based on the CC protocol

Herokuにデプロイする際のTips

Ubuntu 22.04 で USB-シリアル (/dev/ttyUSB0) が認識されない問題の対応