使用 Node.js 升級：將伺服器新增至我的瑜珈姿勢庫

使用 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中文網其他相關文章！