0037 在本地创建一个Web服务器运行网站程序

上节课,我们将个人简介网站编写完成了。
这节课,要将网站发布到局域网可以访问。

不同操作系统选择不同的Web服务程序

前面课程里面有讲过不同的计算机上有不同的操作系统。
大多数人使用的Windows系统,前面的教程是树莓派Raspbian系统,学哥常用的是Mac系统。
那么在不同的操作系统上,就可能需要安装不同的Web服务器程序,来对外提供Web服务。
下面针对2种具体的代表性操作系统,详细说明应该如何安装配置Web服务程序。
分别是:Windows7、Raspbian。
Windows系统是使用人数最多的系统,Windows7是比较常用的。
树莓派电脑是前面课程中很多同学用来学习的电脑,Raspbian系统也可作为Linux的代表性。
下节课将说明如何将网站部署到阿里云的Ubuntu系统服务器上,Ubuntu也是基于Linux的,很多操作步骤和Raspbian类似。
如果有同学使用的是Mac系统,那么可以考虑安装一个虚拟机程序VMware Fusion,然后在里面安装一个Windows系统或者Ubuntu系统都可以。具体如何安装虚拟机程序,不是学哥教程的重点,因此请大家去网上搜索关键字“Mac Vmware Fusion Windows”。

Windows7系统安装phpStudy

学哥推荐phpstudy程序,可以很方便的安装配置好Web服务程序。
它包含了常见的Web服务程序包括Apache或者Nginx,和PHP,和数据库MySQL,集成在一起了。
下载地址:http://www.phpstudy.net/phpstudy/phpStudy20161103.zip
将下载好的phpStudy20161103.zip文件移动到C盘根目录下:

2-11-1.jpg

然后,鼠标右键单击,在弹出菜单里面选择【全部提取(T)...】:

2-11-2.jpg

然后,点击【提取】按钮,完成之后,看到目录C:\phpStudy20161103下面出现了几个文件:

2-11-3.jpg

然后,鼠标双击文件phpStudy20161103.exe,启动安装程序:

2-11-4.jpg

修改目标文件夹为C:\phpStudy,点击OK按钮,等待解压完成,出现确认界面:

2-11-5.jpg

点击按钮【是】,phpStudy程序将启动,会弹出防火墙确认mysqld画面:

2-11-6.jpg

点击按钮【允许访问】,然后在另外一个弹出防火墙确认Apache HTTP Server画面:

2-11-7.jpg

点击按钮【允许访问】,完成之后,可以看到phpStudy程序已经启动好了:

2-11-8.jpg

看到phpStudy程序的运行状态里面,Apache和MySQL后面是2个绿灯,则表示Web服务程序环境配置好了。
如果看到有红灯,则说明可能有问题,这时候就需要排查原因。
一般来说,可能出错的原因主要是电脑系统里面可能曾经已经安装过其它Web服务程序,占用了80端口;
或者是已经安装了MySQL数据库程序,占用了3306端口。
这时候,解决办法一般是先删除其它相关软件,然后关闭并重新启动phpStudy程序进行尝试。
如果还有错误,则需要到C:\phpStudy20161103目录下查看manual.chm文件,里面有关于常见错误的解决方案。
今后,在学习PHP和MySQL的时候,还会用到这个Web服务程序phpStudy。

将网站程序部署到phpStudy对应目录

来整理一下,前面的个人简介网站程序总共有哪些:
index.html
index.css
project1.html
project2.html
images\128128.gif
images\appkeys1.png
images\appkeys2.png
images\appkeys3.png
images\back.png
images\back1.jpg
images\background1.jpg
images\coke11.png
images\coke12.png
images\coke13.png
images\coke14.png
总共是3个html文件,1个css文件,1个images目录,images目录下有11个图片文件。
打开“文件资源管理器”程序,找到目录“C:\phpStudy\WWW”,将4个文件和images目录复制到这个WWW目录下:

2-11-9.jpg

然后,程序就部署好了,就可以打开浏览器访问啦。
打开Chrome浏览器,输入地址http://localhost/index.html就可以看到个人简介网站了:

2-11-10.jpg

可以看到,这里的localhost就是一个网络ip,相当于告诉Web服务程序,访问的是本机。
localhost只有当Web服务程序和浏览器客户端是同一台机器时才有效。
如果换了另外一台计算机,输入http://localhost/index.html就看不到网站了,因为另外一台计算机上面并没有运行phpStudy这个Web服务程序,也没有部署网站。
那么,在局域网的另外一台计算机上,应该如何通过浏览器访问这个网站呢?

局域网另外一台计算机访问网站

