Vueフロントエンドを構築し、バックエンドに接続する方法は？

このチュートリアルでは、vueを使用してto doリストアプリケーションを構築し、管理されたバックエンドサービスに接続します。 このガイドは、基本的なcrud（作成、読み取り、更新、削除）操作を習得し、直感的なユーザーインターフェースを構築したい方に最適です。最後には、あなたのアプリはback4appによって提供されるバックエンドと完全に対話できるようになります。 フルスタックアプリケーションの開発には、複雑なバックエンドのセットアップ、データベース管理、ユーザー認証が含まれることがあります。優れたvueフロントエンドの作成に集中できるように、back4appを使用してバックエンドを簡単に管理します。 back4appは、すぐに使用できるデータベース、認証、カスタムサーバーロジックのためのcloud code、アプリと統合するためのsdkを提供します。これにより、サーバーのメンテナンスの手間をかけずにスケーラブルなアプリケーションを展開できます。 主なポイント このチュートリアルに従うことで、あなたは 業界標準のツールを使用して、最新のvueプロジェクトをセットアップします。 アプリケーションのデータを処理するために、バックエンドサービスをシームレスに統合します。 動的な to doリスト のための基本的なcrud操作を実装します。 back4app上でコンテナ化されたワークフローを介して、完全に機能するアプリケーションを展開します。 前提条件 始める前に、次のものを用意してください node js と npm があなたのマシンにインストールされていること。インストールを確認するには、 node v と npm v を実行してください。 基本的な vue の知識 , コンポーネント、リアクティブデータ、イベント処理を含む。vue 3 のコンポジション api に慣れていると良いでしょう。 バックエンドサービスを管理するための back4app アカウント。まだ登録していない場合は、 back4app https //www back4app com/ に登録してください。 これらが整ったら、プロジェクトのセットアップを開始できます。 プロジェクトのセットアップ ローカル開発環境を準備し、vite を使用して vue プロジェクトを初期化して、迅速で現代的なビルド体験を得ることから始めましょう。 node js (lts バージョン) がインストールされていることを確認してください。もしインストールされていない場合は、 nodejs org https //nodejs org/ からダウンロードしてください。 次のコマンドを実行して、vue プロジェクトを作成します npm create vite\@latest todo app 3 プロジェクトディレクトリに移動します cd todo app 4 依存関係をインストールします npm install 5 すべてが正常に動作することを確認するために、開発サーバーを起動します npm run dev 提供されたurlをブラウザで開いてください。vueフロントエンドが準備できたら、次のステップはback4appでバックエンドを設定することです。 todoバックエンドの作成 back4appは、完全に管理されたバックエンドサービスを提供しており、 parse , nosqlデータベース、ユーザー認証、cloud code、および自動api生成を備えています。 バックエンドを作成するための手順は次のとおりです ログイン して、あなたの back4appダッシュボード https //www back4app com/ をクリックし、 "新しいアプリを作成" アプリの名前を付けてください （例えば、 todoapp ) として、バックエンドタイプに nodejs/parse を選択します。 "データベース" > "ブラウザ" に移動し、 "クラスを作成" をクリックし、 "カスタム" を選択します。クラスに task という名前を付け、パブリックの読み書きを許可するように権限を設定します（後でこれを調整できます）。 "task" クラスに次のフィールドを追加します title （文字列）– タスクのタイトル。 description （文字列）– タスクの詳細。 completed （ブール値）– タスクの完了状況。 duedate （日付）– タスクの期限。 "保存" をクリックして、スキーマを作成します。 back4appとvueの統合 あなたは parse javascript sdk を使用して、vueフロントエンドとback4appバックエンド間で通信します。 parse sdkをインストールします npm install parse sdkを設定するには、 src/main js を編集します。sdkをインポートし、あなたの アプリケーションid と javascriptキー をback4appダッシュボードから取得して初期化します（ アプリ設定 > セキュリティとキー ) import { createapp } from 'vue'; import app from ' /app vue'; 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; createapp(app) mount('#app'); バックエンドが接続されたので、to doリストインターフェースを構築し、crud操作を統合できます。 フロントエンドの開発 あなたのvueアプリケーションは、タスクを追加、表示、更新、削除するためのコンポーネントで構成されます。vueのリアクティビティを活用して、状態を管理し、スムーズな更新を確保します。 コンポーネントの構造化 あなたのvueコンポーネントを格納するために、 components フォルダーを src 内に作成します mkdir src/components touch src/components/taskform vue src/components/tasklist vue src/components/taskitem vue taskform vue このコンポーネントは新しいタスクの追加を処理します。ユーザー入力をキャプチャするために制御されたフォームを使用します。 \<template> \<form @submit prevent="handlesubmit"> \<input type="text" placeholder="task title" v model="title" required /> \<input type="text" placeholder="description" v model="description" required /> \<button type="submit">add task\</button> \</form> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskform', props \['fetchtasks'], data() { return { title '', description '' }; }, methods { async handlesubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this fetchtasks(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> tasklist vue このコンポーネントはタスクのリストを表示し、タスクアクションを統合します。 \<template> \<div> \<p v if="!tasks length">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', components { taskitem }, props \['tasks', 'fetchtasks'] }; \</script> taskitem vue このコンポーネントは個々のタスクを表し、完了としてマークするか削除するためのアクションを含みます。 \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="handlecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="handledelete">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task', 'fetchtasks'], methods { async handlecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this fetchtasks(); } catch (error) { console error('error updating task ', error); } }, async handledelete() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this fetchtasks(); } catch (error) { console error('error deleting task ', error); } } } }; \</script> app vueでの状態管理 メインコンポーネントでは、vueのリアクティブデータとライフサイクルフックを使用してタスクリストを管理します。 \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform \ fetchtasks="fetchtasks" /> \<tasklist \ tasks="tasks" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import { ref, onmounted } from 'vue'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; export default { name 'app', components { taskform, tasklist }, setup() { const tasks = ref(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } }; onmounted(fetchtasks); return { tasks, fetchtasks }; } }; \</script> アプリケーションのスタイリング 次のように styles css ファイルを src に作成して、基本的なスタイリングを追加します 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; box sizing border box; 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; } task item { display flex; flex direction column; align items center; justify content 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; } } スタイルシートを main js にインポートします。 import ' /styles css'; back4app web deploymentでのフロントエンドのデプロイ back4app web deploymentを使用すると、dockerを使用してvueアプリケーションを本番環境用にコンテナ化できます。 本番環境用のviteの設定 コンテナ化された環境に対して正しくベースパスを設定するために vite config js を調整します import { defineconfig } from 'vite'; import vue from '@vitejs/plugin vue'; export default defineconfig({ plugins \[vue()], base ' /', }); 本番ビルドを生成します npm run build dockerfileの作成 ルートディレクトリに dockerfile を作成します # stage 1 build the vue app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] docker コンテナをローカルでテストする docker イメージをビルドします docker build t todo frontend コンテナを実行します docker run p 8080 80 todo frontend 次の url にアクセスして http //localhost 8080 、vue アプリが正しく提供されていることを確認します。 back4app へのデプロイ git リポジトリを初期化し、ファイルを追加してコミットします 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 次の url にログインします back4app web デプロイメント https //www back4app com/containers "新しいアプリを作成" をクリックし、プロジェクト名を提供し、 github リポジトリ を選択します。 back4app にリポジトリへのアクセスを許可し、 dockerfile デプロイメント を選択します。 ビルド設定を確認し、最初のビルドをトリガーするために "デプロイ" をクリックします。 デプロイメントの監視 デプロイ後、back4appダッシュボードを使用して デバッグ用のログを表示します。 リソースの使用状況とコンテナの再起動を監視します。 新しいコミットで再デプロイするには、 "ビルドをトリガー" オプションを使用します。 必要に応じてカスタムドメインを設定します。 ライブアプリケーションにアクセスするには、 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ です。 テストとデバッグ デプロイ後、vueフロントエンドがback4appバックエンドと正しく通信していることを確認します。 apiコールの確認 ブラウザの開発者ツールを開き（f12 → ネットワーク）apiリクエストを確認します。 タスクの追加と取得 アプリのインターフェースを使用してタスクを追加し、back4appデータベースブラウザを確認します。 crud操作 タスクの完了と削除をテストし、バックエンドで変更を確認します。 エッジケース フォーム入力を検証し、遅いネットワーク条件をシミュレート（chrome devtoolsを使用）してパフォーマンスを評価します。 一般的な問題のトラブルシューティング corsエラー 許可されたヘッダーとドメイン をback4appで更新します（ダッシュボード > アプリ設定 > セキュリティとキー）あなたのフロントエンドurlを含めるために。 認証エラー（401） アプリケーションidとjavascriptキーが正しいことを確認します。 バックエンドデプロイメントの問題 back4appダッシュボードでコンテナログを確認し、必要に応じてコンテナを再起動します。 vueとback4appを使用するためのベストプラクティス アプリケーションを最適化するために 効率的なデータリクエスト 複数の操作のためにバッチリクエストを使用します const tasks = \[task1, task2, task3]; parse object saveall(tasks); クエリの最適化 必要なフィールドのみをリクエスト query select('title', 'completed'); 環境変数 機密キーを env ファイルに保存 vite parse app id=your app id vite parse js key=your js key セキュリティ aclを使用してアクセスを制限 task setacl(new parse acl(parse user current())); クラウドコード 複雑なロジックをバックエンド関数にオフロードしてapiの露出を減らす。 結論 vueフロントエンドを設定し、back4appのバックエンドと統合し、コンテナ化されたワークフローを介してデプロイすることで、フルスタックのto doリストアプリケーションを成功裏に構築しました。 このチュートリアルでは、ローカル開発からクラウドデプロイメントまでのスムーズな道筋を示し、vue uiとバックエンドサービス間の円滑な相互作用を確保しました。 今後は、高度なユーザー管理、リアルタイム更新、サードパーティサービスの統合などの強化を検討してください。詳細については、 back4appドキュメント https //www back4app com/docs を訪れて、コミュニティリソースを探索してください。