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

背景

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

Windows平台搭建React Native开发环境

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React N...

30640
来自专栏Jerry的SAP技术分享

在浏览器里使用SAPGUI里的SE80

(1). 在后台找到Fiori catalog page ID: SAP_FIORI_EXTENSIBILITY

35450
来自专栏我和未来有约会

CaseStudy(showcase)界面篇-导出xaml以及放入Blend的技巧

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

20690
来自专栏阮一峰的网络日志

Babel 入门教程

(说明:本文选自我的新书《ES6 标准入门(第二版)》的第一章《ECMAScript 6简介》) Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代...

30550
来自专栏移动端周边技术扩展

Pyinstaller使用补充

15830
来自专栏向前进

vue-cli脚手架npm相关文件解读(6)build.js

系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

42880
来自专栏ytkah

dedecms网站迁移时记得将安装目录放空 附迁移的正确方法

  这段时间在赶一些新项目,我们建站一般都在本地服务器搭建起来,测试得差不多了才传到网上,这样对蜘蛛也相对友好一些,要不然改来改去变化太大给搜索引擎的第一印象很...

31030
来自专栏容器云生态

screen 简单使用

      系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份、ftp 传输等等。通...

26860
来自专栏网络

那些年,我们用过的fiddler

在测试中,不管是做手工测试,还是接口测试,我们都需要查看后端返回的数据。有的时候,我们也需要调试,或者mock一下后端的返回,来验证前端是否达到预期。 为了捕获...

198100
来自专栏散尽浮华

zabbix中配置当memory剩余不足20%时触发报警

在zabbix中默认当内存剩余量不足2G的时候触发报警,并没有使用百分比来触发如下: ? 现在需要配置:当memory剩余不足20%时触发报警,具体操作方法如下...

31060

扫码关注云+社区

领取腾讯云代金券