首頁 > 文章 > web前端 > nodejs搭建靜態資源伺服器

nodejs搭建靜態資源伺服器

WBOY原創: 2023-05-12 12:31:071840瀏覽

隨著互聯網的發展，Web開發在全球範圍內已經成為了一項非常熱門的行業，對於開發人員來說，為了能夠快速有效地開發並發布程式碼，需要有一個靜態資源伺服器來幫助我們管理和處理靜態資源，特別是在前後端分離的開發模式中使用頻率較高，而Node.js發布以來已成為非常熱門的一種開發語言，其自身所帶的http模組特別適合用於構建靜態資源伺服器。在這篇文章中，將會介紹如何使用Node.js來建立一個輕量級的靜態資源伺服器。

一. 安裝Node

首先我們需要安裝Node.js，它是基於JavaScript的伺服器端程式語言，可在官網上下載並安裝。

二. 初始化專案

我們需要在本地建立一個資料夾，為其初始化一個 Node 專案。

在命令列中輸入以下指令：

mkdir node-static-server
cd node-static-server
npm init

輸入上述指令後，會提示我們建構這個項目的初始化參數，也可以按下回車鍵，使用預設值。

在專案內建立一個名為index.html的文件，在裡面新增一個簡單的html標籤，如下所示：

<!DOCTYPE html>
<html>
<head></head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

三. 建立伺服器

#在專案中建立一個名為server.js的文件，使用Node.js的內建http模組來建立一個web伺服器，程式碼如下所示：

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  // 处理首页请求
  if (req.url === '/') {
    fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
      if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
      }

      res.writeHead(200);
      res.end(data);
    });
  } else {
    // 处理其他静态文件请求
    const filePath = path.join(__dirname, req.url);
    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.writeHead(404);
        return res.end('404 not found');
      }

      res.writeHead(200);
      res.end(data);
    });
  }
});

const port = process.env.PORT || 3000;
server.listen(port, () => console.log(`Server running at http://localhost:${port}`));

四.運行伺服器

#在指令行中輸入以下命令啟動伺服器：

node server.js

在瀏覽器中開啟http://localhost:3000 ，就能看到我們的靜態資源伺服器正在運作了。

如果一切正常，當我們在瀏覽器中造訪 http://localhost:3000/ ，它將會渲染我們在index.html中寫的內容。

五.處理不同的靜態檔案請求

除了首頁回應之外，我們還需要處理其他靜態檔案的請求，例如CSS，JS和映像檔等，這可以透過在伺服器中新增對應的靜態資源目錄，來實作請求不同類型的靜態檔案。在這裡，我們建立了一個名為public的目錄，用於儲存靜態文件，以下程式碼會將此目錄的內容映射到伺服器的根目錄下：

const server = http.createServer((req, res) => {
  if (req.url === '/') {
    // 处理首页请求省略
  } else {
    // 处理其他静态文件请求
    const filePath = path.join(__dirname, 'public', req.url);
    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.writeHead(404);
        return res.end('404 not found');
      }

      if (req.url.endsWith('.css')) {
        res.writeHead(200, { 'content-type': 'text/css' });
      }

      if (req.url.endsWith('.js')) {
        res.writeHead(200, { 'content-type': 'application/javascript' });
      }

      if (req.url.endsWith('.png')) {
        res.writeHead(200, { 'content-type': 'image/png' });
      }

      res.end(data);
    });
  }
});

六.總結

#使用Node.js建立靜態資源伺服器簡單方便，透過使用內建的http模組，可以輕鬆地建立一個基本的伺服器來處理靜態資源的請求，例如HTML，CSS，JS和映像等。在往後的開發過程中，我們可以根據自己的需要，選擇一個適合的伺服器框架來實現更有效率且功能強大的伺服器。

以上是nodejs搭建靜態資源伺服器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript node.js css html public 并发 JS http

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript隱藏連結下一篇：javascript隱藏連結

看更多