半小时学会网站开发

优质

小牛编辑

136浏览

2023-12-01

网站是怎么工作的？

打开浏览器输入：www.lcsays.com试一下

这个过程就是：我们用浏览器访问了一个网站。那么到底浏览器和网站分别都做了什么呢？我们再来做一个试验

在试验之前我们要安装nc工具（nc是一个网络工具，通过nc命令可以模拟客户端或服务器端程序，非常方便）

[root@centos7vm ~]# yum install nc

接着我们来尝试一下nc的网络功能，先打开一个终端输入：

[root@centos7vm ~]# nc -l -p 80

回车后光标停止了，这条命令的含义是：模拟一个服务端程序监听在80这个tcp端口上，等待客户端连接

然后再打开一个终端输入：

[root@centos7vm ~]# nc 127.0.0.1 80

回车后光标也停止了，这条命令的含义是：模拟一个客户端通过tcp协议连接127.0.0.1这个ip地址所在的机器（也就是本机）的80端口

然后在第二个终端里直接输入hello，如下：

[root@centos7vm ~]# nc 127.0.0.1 80
hello

这时看第一个终端出现了：

[root@centos7vm ~]# nc -l -p 80
hello

如果你这时在第一个终端里输入一些字符，第二个终端里也会看到，这其实就是一个简单的QQ聊天，是不是很神奇

好了，现在你是否理解了nc的功能了呢？

言归正传，现在我们就用nc来说明网站是怎么工作的

我们重新监听80端口（网站默认使用的是http协议，http协议默认都是80端口，其实也可以选用其他端口比如8080，那么浏览器访问时就要输入www.shareditor:8080）

[root@centos7vm ~]# nc -l -p 80

这时我们同浏览器来访问127.0.0.1，如下：

我们发现浏览器一直在转圈圈，但是发现终端上出现了下面一些内容：

[root@centos7vm ~]# nc -l -p 80
GET / HTTP/1.1
Host: 127.0.0.1
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

这其实就是浏览器给服务器发的请求内容，这时我们手工来给浏览器回个信，直接在请求下面输入：

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Connection: close
hello
hi
<html>
<body>
<h1>hello</h1>
</body>
</html>

这时回过来看浏览器，是不是这样了？

我们刚才其实就做了一个小网站呢有木有！！！当然我们的网站运行的成本有点大，因为需要人来看着，并时刻敲出要返回的网站内容，想象一下如果同时有1000个人访问我们的网站，我们得敲多长时间，这1000个人会不会疯掉

实际上有人已经帮我们做了这个工作，那就是网站服务器程序，比较流行的是nginx和apache（这两个原理区别不大，主要是配置文件写法不同，我个人习惯用nginx），现在我们就来用nginx搭建一个小网站

先来安装nginx的1.8版本：

[root@centos7vm ~]# yum install nginx18

安装好后可以看到系统里多了以下目录和文件：

[root@centos7vm ~]# ls /usr/sbin/nginx
/usr/sbin/nginx
[root@centos7vm ~]# ls /etc/nginx/
conf.d  fastcgi.conf  fastcgi.conf.default  fastcgi_params  fastcgi_params.default  koi-utf  koi-win  mime.types  mime.types.default  nginx.conf  nginx.conf.default  scgi_params  scgi_params.default  uwsgi_params  uwsgi_params.default  win-utf
[root@centos7vm ~]# ls /usr/share/nginx/
html
[root@centos7vm ~]# ls /var/log/nginx/

这些分别是nginx的可执行文件、配置文件、网页文件目录、运行日志目录

不用犹豫，直接来启动nginx

[root@centos7vm ~]# service nginx start
Redirecting to /bin/systemctl start  nginx.service

可以看到nginx进程已经启动：

[root@centos7vm ~]# ps aux | grep nginx
root      21238  0.0  0.1 109552  2000 ?        Ss   05:13   0:00 nginx: master process /usr/sbin/nginx
nginx     21239  0.0  0.3 109992  3064 ?        S    05:13   0:00 nginx: worker process
root      21243  0.0  0.0 112660   960 pts/1    R+   05:13   0:00 grep --color=auto nginx

这时我们再打开浏览器访问127.0.0.1可以看到下面的效果：

这个页面其实就是nginx帮我们输入了一些文字，返回给浏览器的，这些内容就放在：


[root@centos7vm ~]# cat /usr/share/nginx/html/index.html

我们尝试按照我们自己的想法制作一个网页，编辑/usr/share/nginx/html/test.html文件，写入内容如下：

[root@centos7vm ~]# cat /usr/share/nginx/html/test.html
<html>
    <body>
        <h1>hello</h1>
    </body>
</html>

这时我们用浏览器访问：127.0.0.1/test.html，效果如下：

现在大功告成，你可以充分发挥你的想象来制作你自己的网站了，具体html语法可以参考网上的html教程，也有很多软件能方便制作漂亮的网页

最后留一个悬念，当你制作好你的网站希望其他人能看到的时候，你会发现在我们虚拟机里运行的网站服务是无法让外部互联网上的其他人看到的，这个问题会在下一篇中详细解释