react-deploy on firebase

Escher-js / TaskBucket

0 stars 0 forks source link

react-deploy on firebase #2

Closed psmuler closed 1 year ago

psmuler commented 1 year ago

上のコードをreact web appに書き直してfirebaseに載せていきたいと思います。create react app から始めてください

psmuler commented 1 year ago

Reactアプリケーションを作成し、Firebaseと統合する手順は以下の通りです。

まず、新しいReactアプリケーションを作成します。コマンドラインで次のコマンドを実行してください。

npx create-react-app task-manager

これにより、新しいReactアプリケーションがtask-managerディレクトリに作成されます。

次に、Firebaseをプロジェクトに追加します。Firebaseコンソールで新しいプロジェクトを作成し、その後、以下のコマンドを実行して、Firebase CLIをインストールします。

npm install -g firebase-tools

その後、プロジェクトのルートディレクトリに移動し、firebase initコマンドを実行して、Firebaseプロジェクトを初期化します。

cd task-manager
firebase init

プロンプトに従って、Firebaseプロジェクトを選択し、FirestoreやAuthenticationなどの機能を有効にします。

次に、Firebase SDKをReactアプリケーションにインストールします。

npm install firebase

Reactアプリケーションのsrcフォルダ内にfirebase.jsファイルを作成し、Firebaseの設定を記述します。Firebaseコンソールから取得したAPIキーなどの情報を使用します。

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
const auth = firebase.auth();

export { db, auth };

これで、ReactアプリケーションでFirebaseのFirestoreやAuthenticationを使用できるようになります。Firebaseを使用してデータの読み書きやユーザー認証を行うために、Reactコンポーネントを作成および更新します。また、前の回答で提供したHTML、CSS、およびJavaScriptのコードを、適切なReactコンポーネントに変換し、Reactの状態管理やイベントハンドラを使用して動作を実装します。

最後に、Reactアプリケーションをビルドし、Firebaseにデプロイします。

npm run build
firebase deploy

これで、ReactアプリケーションがFirebaseにデプロイされ、FirebaseホスティングURLでアクセスできるようになります。

psmuler commented 1 year ago

npm run build で作られるのがbuildであり、一方でfirebase initで設定したのがpublicレポジトリからのデプロイのため、以下のエラーが出てしまったようです

 task-manager % firebase deploy

=== Deploying to 'task-manager-c5803'...

i  deploying storage, functions, hosting

There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.

Error: HTTP Error: 404, App does not exist.

Having trouble? Try firebase [command] --help

psmuler commented 1 year ago

すみません、その問題を解決するには、次の手順に従ってください。

Firebase CLIで、Firebaseプロジェクトのホスティング設定を変更する必要があります。firebase.jsonファイルを開いて、hostingのpublic設定をbuildに変更してください。また、rewrites設定を追加して、すべてのリクエストがindex.htmlにルーティングされるようにします。firebase.jsonファイルは次のようになります。

