本地搭建外网可访问的WEB服务器

2016-06-20 本文已影响10146人塔莉亚传奇

本文除以下用户谢绝观看：

1.网站爱好者——喜欢自己搭建网站，如wordpress、织梦等
2.产品经理（Axure使用者）——不满足于将文件上传到官网服务器，想设置自动适配手机或PC网站。
3.屌丝html小学生，不想花钱又想学习html相关技术。
4.网络全能达人，希望通过自己电脑搭建文件备份服务器的人员。

我要实现：

1.搭建DDNS动态域名解析，外网直接输入网址和进入本地电脑。
2.本地搭建Apache+mysql+php web服务器环境。
3.本地搭建wordpress网站，输入固定域名可直接访问。
4.本地搭建FTP服务器，在外网随时访问修改本地电脑文件。

准备1：搭建本地wamp web服务器

网站服务器有很多种类型，目前主流的是Apache+mysql+php，当然，服务器搭建在linux系统里是最稳定的，然后对于初学者或不是用于商业目的的人，在Windows中搭建是非常实用的。
国外有很多集成了Apache+mysql+php的环境，例如wamp、xampp等，这里我推荐使用xampp，这些环境大同小异，对于个人使用者已经足够了。
安装xampp
xampp集成了很多功能，我们只需要安装自己需要的就可以了。由于我需要数据库和文件传输，我只安装了apache+mysql+php+phpmyadmin。

安装后启动Apache和mysql服务，在浏览器输入127.0.0.1查看安装状态并进行相关初始化设置（百度有的是，不再累赘）。

准备2：DDNS动态域名解析

如果只能本地访问，那一切都是没有意义的，所有我们需要DDNS动态域名解析，经常关注网络的人应该很熟悉这个名称，在中国，IP地址是十分匮乏的资源，所以运营商给我们家里安装的宽带都是动态IP，隔几天就会自动改变。那么我们怎么才能通过IP找到本地计算机呢，这里就需要DDNS了。
DDNS在大部分路由器里面都有集成，只要我们进行了设置，不管什么时候，输入申请好的域名，就可以直接访问到我们的计算机了。我在这里使用的是花生壳域名，首先我们注册花生壳官网账号，然后点击域名管理申请一个免费域名。之后进入自己的路由器管理页面，找到类似动态DNS（DDNS）的字段，然后输入我们的花生壳账号即可。OK，此时这个域名就已经实时解析到我们的路由器了，那么怎么才能进入我们的电脑呢？

准备3：端口映射

我们平时浏览网站的端口是80，FTP传输的端口是21，mysql的端口是3306，所有如果我们想在外网中直接使用本地计算机的服务，那么就要在浏览器里面将这些端口指向到本地计算机的局域网IP地址中。如果路由器支持DMZ服务，那么直接启用即可。

DMZ会将所有关于这个外网IP的端口都指向到本地计算机上。

wordpress搭建

不用我说，官网就有教程，百度有的是好吧。
搭建完之后，用其他电脑输入之前设置的固定域名，OK，你成功了。

Axure自适应各种终端

用过Axure的人一定有这个体会，当我们上传一个手机端效果页面时，有很多人是通过PC访问的，然后呢？各种错位和失真，非常不爽。但是上传官网时，我们有无法修改网页源码，所以只能安卓一个链接、ios一个链接、PC一个链接，十分麻烦。
如果自己有服务器呢？那就十分好办了，将我们的页面导出成html，然后修改根目录的index.php文件，将文件代码设置成自动检测访问设备：如果是安卓设备，自动跳转到安卓手机页面；如果是iphone设备，自动跳转到iphone页面；如果是ipad设备，自动跳转到ipad页面。相信，如此修改后，客户再也不会看到失真的页面了。

<script type="text/javascript">
            var checkiphone=0;
            var browser = {
    versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {         //移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
    if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
         window.location.href = "login_phone.html"; 
    }else{
                 window.location.href = "login_pc.html";     //是否在PC浏览器打开
            }
        
</script>