首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >如何启动一个本地静态服务器

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

作者头像
Ryan-Miao
发布于 2018-03-13 05:50:52
发布于 2018-03-13 05:50:52
3.8K10
代码可运行
举报
文章被收录于专栏:Ryan MiaoRyan Miao
运行总次数:0
代码可运行

背景

学习前端开发,想要调试静态页面以及js,发现直接本地打开会有跨域异常。因此,需要启动一个静态服务器,只负责当前目录的文件路由

目前尝试了两种方式。一种是Nginx, 一种是NodeJS服务器。最终推荐NodeJS。

1. Nginx启动静态页面

1.1. 安装

下载安装Nginx,在Mac下安装如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
brew install nginx

1.2 配置

Mac通过brew安装后的配置文件位于:/usr/local/etc/nginx.

修改端口和文件目录:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 启动和关闭

启动

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
nginx

关闭

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
nginx -s stop

启动后,打开浏览器,输入:localhost:8070/xxx.html即可。

2. 通过NodeJS的本地服务器

本次选用http-server

2.1 安装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install http-server -g

2.2 启动

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
http-server [path] [options]

Options

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
-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的用浏览器打开功能就可以了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
root /Users/ryan/workspace/learning/react; 配置有用
root /Users/ryan/workspace/learning/react; 配置有用
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
简单的零配置命令行 http 服务器--http-server入门
http-server是一个简单的零配置命令行http服务器。 它足够强大,足以用于生产用途,但它既简单又易于破解,可用于测试,本地开发和学习
lyb-geek
2020/07/08
6.6K0
简单的零配置命令行 http 服务器--http-server入门
一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)
请前提安装Node http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. ---- 安装 (全局安装加 -g) : npm install http-server Windows 下使用 在站点目录下开启命令行输入: http-server # 可以使用简写hs 开启后访问: http://localhost:8080 or http://127.0.0.1:8080 使用于p
游魂
2018/06/08
1.3K0
nodejs配置简单HTTP服务器
1.介绍 http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs.  如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 2.安装 np
hbbliyong
2018/03/06
1.8K0
nodejs配置简单HTTP服务器
介绍一款便捷的http服务工具http-server
在写前端页面时,经常会在浏览器运行html页面,此工具可以快速在本地启动一个http服务器
薛定喵君
2019/11/08
3.1K0
搭建nginx rtmp流媒体服务器(超详细)_nginx rtmp 集群
本微博在借鉴其他大牛之后,觉得应该写一个直播的完整流程,虽然简单,但是会有一个宏观感受:
全栈程序员站长
2022/09/27
5.7K0
搭建nginx rtmp流媒体服务器(超详细)_nginx rtmp 集群
CentOS7 安装log.io服务显示实时日志
版权声明:本文为木偶人shaon原创文章,转载请注明原文地址,非常感谢。 https://blog.csdn.net/wh211212/article/details/80359612
shaonbean
2019/05/26
1.5K0
超详细 Nginx 极简教程,傻瓜一看也会!
Nginx (engine x) 是一款轻量级的Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
Java技术栈
2018/12/13
8140
如何启动一个本地静态服务器
学习前端开发,想要调试静态页面以及js,发现直接打开本地会有跨域异常,因此需要启动一个静态服务器,只负责当前目录的文件路由,
木子星兮
2020/07/16
3.2K0
前端开发利器之静态服务器
在进行前端页面开发时,为了调试方便,需要在本地启动一个静态文件服务器,而不需要与后端api服务一起部署。
编程随笔
2019/09/11
1.6K0
服务器上 nginx 一个ssl证书 一个域名 多个端口
先弄一个ssl证书 下载nginx配置证书后 在服务器上 nginx安装目录 下的server配置字段中加入
余生
2019/10/09
7.6K0
在Nginx服务器上安装SSL证书
原因是nginx缺少SSL模块,需要重新将SSL模块添加进去,然后再启动nginx:
布禾
2020/10/29
2.4K0
在Nginx服务器上安装SSL证书
Nginx 极简教程(快速入门)
Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
框架师
2019/09/19
6170
Nginx 极简教程(快速入门)
WebRTC--从编译到部署,打造点对点音视频通话服务器
WebRTC实现了基于网页的视频会议,是一个支持网页浏览器进行实时语音对话或视频对话的API(来自百度),由google开发,并于2011年6月3日开源。 和直播推流不同,这是点对点通讯,服务器只是帮助建立连接,以满足视频通话的低延迟要求 分为三个服务器: 1.房间服务器:创建房间,让用户可以在一个房间内通讯 2.信令服务器:用于用户交换信令,建立连接,类似TCP握手 3.ICE服务器(内网穿透服务器):用于穿透内网IP,实现外网连接 本文基于CentOS7系统
aruba
2021/07/16
3.1K0
WebRTC--从编译到部署,打造点对点音视频通话服务器
Windows搭建Nginx直播推流服务器
将 ffmpeg 下的 bin 目录(我的是D:\1_streamserve\ffmpeg\bin) 和 nginx目录(我的是D:\1_streamserve\nginx-1.7.11.3-Gryphon) 都添加到 Path 路径下。
103style
2022/12/19
3K0
Windows搭建Nginx直播推流服务器
超实用的 Nginx 极简教程,覆盖了常用场景
Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
芋道源码
2019/10/29
9510
nginx简易教程
Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
lyb-geek
2018/07/26
1K0
nginx简易教程
Nginx服务器基础配置
Nginx服务器以其功能丰富著称。它既能作为HTTP服务器,也可作为反向代理服务器或者邮件服务器;能够快速响应静态页面(HTML)的请求;支持FastCGI、SSL、Virtual Host、URL、Rewrite、HTTP Base Auth、Gzip等大量使用功能;并且支持很多的第三方功能模块的扩展。
用户5921339
2025/05/20
3160
Nginx服务器基础配置
开发工具Tools·Nginx 快速入门
Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
数媒派
2022/12/01
5370
前端学习部署node服务-腾讯云服务器宝塔模版
静态网站可以直接把index.html放在网站目录下/接口需要pm2运行对应node项目
一起重学前端
2024/10/02
3390
nginx简易教程
nginx简易教程 概述 什么是nginx? Nginx (engine x) 是一款轻量级的Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。 什么是反向代理? 反向代理(
静默虚空
2018/01/05
1.6K0
nginx简易教程
相关推荐
简单的零配置命令行 http 服务器--http-server入门
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档