web前端經常使用的五種方式搭建本地靜態html頁面服務器

時間  2021-03-31
標籤 css html 前端 node nginx git github web express npm 欄目 HTML 简体版
原文   原文鏈接

方式一：live-server

live-server是一款npm工具，能夠在項目目錄啓動一個node服務，而後直接在瀏覽器中預覽，而且自動全局監聽實時更新。css

兩種安裝方式：html

全局安裝 npm i live-server -g
本地安裝  npm i live-server --save-dev

直接使用live-server

首先在項目下npm初始化:npm init -y;前端

而後能夠選擇全局安裝或者本地安裝live-server，而後在package.json的scripts屬性中添加以下代碼：node

"scripts": {
    "server": "live-server ./ --port=8181 --host=localhost --proxy=/api:http://www.abc.com/api/"
}

中包括了代理設置proxy。nginx

而後npm run server執行下就會自動打開當前工程，默認指向index.html頁面。git

使用node

首先本地安裝live-server，執行以下指令：github

npm i live-server --save-dev

而後在該項目下新建一個build.js，代碼以下：web

var liveServer = require("live-server");
var params = {
    port: 8181,
    host: "localhost",
    open: true,
    file: "index.html", 
    wait: 1000,
    logLevel: 2,  
    proxy: [['/api','http://www.abc.com/api/']]
};
liveServer.start(params);

最後在package.json的scripts下添加以下代碼：express

"scripts": {
   "dev": "node build.js"
}

最後執行npm run dev就啓動了本地靜態頁面，路徑便是：http://localhost:8081/npm

詳細參考地址：https://www.npmjs.com/package/live-server

方式二：http-server

全局安裝http-server

npm i -g http-server

用法：

http-server [path] [options]

其中的path默認指向工程路徑下的./public，若是不存在那麼使用./。

options就是常見的配置，好比端口、代理地址等，經常使用配置：

  • -p or --port Port to use (defaults to 8080). It will also read from process.env.PORT. （設置端口）
  • -a Address to use (defaults to 0.0.0.0) （設置訪問地址）
  • -P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com（設置代理地址）
  • -o [path] Open browser window after starting the server. Optionally provide a URL path to open. e.g.: -o /other/dir/ （默認打開瀏覽器）

cmd進入靜態目錄工程，可執行以下操做：

http-server ./ -o --port 8085 --proxy http://192.168.11.120:8888/

固然該條命令也能夠縮寫成以下：

hs ./ -o -p 8085 -P http://192.168.11.120:8888/

咱們也能夠初始化package.json，執行npm init -y，而後在package.json中的scripts字段中添加以下代碼：

"scripts": {
    "dev": "http-server  ./ -o --port 8089 --proxy http://192.168.11.120:8888/"
}

最後執行npm run dev 也是同樣的，使用http-server主要缺點是不能使瀏覽器自動刷新。

 官網github地址：https://github.com/http-party/http-server

方式三：express搭建

使用express簡單搭建

使用express搭建前端靜態頁面環境，在工程下新建build文件夾，建一個dev.js(開發環境啓動文件)以及index.js（配置文件、如端口）。

咱們只須要安裝express以及http-proxy-middleware便可，以下：

npm i express http-proxy-middleware -D

index.js代碼：

module.exports = {
    port: 8081,
    host: 'localhost',
 proxyTable: [{
        api: '/api',
        target: 'http://192.168.1.112:8081/' }]
}

dev.js代碼以下：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const {port = 8080,proxyTable = []} = require('./index.js');

const app = express();
app.use('/', express.static('./')); // 設置靜態資源訪問路徑
proxyTable.forEach((item) => app.use(createProxyMiddleware(item.api, {
    target: item.target, // 目標服務器 host
    changeOrigin: true, // // 默認false，是否須要改變原始主機頭爲目標URL
    ws: true // 是否代理websockets
})))

app.listen(port,() => {
    console.log(`listen：${port}`);
})

在package.json中配置啓動快捷鍵，以下：

"scripts": {
    "dev": "node config/dev.js"
}

運行npm run dev 便可啓動本地服務器，本地運行localhost:8081便可（默認運行工程下的靜態文件index.html），若是須要方法其餘靜態頁面添加相應路徑便可。

其中http-proxy-middleware實際就是將http-proxy封裝，使用起來更加方便簡單,老版本http-proxy-middleware參考：http-proxy-middleware使用方法和實現原理（源碼解讀）,其中新版本的http-proxy-middleware使用方式參考github

使用browser-sync實現熱更新優化

代碼以下：

const express = require('express');
const path = require('path');
const timeout = require('connect-timeout');
const { createProxyMiddleware } = require('http-proxy-middleware');
const { port = 8080, proxyTable = [], host = 'localhost' } = require('./index.js');

const app = express();
const pathname = path.resolve(__dirname, '../');
const bs = require('browser-sync').create('server');

app.use(timeout(60 * 1e3));
app.use((req, res, next) => {
    if (!req.timedout) next();
});
app.use('/', express.static(`${pathname}`)); // 設置靜態資源訪問路徑
proxyTable.forEach((item) => app.use(createProxyMiddleware(item.api, {
    target: item.target, // 目標服務器 host
    changeOrigin: true, // // 默認false，是否須要改變原始主機頭爲目標URL
    ws: true // 是否代理websockets
})))

