3分钟快速搭建nodejs本地服务器方法运行测试html/js

作者:后端茶话时间:2026-10-22 02:12:55浏览:172

本文介绍如何利用Node.js快速搭建本地服务器,解决前端项目依赖Tomcat部署的问题。通过安装Node.js并编写简单的http.js和mine.js脚本,即可在本地启动服务,直接访问HTML、JS等静态资源,无需复杂配置,适合前端开发者快速验证页面效果。

前端本地开发环境搭建痛点

对于前端开发者而言,在公司项目中于个人电脑搭建完整的运行环境往往是一项繁琐的工作。

  1. 首先,个人电脑的配置通常不如公司服务器高性能,
  2. 其次,在公司项目中搭建本地环境涉及众多缓存、资源包及数据库等限制条件,整个过程可能耗时一整天(除非对该公司环境非常熟悉)。

以我所在的公司为例,情况大致如此,我作为一名前端工程师,

目前前端项目基于Polymer框架,近期遇到的一个主要问题是:无法直接判断自己编写的页面是否存在问题。因为必须成功启动项目的Tomcat服务器才能查看效果,这些页面无法直接通过浏览器打开,否则会报资源解析错误。

因此我一直在思考,有没有办法让前端页面摆脱对Tomcat等部署服务器的依赖?

通过搜索,我了解到Node.js和Nginx,怀着对前端服务器技术的好奇心开始了实践。经过一个晚上的尝试并向多位同事请教,最终获得了一些启发。

Node.js本地服务器搭建步骤

具体操作步骤如下:

1、访问Node.js官网下载并安装包(http://nodejs.cn/)。安装完成后,系统会自动映射环境变量,无需手动配置。接着打开控制台,输入命令:node

若未出现报错信息,则表明运行成功。

2、随后,在与测试目录同级的目录下新建以下两个JS文件:

http.js(服务器脚本配置文件)


var PORT = 3000;//

var http = require('http');
var url=require('url');
var fs=require('fs');
var mine=require('./mine').types;//
var path=require('path');

var server = http.createServer(function (request, response) {
  var pathname = url.parse(request.url).pathname;
  var realPath = path.join("webapp", pathname);  //这里设置自己的文件名称;

  var ext = path.extname(realPath);
  ext = ext ? ext.slice(1) : 'unknown';
  fs.exists(realPath, function (exists) {
    if (!exists) {
      response.writeHead(404, {
        'Content-Type': 'text/plain'
      });

      response.write("This request URL " + pathname + " was not found on this server.");
      response.end();
    } else {
      fs.readFile(realPath, "binary", function (err, file) {
        if (err) {
          response.writeHead(500, {
            'Content-Type': 'text/plain'
          });
          response.end(err);
        } else {
          var contentType = mine[ext] || "text/plain";
          response.writeHead(200, {
            'Content-Type': contentType
          });
          response.write(file, "binary");
          response.end();
        }
      });
    }
  });
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");

mine.js(用于引入对应的文件类型映射)


exports.types = {
 "css": "text/css",
 "gif": "image/gif",
 "html": "text/html",
 "ico": "image/x-icon",
 "jpeg": "image/jpeg",
 "jpg": "image/jpeg",
 "js": "text/javascript",
 "json": "application/json",
 "pdf": "application/pdf",
 "png": "image/png",
 "svg": "image/svg+xml",
 "swf": "application/x-shockwave-flash",
 "tiff": "image/tiff",
 "txt": "text/plain",
 "wav": "audio/x-wav",
 "wma": "audio/x-ms-wma",
 "wmv": "video/x-ms-wmv",
 "xml": "text/xml"
};

创建上述两个JS文件成功后,打开http.js,在其中找到路径设置部分,将默认的“webapp”修改为你自己的项目名称。

友情提醒:(前提是这些文件与JS脚本在同一级目录。如果测试项目位于其他文件夹,可能需要设置绝对路径,这一点我尚未尝试。) 以下是我的目录结构及对应文件,图中三个箭头所指为必备部分,其他无需特别设置。

前端本地开发环境搭建痛点 

3、在控制台启动服务器以测试是否成功。

服务器启动与测试验证

请参考下图:

在项目所在目录下输入命令:node http.js

随后会提示端口启动成功,

接着直接输入需要测试的文件地址即可。例如我的测试地址为:http://localhost:3000/index.html

至此,全部部署完成!

前端本地开发环境搭建痛点

这里需要注意:一定要在端口号后面加上具体的文件路径才能成功运行。否则会因为http.js代码较为简单,暂时未直接映射根目录而报错(如直接访问http://localhost:3000)。

如果出现错误,请重新启动服务。

即:Node.js

当然,如果你有兴趣,可以尝试重写node.js脚本来完善它。

前端本地开发环境搭建痛点

最后说明:这两个JS文件均参考自博客和百度上一些技术大牛的分享,不过他们的教程对我而言不够清晰(本人水平有限,未能完全跟上思路),因此再次感谢这些博客大牛。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章