EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(六)- webpack-dev-server 自适应支持手机端访问

关于EasyDSS

EasyDSS商用流媒体服务器解决方案是一套集流媒体点播、转码与管理、直播、录像、检索、时移回看于一体的一套完整的商用流媒体服务器解决方案，EasyDSS高性能RTMP流媒体服务器支持RTMP推流，同步输出HTTP、RTMP、HLS、HTTP-FLV，支持推流分发/拉流分发，支持秒开、GOP缓冲、录像、检索、回放、录像下载、网页管理等多种功能，是目前市面上最合理的一款商用流媒体服务器！

详情可以访问EasyDSS流媒体服务器官方网站：www.easydss.com

---

问题分析

很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-server 可以做到实时监听文件修改, 自动更新浏览器中的网页, 一旦代码发生修改, 无须人工干预, 页面就同步到最新状态. 但是 webpack-dev-server 的默认配置, 不充许本机以外的设备访问开发页面, 这个时候, 当我们用手机通过局域网IP来访问页面时, 连接不上. 于是, 去官网文档里寻找解决之道. webpack 的官网文档给我的印象是乱乱的, 和其他一些内容混在一块.

这里, 我记录下 webpack-dev-server 开启手机内网访问页面的配置过程. 一来给自己留个记录; 二来, 方便大家搜索, 在官网文档以外的地方, 很快的搜到这个问题的答案.

解决方案

要让 webpack-dev-server 支持手机端通过内网IP访问, 只需要在 webpack.config.js 中添加如下配置段:

    ...
    devServer: {
        host: '0.0.0.0',
        useLocalIp: true,
        open: true,
        openPage: "",
        proxy: {
            "*": {
                target: 'http://xxx',
                secure: false
            }
        }
    },
    ...

关键的配置属性:

host 配置成 ‘0.0.0.0’, 充许本机以外的设备访问

useLocalIp true, 将以内网IP为http地址信息打开浏览器, 不用敲 cmd ipinfo 去查内网IP了

通过以上配置, 直接在命令行敲 webpack-dev-server 将打开的浏览器地址栏地址发送到手机上, 就可以从手机访问测试页面了. 当然, 手机和PC需在同一局域网内哦.

---

EasyDSS商用流媒体服务器提供一站式的转码、点播、直播、时移回放服务，极大地简化了开发和集成的工作，并且EasyDSS支持多种特性，完全能够满足企业视频信息化建设方面的需求：

• 多屏播放：支持Flash、HTML5播放，兼容Windows、Android、iOS、Mac等操作系统。
• 自由组合：EasyDSS软件产品之间无缝对接，也可将EasyDSS流媒体服务器软件与其他第三方平台对接，组合灵活自由。
• 支持云架构：支持阿里云、腾讯云、华为云、青云、七牛云存储等各大云服务商，支持云架构，部署更灵活。
• 与CDN无缝对接：EasyDSS软件产品支持与网宿、帝联、蓝汛等CDN无缝对接。
• 二次开发简单：提供编程语言无关化的RESTful API接口，只要了解JS、HTML、JAVA、ASP.NET、PHP、ASP等开发语言中的任意一种，就能运用EasyDSS提供的RESTful API进行二次开发。
• 简单易用：图形化操作，模块清晰，流程简单，极易上手。

适用场景