With the development of the Internet, Web development has become a very popular industry around the world. For developers, in order to develop and publish code quickly and effectively, we need a static resource server to help us Managing and processing static resources, especially in the development model where the front and back ends are separated, is used more frequently. Node.js has become a very popular development language since its release, and its http module is particularly suitable for building static resources. Resource server. In this article, we will introduce how to use Node.js to build a lightweight static resource server.
1. Install Node
First we need to install Node.js, which is a server-side programming language based on JavaScript and can be downloaded and installed on the official website.
2. Initialize the project
We need to create a folder locally and initialize a Node project for it.
Enter the following command on the command line:
mkdir node-static-server cd node-static-server npm init
After entering the above command, we will be prompted to build the initialization parameters of this project. You can also press Enter to use the default value.
Create a file named index.html in the project and add a simple html tag in it, as shown below:
<!DOCTYPE html> <html> <head></head> <body> <h1>Hello, World!</h1> </body> </html>
3. Create the server
In Create a file named server.js in the project and use the built-in http module of Node.js to create a web server. The code is as follows:
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}`));
4. Run the server
In the command Enter the following command in the line to start the server:
node server.js
Open http://localhost:3000 in the browser, and you can see that our static resource server is running.
If everything goes well, when we access http://localhost:3000/ in the browser, it will render the content we wrote in index.html.
5. Handling different static file requests
In addition to the home page response, we also need to handle requests for other static files, such as CSS, JS and image files, etc. This can be done by Add the corresponding static resource directory to request different types of static files. Here, we created a directory named public to store static files. The following code will map the contents of this directory to the root directory of the server:
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); }); } });
6. Summary
It is simple and convenient to build a static resource server using Node.js. By using the built-in http module, you can easily create a basic server to handle requests for static resources, such as HTML, CSS, JS and images, etc. In the future development process, we can choose a suitable server framework according to our own needs to achieve a more efficient and powerful server.
The above is the detailed content of Nodejs builds static resource server. For more information, please follow other related articles on the PHP Chinese website!