{
  "storage": {
    "rules": "storage.rules"
  },
  "functions": {
    "predeploy": "npm --prefix \"$RESOURCE_DIR\" run lint",
    "source": "functions"
  },
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

あなたが述べたエラーは、Google App Engineが設定されていないためにFirebase Functionsのデプロイに失敗したことを示しています。Firebase Functionsを使用しない場合、firebase.jsonファイルからfunctionsに関する設定を削除してください。Functionsを使用する場合は、プロジェクトにGoogle App Engineインスタンスを設定する必要があります。Google Cloud Console（https://console.cloud.google.com/appengine）でApp Engineを設定するか、またはFirebase ConsoleのFunctionsタブで設定することができます。
変更を保存したら、再度firebase deployコマンドを実行してReactアプリケーションをFirebaseにデプロイします。

firebase deploy

これで、デプロイプロセスが正常に完了し、FirebaseホスティングURLでアプリケーションにアクセスできるはずです。

psmuler commented 1 year ago

firebaseのデプロイに成功しました。前の回答で提供したHTML、CSS、およびJavaScriptのコードを、適切なReactコンポーネントに変換し、Reactの状態管理やイベントハンドラを使用して動作を実装してください。

psmuler commented 1 year ago

以下に、前回提供したHTML、CSS、およびJavaScriptのコードをReactコンポーネントに変換したものを示します。

まず、srcディレクトリ内にcomponentsディレクトリを作成し、その中にTaskTable.jsファイルを作成します。
次に、TaskTable.jsファイルに以下のコードを追加します。

import React, { useState } from 'react';
import './TaskTable.css';

const TaskTable = ({ tasks }) => {
  const [draggedTask, setDraggedTask] = useState(null);

  const onDragStart = (e, task) => {
    e.dataTransfer.setData('text/plain', task);
    setDraggedTask(task);
  };

  const onDragOver = (e) => {
    e.preventDefault();
  };

  const onDrop = (e, i, j) => {
    e.preventDefault();
    const updatedTasks = [...tasks];
    const index = updatedTasks[i][j].indexOf(draggedTask);

    if (index !== -1) {
      updatedTasks[i][j].splice(index, 1);
    }

    updatedTasks[i][j].push(draggedTask);
    setDraggedTask(null);
  };

  const renderTasks = (i, j) => {
    return tasks[i][j].map((task) => (
      <span
        key={task}
        className="item"
        draggable="true"
        onDragStart={(e) => onDragStart(e, task)}
      >
        {task}
      </span>
    ));
  };

  return (
    <table className="task-table">
      <tbody>
        {tasks.map((row, i) => (
          <tr key={i}>
            {row.map((cell, j) => (
              <td
                key={j}
                onDragOver={onDragOver}
                onDrop={(e) => onDrop(e, i, j)}
              >
                {renderTasks(i, j)}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default TaskTable;

componentsディレクトリ内にTaskTable.cssファイルを作成し、以下のスタイルを追加します。

.task-table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  background-color: #121212;
}

.task-table td {
  width: 20%;
  height: 20%;
  padding: 8px;
  border: none;
  text-align: center;
  vertical-align: middle;
}

.item {
  display: inline-block;
  padding: 4px;
  margin: 2px;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #222;
  color: #ddd;
  font-size: 14px;
}

App.jsファイルを編集し、以下のコードに置き換えます。


import React from 'react';
import TaskTable from './components/TaskTable';
import './App.css';

const tasks = [
  // この部分にJSONデータを変換した2次元配列を設定する
];

function App() {
  return (
    <div className="App">
      <header

psmuler commented 1 year ago

続けてください

psmuler commented 1 year ago

すみません、途中で送信してしまいました。以下にApp.jsの続きを示します。

import React from 'react';
import TaskTable from './components/TaskTable';
import './App.css';

const tasks = [
  // この部分にJSONデータを変換した2次元配列を設定する
];

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="App-main">
        <TaskTable tasks={tasks} />
      </main>
    </div>
  );
}

export default App;

最後に、App.cssファイルを編集して、アプリケーションのスタイルを設定します。

.App {
  text-align: center;
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-header {
  background-color: #282c34;
  min-height: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(15px + 5vmin);
  color: white;
}

.App-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

これで、Reactコンポーネントに変換されたHTML、CSS、およびJavaScriptのコードが完成しました。tasks配列に適切なJSONデータを変換した2次元配列を設定することで、アプリケーションが期待通りに動作するはずです。

psmuler commented 1 year ago

tasks配列に与えられたJSONデータから2次元配列へ変換する部分を実装してください

psmuler commented 1 year ago

以下に、与えられたJSONデータから2次元配列へ変換するコードを示します。jsonToTasksという関数を定義し、それをApp.jsで使用します。

srcディレクトリ内にutilsディレクトリを作成し、その中にjsonToTasks.jsファイルを作成します。
次に、jsonToTasks.jsファイルに以下のコードを追加します。

export const jsonToTasks = (jsonData) => {
  const tasks = new Array(5).fill(null).map(() => new Array(5).fill(null).map(() => []));

  jsonData.forEach((item) => {
    const i = 5 - item.importance;
    const j = item.urgency - 1;
    tasks[i][j].push(item.name);
  });

  return tasks;
};

App.jsファイルを編集し、以下のコードに置き換えます。

import React from 'react';
import TaskTable from './components/TaskTable';
import { jsonToTasks } from './utils/jsonToTasks';
import './App.css';

// 与えられたJSONデータ
const jsonData = [
  // JSONデータをここに配置する
];

// JSONデータを2次元配列に変換する
const tasks = jsonToTasks(jsonData);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="App-main">
        <TaskTable tasks={tasks} />
      </main>
    </div>
  );
}

export default App;

これで、与えられたJSONデータを2次元配列に変換してtasks配列に設定し、TaskTableコンポーネントに渡すことができます。jsonData変数に適切なJSONデータを設定することで、アプリケーションが期待通りに動作するはずです。

psmuler commented 1 year ago

jsonデータは独立したファイルを読み込めるようにしましょう。

psmuler commented 1 year ago

JSONデータを独立したファイルに格納し、それを読み込む方法を説明します。この例では、srcディレクトリ内にdataディレクトリを作成し、その中にtasks.jsonファイルを作成します。

srcディレクトリ内にdataディレクトリを作成します。
次に、dataディレクトリ内にtasks.jsonファイルを作成し、以下のようにJSONデータを格納します。

[
  {
    "name": "タスク1",
    "detail": "タスク1の詳細",
    "urgency": 1,
    "importance": 1,
    "parent": null
  },
  {
    "name": "タスク2",
    "detail": "タスク2の詳細",
    "urgency": 2,
    "importance": 3,
    "parent": null
  }
  // その他のタスクデータ
]

App.jsファイルを編集し、以下のコードに置き換えます。import文を使って、tasks.jsonファイルをインポートしています。

import React from 'react';
import TaskTable from './components/TaskTable';
import { jsonToTasks } from './utils/jsonToTasks';
import jsonData from './data/tasks.json';
import './App.css';

// JSONデータを2次元配列に変換する
const tasks = jsonToTasks(jsonData);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="App-main">
        <TaskTable tasks={tasks} />
      </main>
    </div>
  );
}

export default App;

これで、JSONデータが独立したファイルに格納され、App.jsでインポートされています。アプリケーションは期待通りに動作するはずです。