app.listen(port, () => {
    bs.init({ // 開始一個Browsersync代理
        proxy: `http://${host}:${port}`,
        notify: true, // 通知
        port: 8085, 
        // files: ['**'] // files 必須帶上，不帶上修改文件不會刷新；能夠指定文件類型、文件等方式
        files: [`${pathname}/resources/**/*.html`,`${pathname}/index.html`,`${pathname}/public/**/*.js`,`${pathname}/public/**/*.css`]
    }) 
})

固然也能夠用watch方法監聽文件的變化，更改代碼以下：

const express = require('express');
const path = require('path');
const timeout = require('connect-timeout');
const { createProxyMiddleware } = require('http-proxy-middleware');
const { port = 8080, hotUpdate = false, proxyTable = [], host = 'localhost' } = require('./index.js');

const app = express();
const pathname = path.resolve(__dirname, '../');
const bs = require('browser-sync').create('server');

app.use(timeout(60 * 1e3));
app.use((req, res, next) => {
    if (!req.timedout) next();
});
app.use('/', express.static(`${pathname}`)); // 設置靜態資源訪問路徑
proxyTable.forEach((item) => app.use(createProxyMiddleware(item.api, {
    target: item.target, // 目標服務器 host
    changeOrigin: true, // // 默認false，是否須要改變原始主機頭爲目標URL
    ws: true // 是否代理websockets
})))

bs.watch(`${pathname}/resources/**/*.html`).on("change", bs.reload);
bs.watch(`${pathname}/index.html`).on("change", bs.reload);
bs.watch(`${pathname}/public/**/*.js`, function(event, file) {
    if (event === 'change') {
        bs.reload('*.js')
    }
})
bs.watch(`${pathname}/public/**/*.css`, function(event, file) {
    if (event === 'change') {
        bs.reload('*.css')
    }
})

app.listen(port, () => {
    bs.init({ // 開始一個Browsersync代理
        proxy: `http://${host}:${port}`,
        notify: true, // 通知
        port: 8085
    }) 
})
注：Browsersync讓瀏覽器實時、快速響應文件變化並自動刷新， Browsersync說明文檔

方式四：使用node內置模塊http啓動服務

const http = require('http');
const fs = require('fs');
const path = require('path');
const httpProxy = require('http-proxy');
const childProcess = require('child_process'); // 可自動打開瀏覽器
const filepath = path.resolve(__dirname,'./');
const proxy = httpProxy.createProxyServer(); // 建立代理服務器
const {proxyTable = []} = require('./config/index.js');

http.createServer(function(req,res){
    fs.readFile(filepath + req.url,function(err,data) {
        proxyTable.forEach((item) => {
            if(req.url.indexOf(item.api) !== -1) { // 匹配上接口代理
                proxy.web(req,res,{target: item.target});
                proxy.on('error',function(e) { // 代理失敗處理
                    console.log(e);
                })
            } else {
                if(err) {
                    res.writeHeader(404,{'content-type': 'text/html;charset="utf-8"'});
                    res.write('<h1>404錯誤</h1><p>你訪問的頁面/內容不存在</p>');
                    res.end();
                } else {
                    res.write(data);
                    res.end();
                }
            }
        })
        
    })
}).listen(8080,() => {
    console.log('服務啓動了');
});

childProcess.exec('start http://localhost:8080/index.html');

而後在地址欄輸入localhost:8080/index.html （其中個人index.html就放在根路徑，根據具體路徑填寫）

換一種方式：

const http = require('http');
const fs = require('fs');
const path = require('path');
const httpProxy = require('http-proxy');
const childProcess = require('child_process'); // 可自動打開瀏覽器
const filepath = path.resolve(__dirname,'./');
const proxy = httpProxy.createProxyServer(); // 建立代理服務器
const {proxyTable = []} = require('./config/index.js');
const server = new http.Server();

server.on('request',function(req,res){
    fs.readFile(filepath + req.url,function(err,data) {
        proxyTable.forEach((item) => {
            if(req.url.indexOf(item.api) !== -1) { // 匹配上接口代理
                proxy.web(req,res,{target: item.target});
                proxy.on('error',function(e) { // 代理失敗處理
                    console.log(e);
                })
            } else {
                if(err) {
                    res.writeHeader(404,{'content-type': 'text/html;charset="utf-8"'});
                    res.write('<h1>404錯誤</h1><p>你訪問的頁面/內容不存在</p>');
                    res.end();
                } else {
                    res.write(data);
                    res.end();
                }
            }
        })
        
    })
})

server.listen(8080,() => {
    console.log('服務啓動了');
});

childProcess.exec('start http://localhost:8080/index.html');

方式五：Nginx配置

conf主要的配置代碼：

http {
    # nginx負載均衡配置
    upstream dynamic_balance {
        #ip_hash;
        server 192.168.100.123: 8081;
    }
    # 省略其餘
    server {
        listen 80;
        server_name localhost;
        #訪問工程路徑
        root website;
        index index.html index.htm;
        
        #轉發把原http請求的Header中的Host字段也放到轉發的請求
        proxy_set_header Host $host;
        #獲取用戶真實IP
        proxy_set_header X - real - ip $remote_addr;
        proxy_set_header X - Forwarded - For $proxy_add_x_forwarded_for;
        
        #接口轉發
        location /base/ {
            proxy_pass http: //dynamic_balance; 
        }
        
        #啓用history模式（ 什麼請求都只返回index.html）
        location / {
            try_files $uri $uri / /index.html;
        }
    }
}

參考

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程