如何快速搭建静态资源服务器
2017-01-17 10:45
387 查看
前端开发中,经常遇到有些场景需要用到服务器环境,例如AngularJS中的路由,或者是模拟ajax获取数据等需求时,这个时候并不需要考虑到服务端逻辑,只是搭建简单的静态资源服务,因此解决方法有很多,下面介绍几种简单快捷的常用方式:
一:使用http-server
http-server基于Node,所以得先确保有Node环境。
一:使用http-server
http-server基于Node,所以得先确保有Node环境。
1. 安装http-server
2. 启动
上面的命令表示在本机的9999端口上启动一个静态服务器,应用根目录为执行上面命令的所在目录
优点:简单,快速
缺点:命令行一关,服务就中止了。每次开机都要再启一次,麻烦
二:使用ApmServer/XAMPP
两者都是PHP的集成环境,这里以ApmServer为例(只有用过ApmServer)。
首先在网上下载ApmServer的压缩包(免安装),解压到一个盘的根目录(建议是根目录,因为路径有空格可能造成一些不必要的麻烦),下面是其解压后的目录结构:
双击APMServ.exe启动应用,可以看到下面的界面:
因为我们只需要一个静态服务器,所以把MySQL和SSL等选项都去掉,然后点击“启动APMServ”就完成我们的静态服务器了。这时要部署应用,只需要把文件放到apmServer/www/htdocs目录下面就可以访问到了。这里想说的是其虚拟目录配置,即映射硬盘上任一目录作为服务器的一个子目录。有了虚拟目录,我们就可以定制出多个不同的服务器了。
打开虚拟目录的配置界面,填写虚拟目录名称(英文),中文备注,选择网页根目录,然后保存虚拟目录,重启ApmServer后,就可以访问我们的虚拟目录了。
优点:简单,快速,集成PHP开发环境(PHP,MySQL等),支持虚拟目录等许多实用功能
缺点:用着用着就启动不了
三:使用Tomcat
Tomcat是Java应用服务器,当然也可以用来作静态服务器。但Tomcat默认的一些配置不太友好,所以我们要定制一些配置。首先就是让Tomcat支持显示目录文件。打开Tomcat/conf/web.xml,修改listings为true。
Tomcat中虚拟目录配置是位于Tomcat/conf/server.xml。在在host标签中增加如下格式的配置:
如:<Context path=”/test” docBase=”G:/Test” crossContext=”true” />
完成上面配置后,双击Tomcat/bin/startup.bat即可以启动Tomcate服务器,在浏览器中就可以正常访问到刚我们配好的目录了。
优点:功能强大
缺点:配置复杂
四:使用static-server
使用时只需要在项目目录下指定该项目的入口文件即可:
下面是一些常用的选项:
-p, --port
详见:https://www.npmjs.com/package/static-server
五:使用Python
如果你安装了Python,那这个方法可能最简便了,只需要在该目录下执行命令:
这样就启动了一个静态web服务器,此时项目的根目录为执行命令时所在目录,默认端口是8000,如果需要指定端口,则加上端口号启动:
如果你安装Ruby,Ruby也提供了一个很简便的方式:
几乎所有的web应用在最终部署到
下载,解压,运行nginx.exe,在浏览器输入
Welcome to nginx!
则说明
下面是
如果你的需求只是实现静态资源服务,那么只需要如下简单配置即可:root代表项目的根目录,index代表默认的入口文件。
这时候访问 http://localhost/index.html 就OK了。
如果你的需求只是想模拟
安装:
在任意文件夹下创建一个
在该目录下启动
可以看到
就会看到当前
访问http://localhost:3000/comments/1 ,则可以获取到comments下id为1的json数据:
很神奇是吧,有了数据之后,可以让
假如我们需要指定静态资源文件夹的位置,则可以通过指定目录来启动
这样,访问http://localhost:3000/index.html 就可以成功加载到json数据了。
API操作等,更多的功能可以到json-server项目文档查看。
例如:HBuilder、WebStorm
小结:
如果没有特别要求,使用http-server基本就能满足我们前端对服务器的要求了
一:使用http-server
http-server基于Node,所以得先确保有Node环境。
一:使用http-server
http-server基于Node,所以得先确保有Node环境。
1. 安装http-server
1 | npm install http-server -g |
1 | http-server -a 127.0.0.1 -p 9999 |
优点:简单,快速
缺点:命令行一关,服务就中止了。每次开机都要再启一次,麻烦
二:使用ApmServer/XAMPP
两者都是PHP的集成环境,这里以ApmServer为例(只有用过ApmServer)。
首先在网上下载ApmServer的压缩包(免安装),解压到一个盘的根目录(建议是根目录,因为路径有空格可能造成一些不必要的麻烦),下面是其解压后的目录结构:
双击APMServ.exe启动应用,可以看到下面的界面:
因为我们只需要一个静态服务器,所以把MySQL和SSL等选项都去掉,然后点击“启动APMServ”就完成我们的静态服务器了。这时要部署应用,只需要把文件放到apmServer/www/htdocs目录下面就可以访问到了。这里想说的是其虚拟目录配置,即映射硬盘上任一目录作为服务器的一个子目录。有了虚拟目录,我们就可以定制出多个不同的服务器了。
打开虚拟目录的配置界面,填写虚拟目录名称(英文),中文备注,选择网页根目录,然后保存虚拟目录,重启ApmServer后,就可以访问我们的虚拟目录了。
优点:简单,快速,集成PHP开发环境(PHP,MySQL等),支持虚拟目录等许多实用功能
缺点:用着用着就启动不了
三:使用Tomcat
Tomcat是Java应用服务器,当然也可以用来作静态服务器。但Tomcat默认的一些配置不太友好,所以我们要定制一些配置。首先就是让Tomcat支持显示目录文件。打开Tomcat/conf/web.xml,修改listings为true。
Tomcat中虚拟目录配置是位于Tomcat/conf/server.xml。在在host标签中增加如下格式的配置:
1 | <Context path="虚拟目录名" docBase="文件所在根目录" crossContext="true" /> |
完成上面配置后,双击Tomcat/bin/startup.bat即可以启动Tomcate服务器,在浏览器中就可以正常访问到刚我们配好的目录了。
优点:功能强大
缺点:配置复杂
四:使用static-server
static-server很类似
http-server,也是基于node,安装和使用方法很相似:
npm install -g static-server
使用时只需要在项目目录下指定该项目的入口文件即可:
static-server -i index.html
下面是一些常用的选项:
-p, --port
详见:https://www.npmjs.com/package/static-server
五:使用Python
如果你安装了Python,那这个方法可能最简便了,只需要在该目录下执行命令:
python -m SimpleHTTPServer
这样就启动了一个静态web服务器,此时项目的根目录为执行命令时所在目录,默认端口是8000,如果需要指定端口,则加上端口号启动:
python -m SimpleHTTPServer 8080
使用Ruby
如果你安装Ruby,Ruby也提供了一个很简便的方式:ruby -run -e httpd . -p 8888
使用Nginx
几乎所有的web应用在最终部署到Linux上时都会用到
Nginx做反向代理服务器,所以很有必要会用
Nginx。
下载,解压,运行nginx.exe,在浏览器输入
localhost或
127.0.0.1,如果出现
Welcome to nginx!
则说明
Nginx已经成功安装。
下面是
Nginx常用到的命令:
nginx -s reload // 重新加载nginx配置 nginx -s stop
如果你的需求只是实现静态资源服务,那么只需要如下简单配置即可:root代表项目的根目录,index代表默认的入口文件。
server { listen 80; server_name localhost; location / { root E:\Work\Workspace; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
这时候访问 http://localhost/index.html 就OK了。
使用json-server
如果你的需求只是想模拟ajax从后台获取数据,因为通常一个项目中前端开发和后台几乎是同时进行的,开发初期往往需要前端自己构造假数据来渲染页面,谷歌浏览器不在服务端环境下调试js,则会被视为跨域,从而导致无法获取本地
json数据,要不就使用火狐浏览器,较好的解决方法是快速搭建一个JSON服务器,这个时候json-server就是个不错的选择了。
安装:
npm install -g json-server
在任意文件夹下创建一个
json文件:如data.json:
{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 }, { "id": 2, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } }
在该目录下启动
json-server来监听这个文件:
json-server --watch data.json # 或者指定端口启动启动 json-server --watch data.json --port 3004
可以看到
json-server默认创建了三个请求资源,分别对应了
data.json中的
key值,很方便,这个时候浏览器访问localhostL3000/db
就会看到当前
data.json的数据了。
访问http://localhost:3000/comments/1 ,则可以获取到comments下id为1的json数据:
很神奇是吧,有了数据之后,可以让
json-server也作为静态资源的服务器,这样就没有跨域问题了。
json-server默认的静态资源(HTML,CSS,JS等)是在与json数据文件同级目录下的public文件夹中,你只需要创建一个名为
public的文件夹,把静态资源放到
public目录下,然后直接运行以下命令启动即可:
json-server data.json
假如我们需要指定静态资源文件夹的位置,则可以通过指定目录来启动
json-server即可,如指定静态资源为json数据同级目录的source文件夹下,则:
json-server data.json --static ./source
这样,访问http://localhost:3000/index.html 就可以成功加载到json数据了。
json-server还有很多更强大的功能,如支持模拟REST
API操作等,更多的功能可以到json-server项目文档查看。
使用一些IDE
例如:HBuilder、WebStorm小结:
如果没有特别要求,使用http-server基本就能满足我们前端对服务器的要求了
相关文章推荐
- 在Linux下如何快速搭建安全的FTP服务器
- Nginx入门指南,快速搭建静态文件服务器和代理服务器
- 使用Node.js搭建静态资源服务器
- Nginx入门指南,快速搭建静态文件服务器和代理服务器
- mac端如何快速搭建一个web服务器
- 用Nodejs搭建服务器访问html、css、JS等静态资源文件
- 使用Node.js搭建静态资源服务器
- 快速搭建静态服务器
- 全栈工程师-静态资源服务器搭建-0809
- 如何用Baas快速在腾讯云上开发小程序-系列1:搭建API & WEB WebSocket 服务器
- 如何快速建立一个测试资源Web服务器及异步获取资源(Unity3D)
- 阿里云服务器nginx下如何添加伪静态以及配置静态资源地址
- Node学习入门之一:静态资源服务器搭建
- 如何快速搭建一个服务器
- 转:nginx入门指南,快速搭建静态文件服务器和代理服务器
- 如何用Baas快速在腾讯云上开发小程序-系列1:搭建API & WEB WebSocket 服务器
- 01如何使用nodejs快速搭建web服务器
- Win10如何搭建FTP服务器以实现快速传输文件?
- 前后端分离,如何使用Ucloud当作静态资源服务器