静态资源服务器(部署前端项目)
前端开发中,经常遇到有些场景需要用到服务器环境,例如AngularJS中的路由,或者是模拟ajax获取数据等需求时,这个时候并不需要考虑到服务端逻辑,只是搭建简单的静态资源服务,因此解决方法有很多,下面介绍几种简单快捷的常用方式:
使用http-server
如果你安装了node,那么http-server
就是个不错的选择,只需要一行命令就可以快速启动。
安装:
npm install -g http-server
在项目根目录执行:
http-server -a 127.0.0.1 -p 8000
使用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
静态资源服务器(部署前端项目)相关推荐
- 前端项目部署,阿里云服务器部署前端项目,超详细
需求背景:作为一个前端,特别身处于中小公司时,对于部署也需要有所了解.本次就介绍前端基础的项目部署.本次使用的是阿里云服务器进行的部署 部署核心步骤 1.准备打包好的前端代码(dist包)或者是一个h ...
- 什么是静态资源服务器?
什么是静态资源服务器 我们无论做什么项目,都会有一些页面中需要显示的静态资源,例如图片,视频,文档等 我们一般会创建一个单独的项目,这个项目中保存静态资源 其他项目可以通过我们保存资源的路径访问 使用 ...
- win10 nginx部署前端项目(静态资源服务器和HTML)
win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details ...
- 一文搞懂使用Nginx服务器部署前端Web项目
1 Nginx简介与安装 概要 Nginx 简介 Nginx 架构说明 Nginx 基础配置与使用 1.1 Nginx 简介 Nginx是一个高性能WEB服务器,除它之外Apache.Tomcat.J ...
- win10 nginx部署静态资源服务器和HTML
win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details ...
- Windows服务器部署前端vue项目
阿里云Windows服务器部署前端vue项目 准备工作 下载node.js(略)http://nodejs.cn/download/ 下载Nginx http://nginx.org/en/downl ...
- 最简单的静态资源服务器(超级详细)
提示:本文有参考其他前端部署相关资源,侵权请联系作者删除 目录 一.前言 二.基础知识 三.入手部署最简单的静态资源服务器 1.手写最简单的静态资源服务器:响应字符串 2.手写简单静态资源服务器: 响 ...
- 部署前端项目的几种方案并探讨优缺点
前端部署作为大前端的知识体系的一部分,是不可或缺的.如果作为软件开发工程师的你开发了一个网站,却不会部署上线,还有请别人帮忙,那知识面确实要扩充下了.而且作为一名前端开发,避免不了与运维部署的同事调试 ...
- 入门Nginx之-静态资源服务器及跨域配置
简介 这里静态资源就以之前的一个项目文章地址为例,源码 Github,项目本身很简单,只是分别对第三方的服务端.自己的服务端发起请求. 不论是调用第三方服务端接口,还是自己的后端服务,如果跨域未在服务 ...
- nodejs从服务器返回静态文件,nodejs静态资源服务器
nodejs静态资源服务器 内容精选 换一换 WebSdk需要客户结合自身业务需求搭建web服务器并集成sdk使用.自行搭建一个web服务器,将wwwroot下的文件拷贝到web服务器的静态资源目录下 ...
最新文章
- 按需生产 ,我们准备好了吗?
- openstack运维实战系列(十)之nova指定compute节点和IP地址
- 正交多项式族(勒让德多项式跟切比雪夫多项式)理论
- 掉一根头发,搞定二叉排序(搜索)树
- BZOJ 1552/1506 [Cerc2007]robotic sort
- 【励志】公子龙:我的工作状态和存款进度
- 笔记本电脑与漂亮老婆
- Mac通过wifi连接 Android设备
- 知识图谱需要解决的问题
- 第七章:在Spark集群上使用文件中的数据加载成为graph并进行操作(3)
- IIS锁定是默认设置的 (overrideModeDefault=“Deny“)问题解决
- 币圈名利场,一场赤裸裸的狼人杀
- linux查看服务命令是什么,linux系统查看所有服务的命令
- python3之udp
- NSight统计数据的颜色,缩写意义是什么?来自NV Jeff Kiel 比较官方的解释!
- rpgmakermv存档修改网站_NexT 网站配置——雏形初成
- 微软鼠标测试软件,微软IO1.1鼠标使用测试_微软 IO1.1红光鲨鼠标(战队包黑色版)_键鼠评测-中关村在线...
- oracle打cve补丁,Oracle多个产品高危漏洞补丁安全预警
- 精益生产的本质是什么?如何快速学…
- 北京春运更智能:自助验票、微信查询