Node.js でレベルアップ: ヨガ ポーズ ライブラリにサーバーを追加する

Node.js でレベルアップ: ヨガ ポーズ ライブラリにサーバーを追加する

シンプルなヨガ ポーズ ライブラリを構築して React に慣れてきたら、バックエンド機能を追加してプロジェクトを次のレベルに引き上げたいと思いました。そこで Node.js の出番です。Node.js は、サーバー側で JavaScript コードを実行できるようにするランタイム環境です。このブログ投稿では、Node.js サーバーをヨガ ポーズ ライブラリ アプリに追加する方法を説明します。これは、フロントエンドとバックエンドの両方のテクノロジの操作を練習する素晴らしい方法であり、フルスタック アプリケーションがどのように動作するかについてより深く理解することができました。

Node.js を React アプリに追加する理由

ヨガ ポーズ ライブラリに Node.js サーバーを追加した主な動機は、React アプリを提供し、データベースからのポーズ データの取得やユーザー認証の処理など、後でより高度な機能を準備することでした。現時点では、サーバーをセットアップし、そこから静的ファイル (React アプリ) を提供することに集中したいと思いました。こうすることで、後で簡単に拡張できる方法でアプリをホストできます。

Node.js の入門

コードに入る前に、Node.js をインストールし、Node パッケージ マネージャーである npm を使用してプロジェクトを初期化しました。 Node.js がインストールされていない場合は、Node.js Web サイトにアクセスして最新バージョンをダウンロードするだけで簡単です。それが完了したら、基本的な Node.js サーバーをセットアップします。

npm init -y 
npm install express 

ルーティングを処理し、静的ファイルを提供するために、Node.js の最小限の Web フレームワークである Express.js を使用しました。このような軽量アプリケーションに最適です。

server.js の紹介

次に、サーバーのセットアップを担当するserver.jsを見てみましょう。完成したコードは次のとおりです:

// Importing the Express framework
const express = require('express'); 
// Importing the path module to handle file paths
const path = require('path'); 
// Creating an Express App
const app = express(); 
// Setting the PORT
const PORT = process.env.PORT || 3000; 

// Serve static files from the React app app.use(express.static(path.join(__dirname, 'build'))); 

// For any request that doesn't match an API route 
// serve the React app's index.html. 
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); 
}); 

// Start the server
app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
}); 

コードを分解する

それでは、server.js を一度に 1 ステップずつ分解してみましょう。

依存関係をインポートしています:

const express = require('express'); 
const path = require('path'); 

ここでは、Node.js の Web フレームワークである Express と、ファイルとディレクトリのパスの操作に役立つ組み込み Node.js モジュールである path をインポートして、サーバーがファイルを正しく見つけられるようにします。私たちは奉仕したいと思っています。

Express アプリケーションの作成:

const app = express();  

サーバーのリクエストと応答を処理する Express アプリケーションのインスタンスを作成します。

ポートの設定:

const PORT = process.env.PORT || 3000; 

サーバーがリッスンするポート番号を定義します。環境変数 PORT を確認します。これは、ホスティング サービスを使用したデプロイメントに役立ちます。設定されていない場合は、ポート 3000 にフォールバックします。

静的ファイルの提供:

app.use(express.static(path.join(__dirname, 'build')));

この行は、React アプリのコンパイル済みファイルを含むビルド ディレクトリから静的ファイルを提供するように Express に指示します。

キャッチオールルート:

app.get('*', (req, res) => { 
  res.sendFile(path.join(__dirname, 'build', 
'index.html')); 
}); 

この包括的なルートにより、以前のルートで処理されなかったリクエストはすべて、index.html で応答するようになります。これは、クライアント側のルーティングが React Router で正しく機能するために重要です。

サーバーの起動:

app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
});

最後に、サーバーを起動し、定義されたポートでリッスンし、準備ができたらコンソールにメッセージを記録します。

結論: 将来の機能のための強固な基盤

Node.js をヨガ ポーズ ライブラリ アプリに追加することで、将来的により高度な機能を構築するための強固な基盤が得られました。 Node.js サーバーからアプリを提供することで、将来的にはより動的なデータ、ユーザー入力、さらにはリアルタイム機能を簡単に処理できるように準備しました。これは、フロントエンドとバックエンドのテクノロジーを組み合わせる上での素晴らしい演習でした。構築を続けながら、Node.js と Express をさらに探索することに興奮しています。

次回のブログ投稿では、データベースを使用してこのセットアップを拡張する方法をさらに詳しく説明する予定ですが、今のところ、Node.js を実際に使ってみることでどれだけ多くのことを学べたかに興奮しています。

以上がNode.js でレベルアップ: ヨガ ポーズ ライブラリにサーバーを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。