如何启动一个本地静态服务器
时间:2022-05-04
本文章向大家介绍如何启动一个本地静态服务器,主要内容包括背景、2. 通过NodeJS的本地服务器、2.2 启动、其他、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
背景
学习前端开发,想要调试静态页面以及js,发现直接本地打开会有跨域异常。因此,需要启动一个静态服务器,只负责当前目录的文件路由。
目前尝试了两种方式。一种是Nginx
, 一种是NodeJS服务器。最终推荐NodeJS。
1. Nginx启动静态页面
1.1. 安装
下载安装Nginx,在Mac下安装如下:
brew install nginx
1.2 配置
Mac通过brew安装后的配置文件位于:/usr/local/etc/nginx
.
修改端口和文件目录:
server {
listen 8070;
server_name localhost;
charset utf-8;
#access_log logs/host.access.log main;
location / {
root /Users/ryan/workspace/learning/react;
index index.html index.htm;
}
....
}
1.3 启动和关闭
启动
nginx
关闭
nginx -s stop
启动后,打开浏览器,输入:localhost:8070/xxx.html即可。
2. 通过NodeJS的本地服务器
本次选用http-server
2.1 安装
npm install http-server -g
2.2 启动
http-server [path] [options]
Options
-p Port to use (defaults to 8080)
-a Address to use (defaults to 0.0.0.0)
-d Show directory listings (defaults to 'True')
-i Display autoIndex (defaults to 'True')
-g or --gzip When enabled (defaults to 'False') it will serve ./public/some-file.js.gz in place of ./public/some-file.js when a gzipped version of the file exists and the request accepts gzip encoding.
-e or --ext Default file extension if none supplied (defaults to 'html')
-s or --silent Suppress log messages from output
--cors Enable CORS via the Access-Control-Allow-Origin header
-o Open browser window after starting the server
-c Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for 10 seconds (defaults to '3600'). To disable caching, use -c-1.
-U or --utc Use UTC time format in log messages.
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com
-S or --ssl Enable https.
-C or --cert Path to ssl cert file (default: cert.pem).
-K or --key Path to ssl key file (default: key.pem).
-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *nDisallow: /')
-h or --help Print this list and exit.
其他
直接使用IDEA或者webstom的用浏览器打开功能就可以了。
- [Silverlight动画]转向行为 - 对象回避
- [mobile开发碎碎念]手机页面上显示PDF文件
- Windows Server 2008 R2 配置AD(Active Directory)域控制器
- ios开发基础知识 - 2
- ios开发基础知识 - 1
- 为UINavigationBar添加自定义背景
- UIScrollView无法响应touches的解决方法
- WCF技术剖析之十七:消息(Message)详解(下篇)
- UITextView自动滚动的解决方案
- MVC解决Json DataGrid返回的日期格式是/Date(20130450000365)
- Easyui 让DataGrid适应浏览器宽度
- Easyui 让Window弹出居中与最大化后居中
- WCF技术剖析之十六:数据契约的等效性和版本控制
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(13)-系统日志和异常的处理③
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法