node部署静态页面上线

静态页面上线可以采用 nginx, tomcat或者node ,我们这里介绍下node部署静态页面

这里采用最简单的上线方式，我们就不用node + express + ejs ，直接采用node + html

1.首先确定好安装了 node 如果没有安装，请下载 https://nodejs.org/zh-cn/ 建议下载LTS版本

2.新建一个目录，比如 test 文件夹，然后在当前文件夹下进入命令行窗口 npm init 初始化npm,此处一路回车，这时会生成 package.json的一个文件

3.然后我们需要在 test 的根目录下创建一个 server.js

  • server.js
"use strict";

//加载所需要的模块

var http = require('http');

var url = require('url');

var fs = require('fs');

var path = require('path');

var cp = require('child_process');

//创建服务

var httpServer = http.createServer(processRequest);

// 这是端口号

var port = 80;

//指定一个监听的接口

httpServer.listen(port, function() {

    console.log(`app is running at port:${port}`);

    console.log(`url: http://localhost:${port}`);

    cp.exec(`explorer http://localhost:${port}`, function () {

    });

});

//响应请求的函数

function processRequest (request, response) {

    //mime类型

    var mime = {

        "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"

    };

    //request里面切出标识符字符串

    var requestUrl = request.url;

    //url模块的parse方法 接受一个字符串，返回一个url对象,切出来路径

    var pathName = url.parse(requestUrl).pathname;

    //对路径解码，防止中文乱码

    var pathName = decodeURI(pathName);

    //解决301重定向问题，如果pathname没以/结尾，并且没有扩展名

    if (!pathName.endsWith('/') && path.extname(pathName) === '') {

        pathName += '/';

        var redirect = "http://" + request.headers.host + pathName;

        response.writeHead(301, {

            location: redirect

        });

        //response.end方法用来回应完成后关闭本次对话，也可以写入HTTP回应的具体内容。

        response.end();

    }

    //获取资源文件的绝对路径

    var filePath = path.resolve(__dirname + pathName);

    console.log(filePath);

    //获取对应文件的文档类型

    //我们通过path.extname来获取文件的后缀名。由于extname返回值包含”.”，所以通过slice方法来剔除掉”.”，

    //对于没有后缀名的文件，我们一律认为是unknown。

    var ext = path.extname(pathName);

    ext = ext ? ext.slice(1) : 'unknown';

    //未知的类型一律用"text/plain"类型

    var contentType = mime[ext] || "text/plain";

    fs.stat(filePath, (err, stats) => {

        if (err) {

            response.writeHead(404, { "content-type": "text/html" });

            response.end("<h1>404 Not Found</h1>");

        }

        //没出错 并且文件存在

        if (!err && stats.isFile()) {

            readFile(filePath, contentType);

        }

        //如果路径是目录

        if (!err && stats.isDirectory()) {

            var html = "<head><meta charset = 'utf-8'/></head><body><ul>";

            //读取该路径下文件

            fs.readdir(filePath, (err, files) => {

                if (err) {

                    console.log("读取路径失败！");

                } else {

                    //做成一个链接表，方便用户访问

                    var flag = false;

                    for (var file of files) {

                        //如果在目录下找到index.html，直接读取这个文件

                        if (file === "index.html") {

                            readFile(filePath + (filePath[filePath.length-1]=='/' ? '' : '/') + 'index.html', "text/html");

                            flag = true;

                            break;

                        };

                        html += `<li><a href='${file}'>${file}</a></li>`;

                    }

                    if(!flag) {

                        html += '</ul></body>';

                        response.writeHead(200, { "content-type": "text/html" });

                        response.end(html);

                    }

                }

            });

        }

        //读取文件的函数

        function readFile(filePath, contentType){

            response.writeHead(200, { "content-type": contentType });

            //建立流对象，读文件

            var stream = fs.createReadStream(filePath);

            //错误处理

            stream.on('error', function() {

                response.writeHead(500, { "content-type": contentType });

                response.end("<h1>500 Server Error</h1>");

            });

            //读取文件

            stream.pipe(response);

        }

    });

}

4.这是运行node server.js 便启动了服务，我们可以通过本地 localhost 进行访问，也可上传到linux,通过自己域名访问

