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

背景

学习前端开发,想要调试静态页面以及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 条评论
登录 后参与评论

相关文章

来自专栏BY的专栏

CocoaPods 私有仓库的创建(超详细)前言正文结语

4096
来自专栏ytkah

dedecms如何快速删除跳转的文章(记得清空内容回收站)

  网站内容更新多了,有些页面修改了,这时其他相关页面也要做相应的调整,不然可能会出现404错误,那么dedecms如何快速删除跳转的文章呢?下面就随ytkah...

2636
来自专栏xingoo, 一个梦想做发明家的程序员

grunt安装

随着node的流行,各种后台的技术应用到前端,依赖注入、自动化测试、构建等等。 本篇就介绍下如何使用Grunt进行构建。 grunt安装   由于gru...

22810
来自专栏编程坑太多

『中级篇』docker之CI/CD持续集成—真实Python项目的CI演示(72)

源码地址:https://github.com/limingios/docker-cloud-flask-demo

682
来自专栏TechBox

cocoapods从安装到使用什么是cocoapodscocoapods安装cocoapods使用CocoaPods常见问题参考文章

1282
来自专栏吴小龙同學

手把手教你建github技术博客by hexo

适合人群 喜欢写 Blog 的人 有一定的编程基础 爱折腾的人 熟练使用版本控制 Git 了解使用 GitHub 熟悉基本的 MarkDown 语法 环境准备 ...

3657
来自专栏FreeBuf

Android App渗透测试工具分享

这段时间因为某些原因接触了Android App渗透测试,发现了几个不错的App渗透测试工具(虽然这些工具早就出来了 2333),搭建测试环境的过程中遇到了一些...

1153
来自专栏Danny的专栏

iterm通过代理访问网络

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

501
来自专栏小夜博客

LNMP 1.x版本 pathinfo设置

3498
来自专栏移动端开发

iOS Paros 连接在同一WIFI下的网络抓包

图文详解:    说说网络抓包,几天前的事了,想抓个包看看 某爱网(全名自己脑补)的数据,就上网找了一下抓包,以前经常抓接口,时间长了忘了。那时候也不是用苹果手...

21110

扫码关注云+社区