前面课程里有讲过,两台计算机之间要互相访问的前提是,存在物理连接,也就是能够有网络连接。
也就是2台计算机通过网络可以连接在一起。
网络连接最重要的是知道对方的地址,也就是网络IP地址。
通过另外一台计算机来访问Web服务程序,就必须知道提供Web服务程序的计算机的网络地址。
在Windows系统里面,可以通过在cmd命令行环境里面输入命令ipconfig来查看当前计算机的网络IP地址。
在phpStudy程序所在的计算机上,点击左下角的【开始】图标,然后在“搜索程序和文件”这个输入框中输入【cmd】,然后按回车键,就可以打开cmd.exe程序,在里面输入命令ipconfig回车,来查看网络IP地址:

2-11-11.jpg

可以看到,“IPv4 地址”对应就是当前计算机的网络IP地址,学哥这个网络环境是192.168.36.230。
然后在另外一台计算机上面,打开Chrome浏览器,输入网址:http://192.168.36.230/index.html,就可以看到网站了:

2-11-12.jpg

如果,访问的地址不正确,或者两个计算机并没有网络连通,可能就看不到网站了,这时候就需要检查网络。
可以在另外一台计算机上面通过在cmd命令行环境输入ping 192.168.36.230来测试是否能够网络连通:

2-11-13.jpg

如果看到回复的文字里面有,时间<x秒的信息,就说明是网络连通的。
如果看到请求超时的信息,就说明网络是不通的。这时候就要去检查网络连接或者路由器设置等等。

树莓派电脑安装Web服务程序

打开树莓派电脑的程序“LX终端”,按次序输入以下命令:
安装和启动nginx服务程序:
$sudo apt-get update
$sudo apt-get install -y nginx
$sudo /etc/init.d/nginx start

2-11-14.jpg

然后在树莓派电脑上打开【Chromium网页浏览器】,输入网址:http://localhost,可以看到如下的效果:

2-11-15.jpg

说明nginx这个Web服务程序安装和启动好了。

将网站程序部署到nginx对应目录

如果是在树莓派电脑上编写的个人简介网站程序,那么程序应该是在/home/pi这个目录下。
将前面说明的4个文件和images目录复制到/var/www/html目录下:

2-11-16.jpg

然后在树莓派电脑上打开【Chromium网页浏览器】,输入网址:http://localhost/index.html,可以看到如下的效果:

2-11-17.jpg

如果不是在树莓派电脑上编写的个人简介网站程序,但是又想将网站部署到树莓派电脑上,那么就需要利用ftp软件工具将程序代码上传到树莓派电脑上,这个可以参考第1章的课程,如何上传文件。
如果是要在另外一台计算机上面访问树莓派电脑作为主机的网站,则需要知道树莓派电脑的IP地址。
可以在树莓派电脑的“LX终端”里面输入命令ifconfig来查询树莓派电脑的IP地址:

2-11-18.jpg

然后在另外一台计算机上面访问: http://192.168.5.109/index.html,类似访问前面Windows电脑上部署的网站一样的。

测试网站

网站程序部署好了之后,就可以在另外的计算机上通过浏览器来进行测试了。
一般为了保证让尽可能多人可以正常访问我们部署的网站,需要在常用的一些浏览器程序上进行测试。
例如:IE浏览器,Edge浏览器,Chrome浏览器,Safari浏览器,Firefox浏览器。
在另外的计算机上安装好这些浏览器,然后输入网站地址,分别进行测试每一个页面,确保显示效果都是符合预期的。
这里课程的主要目的还是讲解编程,关于测试就不深入讲解了,等大家如果从事IT行业之后再进行深入学习。

课后练习

准备好100元钱放在支付宝里面,用于购买阿里云网站服务器。

往期教程

因为教程是系列教程,前后关联性非常强,请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • WEB服务器、应用程序服务器、HTTP服务器有何区别?IIS、Apache、Tomcat、Weblogic、Web...
    葫芭阅读 1,761评论 3 33
  • 我曾有三次莫名其妙的流泪。 1月23日,我躺在床上看 《 我是歌手》 ,看到了李健的《贝加尔湖畔》。第一句,李健的...
    苏热烈阅读 510评论 0 3
  • 四月,我的一位亲戚怆然离世 !此人为夫为儿为孙, 一生辛劳,勤俭节约。唯一见她奢侈一回是年近半百为自己烫了一次卷发...
    淡化阅读 283评论 0 0
  • 金钱真的买不到幸福。一项最新调查显示,律师和其他高薪白领更容易患上抑郁症。 一项针对7500多名专业人士的...
    17数401蒙莉霞阅读 251评论 0 1