How to Build a Redwood.js Frontend and Connect It to a Backend?

このチュートリアルでは、redwood jsを使用してto doリストアプリケーションを構築し、back4appの管理されたバックエンドに接続します。 このハンズオンガイドでは、redwood jsプロジェクトのセットアップからバックエンド通信のためのparseの統合まで、すべてのステップを案内します。これにより、動的で応答性の高いユーザーインターフェースの作成に集中できます。 redwood jsは、モダンなreactベースのフロントエンドと堅牢なバックエンドアーキテクチャを組み合わせることで、フルスタック開発を簡素化するように設計されています。 このチュートリアルでは、back4appを使用してバックエンドサービスを管理し、サーバーインフラストラクチャを管理する手間なしに基本的なcrud操作を実行できるようにします。 主なポイント このガイドの終わりまでに、あなたは以下のことができるようになります 業界標準のツールを使用して、モダンなredwood jsプロジェクトを初期化します。 parse javascript sdkを使用して、redwood jsフロントエンドをback4appバックエンドに接続します。 crud操作を実装して、 to doリスト を管理します。 redwood jsアプリをコンテナ化し、back4app web deploymentを介してデプロイします。 前提条件 始める前に、以下のものを用意してください node jsとnpm/yarn がマシンにインストールされていること。インストールを確認するには、 node v と npm v または yarn v を実行してください。 基本的なredwood jsの知識 , プロジェクト構造、ルーティング、コンポーネントを含む。reactの概念に慣れていると良いでしょう。 バックエンドサービスを設定および管理するための back4appアカウント 。必要に応じて、 back4app https //www back4app com/ にサインアップしてください。 これらの前提条件が整ったら、redwood jsプロジェクトをセットアップし、スケーラブルなバックエンドに接続する準備が整いました。 プロジェクトのセットアップ 新しいredwood jsアプリケーションを作成することから始めます。ターミナルを開き、次のコマンドを実行します。 todo app を希望のプロジェクト名に置き換えてください yarn create redwood app todo app プロジェクトディレクトリに移動します cd todo app すべての依存関係をインストールします yarn install 開発サーバーを実行して、プロジェクトが正しくセットアップされていることを確認します yarn rw dev ターミナルに表示されたurlにアクセスして、redwood jsアプリが実行されていることを確認してください。 back4appでのtodoバックエンドの設定 back4appは、アプリケーションのデータ処理を簡素化する管理されたparseバックエンドを提供します。このセクションでは、to doリストのタスクを保存するためのデータモデルを作成します。 バックエンドアプリケーションの作成 あなたの back4appダッシュボード https //www back4app com/ にログインし、 "新しいアプリを作成" アプリケーションに名前を付けます（例： todoredwoodapp ）そして、バックエンドタイプとして nodejs/parse を選択します。 「 データベース 」 > 「 ブラウザ 」セクションで、「 クラスを作成 」をクリックし、「 カスタム 」を選択します。クラスに名前を付けます task とし、そのクラスレベルの権限を設定して、公開の読み取りと書き込みを許可します（必要に応じてこれらの設定を後で調整します）。 次のフィールドを task クラスに追加します title （文字列）– タスクのタイトル。 description （文字列）– タスクの詳細。 completed （ブール値）– タスクが完了しているかどうか。 duedate （日付）– タスクの締切。 スキーマを確定するには、「 保存 」をクリックします。 redwood js と back4app の統合 redwood js アプリを back4app に接続するには、parse javascript sdk をインストールします yarn add parse 次に、 web/src ディレクトリに新しいファイルを作成して parse を設定します。ファイル名は parseclient js とし、以下のコードを追加します。 'your application id' と 'your javascript key' を back4app ダッシュボードからの資格情報に置き換えます（ アプリ設定 > セキュリティとキー ) // web/src/parseclient js import parse from 'parse/dist/parse min js' const parse app id = 'your application id' const parse js key = 'your javascript key' const parse server url = 'https //parseapi back4app com/' parse initialize(parse app id, parse js key) parse serverurl = parse server url export default parse この設定により、任意のredwood jsコンポーネントからparseメソッドを呼び出すことができます。 redwood jsを使用したフロントエンドの構築 バックエンドが接続されたので、to doリストインターフェースを構築する時が来ました。redwood jsでは、ページは web/src/pages ディレクトリの下に配置されます。 todoページの作成 新しいフォルダーを作成します todopage を web/src/pages に追加し、次の名前のファイルを作成します todopage jsx mkdir p web/src/pages/todopage touch web/src/pages/todopage/todopage jsx 開く web/src/pages/todopage/todopage jsx そして次のコードを追加します // web/src/pages/todopage/todopage jsx import { usestate, useeffect } from 'react' import parse from 'src/parseclient' const todopage = () => { const \[tasks, settasks] = usestate(\[]) const \[title, settitle] = usestate('') const \[description, setdescription] = usestate('') useeffect(() => { fetchtasks() }, \[]) const fetchtasks = async () => { try { const task = parse object extend('task') const query = new parse query(task) const results = await query find() settasks(results map((task) => ({ id task id, task tojson() }))) } catch (error) { console error('error fetching tasks ', error) } } const addtask = async (e) => { e preventdefault() try { const task = parse object extend('task') const task = new task() task set('title', title) task set('description', description) task set('completed', false) await task save() settitle('') setdescription('') fetchtasks() } catch (error) { console error('error adding task ', error) } } const toggletask = async (id, currentstatus) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) task set('completed', !currentstatus) await task save() fetchtasks() } catch (error) { console error('error toggling task ', error) } } const deletetask = async (id) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) await task destroy() fetchtasks() } catch (error) { console error('error deleting task ', error) } } return ( \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={addtask} classname="form"> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? 'completed' ''}`} \> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={() => toggletask(task id, task completed)}> {task completed ? 'undo' 'complete'} \</button> \<button onclick={() => deletetask(task id)}>delete\</button> \</div> )) )} \</div> \</div> ) } export default todopage ルートの設定 todoページをアクセス可能にするために、 routes jsx ファイルを開き、 web/src/routes jsx 新しいルートを追加します // web/src/routes jsx import todopage from 'src/pages/todopage/todopage' const routes = () => { return ( \<router> \<route path="/" page={todopage} name="todo" /> \<route notfound page={notfoundpage} /> \</router> ); }; export default routes; グローバルスタイルの追加 グローバルスタイルを追加するには、以下のcssスタイルを index css というcssファイルに追加します。 web/src フォルダ内 / web/src/index css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } あなたのredwood jsアプリは、back4appバックエンドと連携する機能的なto doリストインターフェースを備えています。 back4appでのredwood jsアプリのコンテナ化とデプロイ back4app webデプロイメントは、アプリのデプロイを簡素化するコンテナ化された環境を提供します。このセクションでは、redwood jsアプリをdockerコンテナにパッケージ化し、デプロイします。 本番環境に向けたアプリの準備 まず、redwood jsアプリを本番用にビルドします yarn rw build web dockerfileの作成 redwood jsプロジェクトのためにdockerをセットアップするには、ターミナルでdockerセットアップコマンドを実行する必要があります yarn rw setup docker セットアップコマンドは、いくつかのタスクを実行します dockerfile、 dockerignore、docker compose dev yml、およびdocker compose prod ymlの4つのファイルを作成します。 api側に@redwoodjs/api serverパッケージを追加し、web側に@redwoodjs/web serverパッケージを追加します。 redwood tomlのbrowser open設定を更新します。この設定がtrueのままだと、docker compose dev ymlを実行すると開発サーバーが壊れます。 このコマンドは、redwood jsアプリケーションをビルドし、最小限のnode jsランタイムを使用して本番用のイメージを準備するdockerfileを提供します。 dev composeファイルを次のようにして開始できます docker compose f /docker compose dev yml up ブラウザで http //localhost 8390 を開いて、redwood js アプリが正しく動作していることを確認してください。 back4app ウェブデプロイメントによるデプロイ プロジェクトを github にプッシュします git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 次に、 back4app ウェブデプロイメント https //www back4app com/containers にログインし、次の手順に従ってください "新しいアプリを作成" をクリックし、プロジェクトの詳細を入力します。 "github リポジトリ" を選択し、back4app を認証します。 あなたの todo redwood リポジトリを選択します。 "dockerfile デプロイメント" を選択し、ビルド設定を確認します。 "デプロイ" をクリックして、デプロイメントプロセスを開始します。 デプロイ後は、back4app ダッシュボードを使用してログを監視し、ビルドを管理し、必要に応じてカスタムドメインを設定します。 アプリケーションのテストとデバッグ デプロイ後、アプリが期待通りに機能することを確認してください api接続： ブラウザの開発者ツールを使用して、タスクの追加、切り替え、削除のためのapiリクエストが成功していることを確認します。 データの永続性： uiを通じてタスクを追加し、タスクがback4appデータベースに永続することを確認するためにリフレッシュします。 crud操作： タスクの切り替えと削除をテストし、コンソールやapiログにエラーがないか確認します。 エッジケース： 入力検証が空の送信を防ぐことを確認します。 ベストプラクティスと最適化のヒント 安全で効率的なアプリケーションのために、以下を考慮してください： apiリクエストの最適化： バッチ処理を使用し、必要なフィールドのみを取得します。 環境変数： 環境変数を使用して、機密の資格情報（アプリケーションidとjavascriptキー）を保護します。 アクセス制御： 動的aclを実装し、認可されたユーザーのみがデータを変更できるようにします。 クラウドコード： 複雑なロジックをback4appクラウドコードにオフロードして、パフォーマンスとセキュリティを向上させます。 結論 これで、back4appバックエンドと統合されたredwood jsを使用して、フルスタックのto doリストアプリケーションを構築しました。 このチュートリアルでは、プロジェクトの初期化からバックエンドの統合、コンテナ化されたデプロイメントまでのすべてをカバーしました。 開発を続ける中で、高度なユーザー管理、リアルタイム更新、サードパーティ統合などの機能を追加することを検討してください。 詳細については、 back4appドキュメント https //www back4app com/docs とredwood jsリソースを探索してください。