上节课,我们将个人简介网站编写完成了。
这节课,要将网站发布到局域网可以访问。
不同操作系统选择不同的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盘根目录下:
然后,鼠标右键单击,在弹出菜单里面选择【全部提取(T)...】:
然后,点击【提取】按钮,完成之后,看到目录C:\phpStudy20161103下面出现了几个文件:
然后,鼠标双击文件phpStudy20161103.exe,启动安装程序:
修改目标文件夹为C:\phpStudy,点击OK按钮,等待解压完成,出现确认界面:
点击按钮【是】,phpStudy程序将启动,会弹出防火墙确认mysqld画面:
点击按钮【允许访问】,然后在另外一个弹出防火墙确认Apache HTTP Server画面:
点击按钮【允许访问】,完成之后,可以看到phpStudy程序已经启动好了:
看到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目录下:
然后,程序就部署好了,就可以打开浏览器访问啦。
打开Chrome浏览器,输入地址http://localhost/index.html就可以看到个人简介网站了:
可以看到,这里的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地址:
可以看到,“IPv4 地址”对应就是当前计算机的网络IP地址,学哥这个网络环境是192.168.36.230。
然后在另外一台计算机上面,打开Chrome浏览器,输入网址:http://192.168.36.230/index.html,就可以看到网站了:
如果,访问的地址不正确,或者两个计算机并没有网络连通,可能就看不到网站了,这时候就需要检查网络。
可以在另外一台计算机上面通过在cmd命令行环境输入ping 192.168.36.230来测试是否能够网络连通:
如果看到回复的文字里面有,时间<x秒的信息,就说明是网络连通的。
如果看到请求超时的信息,就说明网络是不通的。这时候就要去检查网络连接或者路由器设置等等。
树莓派电脑安装Web服务程序
打开树莓派电脑的程序“LX终端”,按次序输入以下命令:
安装和启动nginx服务程序:
$sudo apt-get update
$sudo apt-get install -y nginx
$sudo /etc/init.d/nginx start
然后在树莓派电脑上打开【Chromium网页浏览器】,输入网址:http://localhost,可以看到如下的效果:
说明nginx这个Web服务程序安装和启动好了。
将网站程序部署到nginx对应目录
如果是在树莓派电脑上编写的个人简介网站程序,那么程序应该是在/home/pi这个目录下。
将前面说明的4个文件和images目录复制到/var/www/html目录下:
然后在树莓派电脑上打开【Chromium网页浏览器】,输入网址:http://localhost/index.html,可以看到如下的效果:
如果不是在树莓派电脑上编写的个人简介网站程序,但是又想将网站部署到树莓派电脑上,那么就需要利用ftp软件工具将程序代码上传到树莓派电脑上,这个可以参考第1章的课程,如何上传文件。
如果是要在另外一台计算机上面访问树莓派电脑作为主机的网站,则需要知道树莓派电脑的IP地址。
可以在树莓派电脑的“LX终端”里面输入命令ifconfig来查询树莓派电脑的IP地址:
然后在另外一台计算机上面访问: http://192.168.5.109/index.html,类似访问前面Windows电脑上部署的网站一样的。
测试网站
网站程序部署好了之后,就可以在另外的计算机上通过浏览器来进行测试了。
一般为了保证让尽可能多人可以正常访问我们部署的网站,需要在常用的一些浏览器程序上进行测试。
例如:IE浏览器,Edge浏览器,Chrome浏览器,Safari浏览器,Firefox浏览器。
在另外的计算机上安装好这些浏览器,然后输入网站地址,分别进行测试每一个页面,确保显示效果都是符合预期的。
这里课程的主要目的还是讲解编程,关于测试就不深入讲解了,等大家如果从事IT行业之后再进行深入学习。
课后练习
准备好100元钱放在支付宝里面,用于购买阿里云网站服务器。
往期教程
因为教程是系列教程,前后关联性非常强,请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。