LightSmile

        一、背景

        最近一段时间在学习前端开发,捣鼓了一些静态html页面,想要测试这些页面在不同浏览器上面的显示效果。其中包括PC端浏览器以及手机端浏览器。想着,如果能在PC端提供外网访问地址,手机端就可以轻松访问了。

        二、探索

        由于PC端处于内网之中,想要提供免费的外网访问地址,最先想到的便是内网穿透。想起之前使用过一款内网穿透软件,由于时间久远,一时想不起具体名字,便以内网穿透为关键字进行了搜索。其中 https://blog.csdn.net/zhangguo5/article/details/77848658?utm_source=5ibc.net&utm_medium=referral 这篇博客给了我很大帮助。既说明了内网穿透的一些原理,又分析了常用内网穿透软件的优劣,最重要的是提到了本次使用的内网穿透软件ngrok。 ngrok下载地址:https://ngrok.com/download。

        1.选择合适的操作系统,我这里选择linux。当然,以Ubuntu为例,也可以执行 wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip 进行下载。

       

       2.解压压缩文件,如果未安装unzip工具,可通过apt-get install unzip进行安装。

       

        3.启动ngrok。通过ngrok http 80 命令可以启动。

        

      4.查看启动结果。启动成功后,会出现session status online提示,可通过http://*.ngrok.io 访问本地服务地址。

      

      三、搭建web服务程序

      目前为止,已经完成了内网穿透。由于需要访问html页面,需要使用html服务程序。这里采用nginx。

      1.使用 apt-get update 命令更新apt-get

      2.使用 apt-get install nginx 命令安装nginx

      3.使用 wget http://nginx.org/keys/nginx_signing.key 命令下载key文件

      4.使用 apt-key add nginx_signing.key 命令添加key 文件

      5.配置nginx.conf 。

            5.1通过 whereis nginx 查找nginx安装目录。

            

            5.2切换到 /etc/nginx目录,并打开nginx.conf配置文件。

            

            5.3 在 http 节点 添加 sever 节点。listen 后面对应端口号,location 节点中 root 对应网站根节点在本地磁盘的映射目录。

           

           5.4 保存退出后启动nginx。

           

           5.5 测试nginx。出现下图提示,表明nginx启动成功。

           

      四、ngrok配合nginx

      1.以8001端口为例,在nginx 配置文件中配置listen 8001,ngrok 通过ngrok http 8001 命令启动

      

      2.测试外网地址访问。

      

      3.出现403访问提示。这是由于网站跟目录未找到相应index文件

     

      4.可在网站根目录放置待测试的html页面文件,以calculator.html为例重新访问。

      

     5.测试手机访问效果

      

      五、题外话

      按理来说,文章开头的问题已经得到了解决。然而,真实情况是,我使用的 window10 操作系统。安装了ubuntu虚拟机,在Ubuntu虚拟机中又安装了 docker 软件。

      之所以采用虚拟机,是因为需要一些与真实环境相隔离的学习或测试环境。之所以使用 docker 软件是因为比起虚拟机,docker 更加轻巧,而且屏蔽了环境差异。拿到编译好的 docker 镜像以后,可以免去重新部署的麻烦。之所以在ubuntu虚拟机中安装docker,是因为在学习使用docker过程还可以学习ubuntu。

      关于docker的安装不再详细介绍,仅列出几个创建docker 镜像过程的关键命令。

      1.搜索镜像,以搜索基础操作系统 ubuntu 为例

      

     2.下载基础镜像ubuntu。使用命令 sudo docker pull ubuntu:14.04进行下载14.04代表镜像版本。不填写时默认为 latest版本。

     

     3.由于官方镜像网站下载较慢,可以使用 registry.docker-cn.com/library 镜像服务网站加速docker镜像下载。

     

     4.使用镜像创建并运行容器。name 指定容器名称,类似与计算机名。registry.docker-cn.com/library/ubuntu:14.04 指定镜像名称,类似于各种win10,win7,win xp 对应的*.iso。/bin/bash 指定容器启动后运行的命令,类似于开机启动自运行的程序。

      

     至此,docker 容器wedemo创建完成。可以在ubuntu中执行的操作,在docker 容器wedemo同样可以执行。

     docker的一个优点就在于将修改好的docker镜像分发给别人,就好将自己部署好环境的电脑那个别人用,不会再出现开发机正常,测试机不正常这样的蜜汁尴尬。对 docker 感兴趣的,推荐 docker 学习书籍《第一本Docker书》。https://www.jianshu.com/p/b459b9c6d247 这里有相关电子版下载。 

分类:

技术点:

相关文章:

  • 2021-05-24
  • 2021-08-21
  • 2021-02-04
  • 2021-04-26
  • 2021-11-06
  • 2021-12-29
猜你喜欢
  • 2021-04-14
  • 2021-06-23
  • 2021-10-10
  • 2022-01-22
相关资源
相似解决方案