json-server的搭建及端口的反向代理
2021-10-20 10:33:22

本文首發(fā)于微信公眾號(hào)："算法與編程之美"，歡迎關(guān)注，及時(shí)了解更多此系列文章。

問(wèn)題描述

Json-server是一個(gè)前端非常方便的mockserver工具,通俗來(lái)說(shuō)，就是模擬服務(wù)端接口數(shù)據(jù)，一般用在前后端分離后，前端人員可以不依賴(lài)API開(kāi)發(fā)，而在本地搭建一個(gè)JSON服務(wù)，自己產(chǎn)生測(cè)試數(shù)據(jù),可以根據(jù)不同的后綴獲取到不同的數(shù)據(jù),使用json-server搭建的服務(wù)器端口只是一個(gè)簡(jiǎn)單的端口，為了更加方便還需要Nginx進(jìn)行反向代理，例如將localhost:3000/xxxx改成www.xxx.com這樣的形式。

解決方案

由于json-server需要通過(guò)Node對(duì)其進(jìn)行啟動(dòng)，所以首先要安裝Node。

一、全局安裝json-server：

二、安裝完成，查看版本

三、選擇一個(gè)目錄，新建立一個(gè)json文件，例如Student.json

{
"student": [
        {
"id": 1,
"desc": "Jack",
"completed": false
        },
        {
"id": 2,
"desc": "Ali",
"completed": false
        },
        {
"id": 3,
"desc": "Bob",
"completed": false
        }
    ]

}

四、啟動(dòng)json-server服務(wù)：在新建的json文件目錄，運(yùn)行命令：json-server + 文件名

五、得到的輸出結(jié)果

六、瀏覽器中輸入地址http://localhost:3000/cars就能看到輸出cars.json的內(nèi)容。

七、至此，就搭建了一個(gè)簡(jiǎn)單的本地測(cè)試服務(wù)器，json-server支持get,post等。

八、Nginx的反向代理，Nginx的安裝

九、打開(kāi)cmd窗口，cd到nginx的目錄下

十、配置Nginx，在Nginx文件下找到nginx.conf文件進(jìn)行修改

一是修改端口號(hào)為8080,一是指定網(wǎng)站的位置為f: ginx-1.12.2html

最后在cmd中啟動(dòng)Nginx，指令：nginx

五、訪問(wèn)默認(rèn)頁(yè)面

Nginx啟動(dòng)后，在瀏覽器中訪問(wèn)http://localhost:8080，可以看到默認(rèn)的歡迎頁(yè)面,到此，window下的nginx配置完成。