🐒

初デプロイ奮闘記　No.1

に公開
Firebase
React
deploy
Web
プログラミング初心者
tech

※はじめに

間違った知識や推測を見つけた方は遠慮なくご指摘お願いします。

今回の概要

今回制作したのは自分用の「エントリー管理アプリ」。主な機能は入力された企業名とその状態(「気になってい」、「応募中」など)をfirestoreのデータベースに保存し、クライアントサイドに一覧として表示する、大まかにはこういった感じだ。
保存した企業はその状態ごとに対応するページでそれぞれまとまった一覧として表示され、当初は機能面はここまでにしてデプロイまでやってみようという様子だった。
ただ、何を思ったのかバックエンドでの処理を用いて各企業のホームページのURLを表示してみようと考え、firebaseのfunctionsという機能を用いて慣れないAPIなどに苦戦しつつなんとかかコードを形にはできた。
しかしここで問題発生、その処理をかいたfunctionsフォルダを「Google Cloud」にデプロイ？しようとしたところエラー発生。3日ほどそこで足止め状態、結局は諦め、出来上がった部分だけをデプロイすることにした。以下はその奮闘記である。

フロント構築

Reactでのセットアップ

今回はcreate-react-appで雛型を作成

Bash
npn create-react-app my-app

どうやら2025年現在ではnpxでビルドすることが推奨されているようだがその時点ではつゆ知らず、これが最終的なエラーの一つの原因ではないかと考えている。
　次にnpm startで動作確認、ここまで問題なし。

ルーティング設定

今回のアプリは入力された企業名の状態にあわせて4つのページを用意した。まずはルーティングを構築するためにreact-router-domをインストール。

Bash
npm install react-router-dom

パスの管理を容易にするためにmy-app/src内にconst.jsを作成し、ルートパスを定数として定義した。

const.js
export const ROUTES = {
 Home: "/",
 Interested: "/interested",
 Applied: "/applied",
 Rejected: "/rejected",
};

次にsrc内にPagesフォルダを作成し、その中に各ページコンポーネントを作成。ここまでのディレクトリ構成は以下の通り(うろ覚え)。

.
└── my-app/
   ├── node_modules
   ├── public
   └── src/
       ├── Pages/
       │   ├── Home.js
       │   ├── Interested.js
       │   ├── Applied.js
       │   └── Rejected.js
       ├── App.js
       ├── App.css
       ├── const.js
       └── package.json

続けてApp.jsに必要事項をimportし、ルーティング設定と各ページに飛ぶことができるよう下記のように記述。

App.js
import './App.css';
import { BrowserRouter, Link, Routes, Route } from "react-router-dom";
import { Interested } from './Pages/Interested';
import { Applied } from './Pages/Applied';
import { Rejected } from './Pages/Rejected';
import { Home } from './Pages/Home';
import { ROUTES } from './const';
import { useState } from 'react';

function App() {

  const [companyList, setCompanyList] = useState([]);


  return (
    <BrowserRouter>
      <div className='App'>
        <div className="dropdown">
          <button className="dropbtn">企業一覧メニュー</button>
          <div className="dropdown-content">
            <Link to="/">Home</Link>
            <Link to="/interested">気になっている企業一覧</Link>
            <Link to="/applied">応募済み企業一覧</Link>
            <Link to="/rejected">落選・選考辞退した企業一覧</Link>
          </div>
        </div>

        <Routes>
          <Route path={ROUTES.Home} element={<Home
            companyList={companyList}
            setCompanyList={setCompanyList} />} />
          <Route path={ROUTES.Interested} element={<Interested companyList={companyList} />} />
          <Route path={ROUTES.Applied} element={<Applied companyList={companyList} />} />
          <Route path={ROUTES.Rejected} element={<Rejected companyList={companyList} />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

ここまで無事に完了。
続きは次号。

Discussion