构建http服务的几种方式

忘是亡心i 2022-03-28 02:10 426阅读 0赞

做前端开发，页面可以通过浏览器打开访问，但是异步请求这里，直接通过浏览器就不行了，即便是访问的本地json资源，ajax也无能为力。另外，如angularjs,vue涉及到路由的地方，就必须使用一个简单的http服务。这里介绍构建http的几种方式：

1.  apache(httpd)
2.  tomcat
3.  nginx
4.  nodejs(http-server)
5.  python(命令行开启http)

第一种对于php开发来说是最熟悉不过的，通常wamp或者lamp就是windows(linux)+apache+mysql+php全家桶的缩写，另外有的也使用nginx代替apache服务。所以有时候也叫wnmp或者lnmp。apache启动，默认端口是80，所以访问的时候，一般只需要输入ip就可以了。

第二种tomcat是java开发中常用的一种servlet容器，对于前端页面来说，似乎有点重量级。

第三种nginx是最流行的http服务，他不仅可以做http服务，还可以做负载均衡和反向代理，在有web项目的生产环境几乎是必备的。默认页面在nginx安装目录的html文件夹下。

这里稍微说一下，在windows下的启动方式。nginx在linux下的启动方式是直接输入nginx命令就可以，并且运行完了，可以退出到命令行，但是在windows下，他不会退出命令行。即使按下ctrl+c也不会退出。退出dos窗口也没用，只能在任务管理器里面关闭nginx进程，或者重开dos命令行，然后运行nginx -s stop。

这里介绍一种启动nginx的方式。在nginx安装目录，直接运行start nginx。这样nginx启动会一闪而过，这样就不会霸占这个窗口，想停掉也可以直接通过nginx -s stop。

![2019010911233020.gif][]

因为nginx启动之后，有两个进程在运行，一个工作进程，一个守护进程。所以在任务管理器里面关闭，需要结束两次，而且如果停止的进程不对，还得多结束一次。

另外，关闭nginx也可以通过taskkill /f /t /im nginx.exe命令。如下所示：

![20190109112426494.gif][]

关于nginx的部分就介绍到这里。

第四种是nodejs提供的http-server服务，他可以通过npm install -g http-server的方式安装，安装完成之后，就可以在任意位置的命令行下运行。如果需要指定端口，可以通过http-server -p 9000来指定。

最后介绍通过python命令行的方式启动http服务，这里python版本不同，会有两种方式，python2运行python -m SimpleHTTPServer，在python3下是python -m http.server

python2

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

python3

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

这些常用的启动http服务的方式，都有各自的特点，如果说简单，我觉着命令下启动一个命令的方式最简单如nodejs的http-server或者python的python -m http.server。这些可以临时开启一下，然后ctrl+c退出，http服务也随之停止了。

[2019010911233020.gif]: /images/20220328/f354a9a9a3bd46baaf77fcac1bb4bbb7.png
[20190109112426494.gif]: /images/20220328/05261700942a4aa182cc11fa325c548f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220328/1c5d94f36cee4d8383f87e95e4b5cb99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20220328/f2314522313f45c4ae9a494568fd51d7.png