如何启动一个本地静态服务器

简介:

背景

学习前端开发,想要调试静态页面以及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的用浏览器打开功能就可以了。



本文转自Ryan.Miao博客园博客,原文链接:http://www.cnblogs.com/woshimrf/p/http-server-static.html,如需转载请自行联系原作者

相关文章
|
6月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
7月前
|
Windows
windows系统bat批处理 网络设置大全 设置静态、动态IP地址
windows系统bat批处理 网络设置大全 设置静态、动态IP地址
1454 2
|
网络协议 开发工具 git
命令终端设置全局代理的两种方法
命令终端设置全局代理的两种方法
474 0
|
网络协议 Python
Python网络编程——静态Web服务器实现
可以为发出请求的浏览器提供静态文档的程序。即所访问的页面是静态的,页面中的内容不会发生变化。HTTP协议(HyperText Transfer Protocol,超文本传输协议)使用于从www服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更高效,使网络传输减少。它不仅保证计算机正确快速地传输超文本,还确定传输文档中的哪一部分,以及那部分内容首先显示(如文本先于图形)等
15162 14
BAT 脚本技术-利用bat批处理脚本静态指定ip地址、自动获取ip地址设置
BAT 脚本技术-利用bat批处理脚本静态指定ip地址、自动获取ip地址设置
1044 0
BAT 脚本技术-利用bat批处理脚本静态指定ip地址、自动获取ip地址设置
|
Web App开发 网络协议 安全
Web服务器初始化脚本
Tengine + mysql + php
1976 0
|
JavaScript 应用服务中间件 nginx
如何启动一个本地静态服务器
背景 学习前端开发,想要调试静态页面以及js,发现直接本地打开会有跨域异常。因此,需要启动一个静态服务器,只负责当前目录的文件路由。 目前尝试了两种方式。一种是Nginx, 一种是NodeJS服务器。最终推荐NodeJS。
1528 0