使用 Node.js 升級：將伺服器新增至我的瑜珈姿勢庫
透過建立一個簡單的瑜珈姿勢庫來熟悉 React 後，我想透過添加一些後端功能將我的專案提升到一個新的水平。這就是 Node.js 的用武之地。 Node.js 是一個執行環境，允許我們在伺服器端執行 JavaScript 程式碼。在這篇文章中，我將介紹如何將 Node.js 伺服器新增至我的 Yoga Pose Library 應用程式。這是練習使用前端和後端技術的絕佳方式，它讓我對全端應用程式的工作方式有了更深入的了解。
為什麼要將 Node.js 加入我的 React 應用程式？
將 Node.js 伺服器新增至我的 Yoga Pose 庫的主要動機是為 React 應用程式提供服務，並為以後的更高級功能做好準備，例如從資料庫檢索姿勢資料或處理使用者身份驗證。現在，我想專注於設定伺服器並從中提供靜態檔案（React 應用程式）。這樣，我就可以以一種以後可以輕鬆擴展的方式託管該應用程式。
Node.js 入門
在深入研究程式碼之前，我安裝了 Node.js 並使用 Node 套件管理器 npm 初始化了我的專案。如果您沒有安裝 Node.js，只需造訪 Node.js 網站並下載最新版本即可。完成後，我設定了一個基本的 Node.js 伺服器。
npm init -y
npm install express
登入後複製
我使用 Express.js（Node.js 的極簡 Web 框架）來處理路由和提供靜態檔案。它非常適合像這樣的輕量級應用程式。
介紹 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。
導入相依性:
const express = require('express');
const path = require('path');
登入後複製
在這裡，我們導入了express（Node.js的Web框架）和path（一個內建的Node.js模組，可以幫助我們處理檔案和目錄路徑），以便伺服器可以正確地定位到檔案我們想要服務。
建立 Express 應用程式:
const app = express();
登入後複製
我們建立一個 Express 應用程式的實例，它將處理我們的伺服器請求和回應。
設定埠:
const PORT = process.env.PORT || 3000;
登入後複製
我們定義我們的伺服器將偵聽的連接埠號碼。我們檢查環境變數 PORT，這對於使用託管服務進行部署非常有用，如果未設置，則回退到連接埠 3000。
提供靜態檔案:
app.use(express.static(path.join(__dirname, 'build')));
登入後複製
這一行告訴 Express 從建置目錄提供靜態文件，其中包含我們的 React 應用程式的編譯文件。
包羅萬象的路線：
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 添加到我的 Yoga Pose Library 應用程式為我接下來建立更高級的功能奠定了堅實的基礎。透過從 Node.js 伺服器提供應用程序，我可以輕鬆處理未來更多的動態資料、使用者輸入，甚至即時功能。這是結合前端和後端技術的一次很好的練習，我很高興在繼續建造過程中探索更多 Node.js 和 Express。
在我的下一篇部落格文章中，我計劃更深入地探討如何使用資料庫擴展此設置，但現在，我對透過親自使用 Node.js 學到的東西感到非常興奮！
以上是使用 Node.js 升級：將伺服器新增至我的瑜珈姿勢庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