node部署静态页面；node上线静态页面的更多相关文章

  1. 【Node.js】利用node.js搭建服务器并访问静态网页

    node.js是一门服务端的语言,下面讲讲如何利用node.js提供给我们的api来搭建服务器,并且访问静态网页 项目结构如下 ------------------------------------ ...

  2. nodejs之获取客户端真实的ip地址+动态页面中引用静态路径下的文件及图片等内容

    1.nodejs获取客户端真实的IP地址: 在一般的管理网站中,尝尝会需要将用户的一些操作记录下来,并记住是哪个用户进行操作的,这时需要用户的ip地址,但是往往当这些应用部署在服务器上后,都使用了ng ...

  3. [转]把动态页面.aspx 生成静态页面.html

    本文转自:http://blog.csdn.net/csb5201314/article/details/5391688 如果要把主页Index.aspx 生成静态页面 Index.html后输出会提 ...

  4. 页面静态化3 --- 使用PHP页面缓存机制来完成页面静态化（下）操作一个案例(新闻管理系统)

    案例需求: 使用PHP缓存机制完成新闻管理系统的页面静态化数据库表 ecs_article (新闻表)因为新闻这些信息,并不是对实时性要求高,本身这个新闻比较稳定,内容也比较固定,所以我们考虑: 当第 ...

  5. 转：php页面静态化之真静态

    之前的缓存和现在所说的页面静态化都是为网站提速的,如果是访问量小的小型网站可能不需要但是如果网站规模或访问量很大,那么页面静态化和缓存就会体现出各自的价值了下面先来了解下页面静态化的分类 页面静态化的 ...

  6. Web项目中用模板Jsp页面引入所有静态样式脚本文件（js,css等）

    这样的好处是不需要再每个页面中都添加太多的外链接(不会减少请求数量),但对开发会更快捷,如果更改这些文件的位置或名称,只需要更改模板文件,不需要一个一个页面复制粘贴:同时可以为不同jsp页面组创建不同 ...

  7. PHP 404页面/如何设置404页面/URL静态化/URL伪静态化

    php中如何设置404页面及其他错误页面 首先在项目根目录下新建文件,文件名为" .htaccess " 在该文件中写入一下配置项: ErrorDocument 404 /404. ...

  8. thinkphp3.2中开启静态缓存后对404页面的处理方法

    静态缓存很实用但是有时有些不需要静态缓存,如404页面,第一次访问返回404页面并缓存,第二次换回的状态就是200,属于正常访问,虽然人眼可以看出是404页面,但是搜索引擎不会的,而是把这个页面当成正 ...

  9. dedecms--将静态页面转化为动态页面

    最近在用dedecms二次开发项目,需要对文章内容页设置权限,会员未登录不允许查看,这个需要先在后台设置将静态页面转化为动态页面 具体步骤: 1:将主页设置为动态浏览 2:进入后台→系统→SQL命令行 ...

随机推荐

  1. Java SSM框架之MyBatis3（七）MyBatis之参数取值

    在mybatis中,参数取值方式有两种:#{ } 和 ${ } 一.#{ } select * from student where name=#{name} 编译后执行的sql语句: select ...

  2. dialog 菜单

    dialog 菜单 # 默认将所有输出用 stderr 输出,不显示到屏幕 使用参数 --stdout 可将选择赋给变量 # 退出状态 0正确 1错误 窗体类型 --calendar # 日历 --c ...

  3. bug处理

    当提示405 method not allowed 时候,路由可能有问题,看看路由是get/post 是否合格

  4. Fiddler抓取HTTPS最全（强）攻略

    本文来自于柠檬班49期学员superman童鞋的学习笔记.希望对同样是测试萌新的你有帮助,如果觉得好,可以点个赞噢~ 对于想抓取HTTPS的测试初学者来说,常用的工具就是fiddler.可是在初学时, ...

  5. tensorboard遇到的坑

    <ul><li>No graph definition files were found.</li></ul> <p>启动命令 tensor ...

  6. 【干货】linux系统信息收集 ----检测是否被恶意程序执行了危险性命令

    这些实战完全可以练习以下命令,已经找到需要观察的交互点,真实工作的时候,把数据都导入到自己U盘或者工作站内. 在kali 或者centos下训练都一样,关于kali教学,这里推荐掌控安全团队的课程:掌 ...

  7. apiCloud app调用浏览器打开网页的方法

    在APP调用浏览器有两种方法:1.使用openApp2.使用openWin 两种方法调用浏览器后的效果有一点不同:1.使用openApp调用浏览器后,如果手机内有多个浏览器,会首先弹出选择浏览器的框2 ...

  8. django-xadmin后台开发

    先通过pip命令行安装django<=1.9版本 示例:pip install django==1.9 从https://github.com/sshwsfc/xadmin下载xadmin源码解 ...

  9. Java继承关系概述

    Java中只支持单继承关系 示例代码: package com.java1995; public class People { private String name; private int age ...

  10. CF1064B 【Equations of Mathematical Magic】

    题目要求解$a-(a\oplus x)-x=0$的解$x$的个数 移项得$a-x=a\oplus x$ $a$的二进制形式,应该是一个$01$串,异或的过程是不能影响到两个不同的位的,所以我们按位考虑 ...