如何搭建网站页面？ -搭建过程中的各种设置

如何搭建企业网站页面

1. 自己编写网站代码 --- 学习完前端

mkdir -p  /html/www 
mkdir -p /html/bbs
mkdir -p html/blog
vim index.html
       
 
 
 
 
 
 老男孩教育62期最牛X
 

 
 
01
 
oldboy
 
 
 
02
 
oldgirl
 
 
 
03
 
olddog
 
 
 
 
 
 
     

2.利用开源网站代码部署网站

链接：https://pan.baidu.com/s/11dRj9swpy27wAXb9_oJh5Q
提取码：5ltl
复制这段内容后打开百度网盘手机App，操作更方便哦

解压：
[root@web01 /www]# unzip h5game.zip

3.企业web服务如何进行配置

01.多个虚拟主机配置
第一步：编辑多个虚拟主机配置文件

    第一个历程: 编写多个虚拟主机配置文件
    /etc/nginx/conf.d/
    [root@web01 conf.d]# cat *.conf
    server {
        listen       80;
        server_name  bbs.oldboy.com;
        location / {
            root   /html/bbs;
            index  index.html index.htm;
        }
        error_page  404 500 502 503 504  https://www.baidu.com/search/error.html;
    }
    server {
        listen       80;
        server_name  blog.oldboy.com;
        location / {
            root   /html/blog;
            index  index.html index.htm;
        }
        error_page  404 500 502 503 504  https://www.baidu.com/search/error.html;
    }
    server {
        listen       80;
        server_name  www.oldboy.com;
        location / {
            root   /html/www;
            index  index.html index.htm;
        }
        error_page  404 500 502 503 504  https://www.baidu.com/search/error.html;
    }

nginx配置文件规范:
01. 区域模块信息 必须有一对花括号
02. 指令信息后面必须有分号
03. 相应指令信息必须放置在正确区块中

image.png

第二步：创建站点目录和首页文件

[root@web01 /html]#  for name in {www,bbs,blog};do echo $name.oldboy.com >/html/$name/index.html;done
[root@web01 /html]# for name in {www,bbs,blog};do cat /html/$name/index.html;done
www.oldboy.com
bbs.oldboy.com
blog.oldboy.com

第三步：重启服务

[root@web01 /html]# systemctl restart nginx

第四步：nginx -t --检查配置文件语法命令

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

第五步：进行网站页面访问测试 配置DNS解析信息

image.png

image.png

image.png

image.png

4. 网站服务访问方式

a 基于域名信息访问 OK
b 基于端口信息访问 web zabbix 80
修改server虚拟主机配置文件

 server {
           listen       8080;
           server_name  www.oldboy.com;
           location / {
               root   /html/www;
               index  index.html index.htm;
           }
           error_page  404 500 502 503 504  https://www.baidu.com/search/error.html;
       }    

c 基于地址信息访问
准备工作: 主配置文件

include /etc/nginx/conf.d/www.conf;   --- 高可用
       
       listen       10.0.0.7:80;
server_name  www.oldboy.com;
        location / {
            root   /html/www;
            index  index.html index.htm;
        }

PS: nginx配置文件中只要涉及到IP地址修改,必须重启nginx服务,不能平滑重启

5.利用nginx服务实现FTP存储服务器

第一步： 编写配置文件
vim /etc/nginx/conf.d/www.conf

server {
         listen            80;
         server_name  www.oldboy.com;
         location / {
             root   /html/www;
             index  index.html index.htm;
             autoindex  on;    --- 开启网站站点目录信息显示功能
             charset utf-8;    --- 设置中文字符集信息,避免页面中文出现乱码
         }
         error_page  404 500 502 503 504  https://www.baidu.com/search/error.html;
     }

systemctl restart nginx 修改完毕重启服务
第二步：创建站点目录 将指定的首页文件删除

rm -rf index.html

第三步：修改媒体资源类型文件

sed -r '/jpg\;$|gif\;$|txt\;$/s@(.*)@#\1@g' /etc/nginx/mime.types
···
systemctl restart nginx   重启服务

image.png

6.对网站页面信息进行访问控制

a根据用户地址信息进行控制
环境：

[root@web01 /html/www]# mkdir 大陆系列
[root@web01 /html/www]# mkdir 港澳系列
[root@web01 /html/www]# mkdir 欧美系列
[root@web01 /html/www]# mkdir 日韩系列
[root@web01 /html/www]# mkdir vip专区
[root@web01 /html/www]# mkdir 免费专区
[root@web01 /html/www]# mv  *系列 vip专区/

第一步：编写配置文件

allow/deny: 
    location: location /VIP专区/
    
    server {
        listen            80;
        server_name  www.oldboy.com;
        location / {
            root   /html/www;
            index  index.html index.htm;
            autoindex  on;
            charset utf-8;
        }
        location /VIP专区/ {     --- 匹配uri操作
            root   /html/www;
            deny   10.0.0.1;     --- 进行访问控制
            allow  all;
        }
        error_page 403 404 500 502 503 504  /error.html;
        location = /error.html {
            root /html/www;
        }
    }

站点目录结构

[root@web01 /html/www]# tree
.
├── vip\344\270\223\345\214\272
│   ├── oldboy.jpg
│   ├── \345\244\247\351\231\206\347\263\273\345\210\227
│   ├── \346\227\245\351\237\251\347\263\273\345\210\227
│   ├── \346\254\247\347\276\216\347\263\273\345\210\227
│   └── \346\270\257\346\276\263\347\263\273\345\210\227
└── \345\205\215\350\264\271\344\270\223\345\214\272
    └── oldgirl.txt

6 directories, 2 files

根据用户登录密码进行控制
第一步: 修改配置文件
auth_basic --- 开启登录认证功能
auth_basic_user_file --- 指定加载的密码文件
http://nginx.org/en/docs/http/ngx_http_auth_basic_module.html

[root@web01 VIP专区]# cat /etc/nginx/conf.d/www.conf 
server {
        listen            80;
        server_name  www.oldboy.com;
        location / {
            root   /html/www;
            index  index.html index.htm;
            autoindex  on;
            charset utf-8;
        }
        location /VIP专区/ { 
            root   /html/www;
            autoindex on;
            charset utf-8;
            auth_basic  oldboy62;
            auth_basic_user_file  /etc/password.txt;
        }
        error_page 403 404 500 502 503 504  /error.html;
        location = /error.html {
            root /html/www;
        }
    }

第二个历程: 生成密码文件

yum install -y httpd-tools
htpasswd -bc /etc/password.txt oldgirl oldboy123   ---第一次创建
htpasswd -b  /etc/password.txt oldboy oldboy123    ---添加新的用户
-b  免交互输入密码
-c  创建密码文件

[root@web01 ~]# cat /etc/password.txt
oldboy:$apr1$VBdr1W3k$yvCwyyiZgEdY82dxN5q831

添加用户：
[root@web01 ~]# htpasswd -b /etc/password.txt oldgirl oldboy123
Adding password for user oldgirl
[root@web01 ~]# cat /etc/password.txt
oldboy:$apr1$VBdr1W3k$yvCwyyiZgEdY82dxN5q831
oldgirl:$apr1$MtqoPmv4$BdA3VAg/J/SZ73YaAbGr5.

7.网站状态的监听功能

第一步：编写配置文件

[root@web01 /etc/nginx/conf.d]# vim www.conf

server {
        listen            80;
        server_name  www.oldboy.com;
        location / {
            root   /html/www;
            index  index.html index.htm;
            autoindex  on;
            charset utf-8;
        }
        location /VIP专区/ {
            root   /html/www;
            autoindex on;
            charset utf-8;
            auth_basic  oldboy62;
            auth_basic_user_file  /etc/password.txt;
        }
            location = /basic_status {         
           stub_status;                            --开启网站监听功能
    }
        error_page 403 404 500 502 503 504  /error.html;
        location = /error.html {
            root /html/www;
        }
    }
"www.conf" 24L, 655C                           

第二步：测试

image.png

· Active connections  激活连接 
The current number of active client connections including Waiting connections.
客户端目前连接数量/包含等待连接
客户端   ----  服务端 max 2个  异步网络通讯模型机制
客户端   ----  服务端
客户端   ----  服务端 连接请求放入队列中  ELK  等待
      
· accepts  接受  
The total number of accepted client connections.
接受客户端连接总的连接数量
      
· handled  处理
The total number of handled connections.
处理客户端连接总的连接数量     
 Generally, the parameter value is the same as accepts unless some resource limits have been reached 
 (for example, the worker_connections limit).
特殊情况,到达服务器连接限制,也会造成处理数值和接收数值不一致
      
· requests (长连接)
  The total number of client requests.
总的客户端请求数量 发送了多个HTTP请求报文

 vim /etc/nginx/nginx.conf  
keepalive_timeout  0;    --- 表示短连接  
PS: requests数量 == 处理连接数量

· Reading
The current number of connections where nginx is reading the request header.
目前读取用户请求头数量, 负载压力不大时, 数值几乎0或者1

· Writing
The current number of connections where nginx is writing the response back to the client.
目前响应信息发送数量 

· Waiting  
The current number of idle client connections waiting for a request.
客户端连接请求信息等待处理的数量
    
curl www.oldboy.com/basic_status -s|awk 'NR==1{print $3}'

8.网站服务日志配置

错误日志: error.log

 **配置信息:**
error_log  /var/log/nginx/error.log    warn;
             日志保存路径           日志错误级别
 **错误级别：**
debug   日志调试级别    显示的信息会更多
info    日志信息级别  
notice  日志通知级别 
warn    日志警告级别  错误                    
error   日志错误级别        服务无法正常运行   
crit    日志严重级别         
alert   日志报警级别        服务程序异常
emerg   日志灾难级别        

访问日志: access.log
1) 配置信息
log_format main 'remote_user [request" '
'body_bytes_sent "http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;

2. 格式信息:

 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Safari/537.36" "-"
    
$remote_addr      192.168.20.17                 记录客户端源IP地址

$remote_user         -                          记录认证用户信息

[$time_local]     [01/Aug/2019:10:12:15 +0800]  记录访问网站时间信息

$request          "GET / HTTP/1.1"              记录请求行信息

$status           403                           记录响应状态码信息


$body_bytes_sent  555                           记录响应数据信息流量多少


$http_referer                                   显示盗取资源网站信息 


$http_user_agent  Chrome/75.0.3770.100          记录用户浏览器客户端信息

$http_x_forwarded_for                          

9.如何编写盗链代码文件

[root@web02 bbs]# cat /html/bbs/index.html 





 
老男孩的博客！

我的博客是
博客地址



 

上传照片
[root@web02 /html/bbs]# systemctl res
rescue        reset-failed  restart       

image.png

10.网站服务location配置

作用说明: 匹配不同的uri, 作出不同处理动作
匹配方式:

~           区分大小写匹配信息     03 
~*          不区分大小写匹配信息   03 
=           精准匹配               匹配优先级最高
^~          优先匹配信息           02 
/目录/      直接匹配指定uri        04 
oldboy.jpg 
/           默认匹配               05

实践操作:

bbs.conf
location ~ /oldboy/ {
return   200;
}
location ~* \.jpg$  {
return   301;
}
location = / {
return   302;
}
PS: 
在指定目录信息时, 可以精准匹配
在指定文件信息时, 不可以精准匹配    
location /   {
return   401;
}
location ^~ /image/ {
return   403;
}
location /old/  {
 return   501;
}

实际应用:
可以灵活管理网站资源路径信息

11.网站页面跳转

a 实现uri信息跳转
b 实现url信息跳转
c 实现HTTPs跳转
d 实现伪静态配置

实现跳转方式:

rewrite: 
Syntax: rewrite regex replacement [flag];
regex:       要替换的信息/正则方式匹配
replacement  替换成什么信息
flag:        设置标记
Default:    —
Context:    server, location, if
    
· last   == continue -- shell
stops processing the current set of ngx_http_rewrite_module directives and starts a search for a new location matching the changed URI;
实现跳转之后, 会重新发起访问,匹配其他location, 执行相应动作
· break  == exit
stops processing the current set of ngx_http_rewrite_module directives as with the break directive;
实现跳转之后, 不会重新发起访问, 直接到指定站点目录进行访问
PS: 以上两种跳转方式, 实现地址跳转后, 不会修改uri信息
    
· redirect  302  应用比较广  ******
returns a temporary redirect with the 302 code; used if a replacement string does not start with “http://”, “https://”, or “$scheme”;
进行临时跳转
rewrite.oldboy.com/break/  -->  rewrite.oldboy.com/test01/
rewrite.oldboy.com/break/  -服务端-  rewrite.oldboy.com/test01/ --- web服务器
· permanent 301
returns a permanent redirect with the 301 code.
进行永久跳转
rewrite.oldboy.com/break/  -->  rewrite.oldboy.com/test/  --- 让浏览器记录跳转方式
rewrite.oldboy.com/break/  -浏览器-  rewrite.oldboy.com/test/  --- web服务器  
www.360buy.com   ---  www.jd.com 
www.360buy.com             -浏览器-  www.jd.com                --- web服务器   
PS: 以上两种跳转方式, 实现地址跳转后, 会修改uri信息

跳转测试配置01: 掌握last跳转和break跳转之间区别:

server {
       listen            80;
       server_name       rewrite.oldboy.com;
       root              /html;
       location  ~ ^/break/ {
           rewrite  ^/break/  /test/  break;
       }
       location  ~ ^/last/  {
           rewrite  ^/last/  /test/  last;
       }
       location   /test/ {
           default_type   application/json;
           return 200 'ok';
       }
    }

image.png

image.png

测试: uri信息跳转
例1: 用户访问/oldboy/oldboy.html实际上真实访问
是/oldboy/oldboy01/oldboy.html

server {
       listen            80;
       server_name       rewrite.oldboy.com;
       location  /  {
           root      /html;
           #rewrite   /oldboy/oldboy.html   /oldboy/oldboy01/oldboy.html  redirect;
           rewrite   (.*)                   /oldboy/oldboy01/oldboy.html  redirect;      
       }
    }

    return:
    server {
       listen            80;
       server_name       rewrite.oldboy.com;
       location  /  {
           root      /html;
           return   302   http://rewrite.oldboy.com/oldboy/oldboy01/oldboy.html;     
       }
    }   

用户访问/2014/oldboy/oldgirl/oldboy.html实际上真实访问是/2018/oldboy/oldgirl/oldboy.html
第一个历程: 创建uri目录结构信息
mkdir 2014/oldboy/oldgirl/ -p   --- 跳转前目录结构
echo oldboy62 >2014/oldboy/oldgirl/oldboy.html
mkdir 2018/oldboy/oldgirl/ -p   --- 跳转后目录结构
echo oldboy62 >2018/oldboy/oldgirl/oldboy.html
    
/2014/oldboy/oldgirl/oldboy.html    /2018/oldboy/oldgirl/oldboy.html
              (.*)$                                $1
    
第二个历程: 编写配置文件
server {
       listen            80;
       server_name       rewrite.oldboy.com;
       location  /  {
           root      /html;
       }
       location /2014/ {
          rewrite ^/2014/(.*)$ /2018/$1 redirect;
          return  302    http://rewrite.oldboy.com/2018/oldboy/oldgirl/oldboy.html;
       }
    }

11.用户访问/2014/oldboy/oldgirl/oldboy.html实际上真实访问是/2018/oldboy/oldgirl/oldboy.html

第一个历程: 创建uri目录结构信息
mkdir 2014/oldboy/oldgirl/ -p   --- 跳转前目录结构
echo oldboy62 >2014/oldboy/oldgirl/oldboy.html
mkdir 2018/oldboy/oldgirl/ -p   --- 跳转后目录结构
echo oldboy62 >2018/oldboy/oldgirl/oldboy.html
    
/2014/oldboy/oldgirl/oldboy.html    /2018/oldboy/oldgirl/oldboy.html
              (.*)$                       $1

第二个历程: 编写配置文件
server {
       listen            80;
       server_name       rewrite.oldboy.com;
       location  /  {
           root      /html;
       }
       location /2014/ {
          rewrite ^/2014/(.*)$ /2018/$1 redirect;
          return  302    http://rewrite.oldboy.com/2018/oldboy/oldgirl/oldboy.html;
       }
    }

12.用户访问/test/oldboy.html目录下任何内容, 实际上真实访问是http://www.oldboy.com/oldboy.html

第一个历程: 创建站点目录环境
mkdir test  ; echo oldboy62 >oldboy.html 
方式一: 将oldboy.html 移动
mv test/oldboy.html ./ 
方式二: 不调整目录结构信息
         location  /  {
            root      /html/test/;
         }
 第二个历程: 进行配置操作
         server {
            listen            80;
            server_name       rewrite.oldboy.com;
            location  /  {
                root      /html;
            }
            location /test/ {
               rewrite ^/test/(.*)$ http://rewrite.oldboy.com/$1 redirect;
            }
         }

13.用户访问course-11-22-33.html实际上真实访问是/course/11/22/33/course_33.html

第一个历程: 准备站点目录环境
mkdir  course/11/22/33/ -p
cd course/11/22/33/
echo oldboy62 >course_33.html
         
第二个历程: 
[root@web01 33]# cat /etc/nginx/conf.d/rewrite.conf 
         server {
            listen            80;
            server_name       rewrite.oldboy.com;
            location  /  {
                root      /html;
                rewrite ^/course-(.*)-(.*)-(.*)   /course/$1/$2/33/course_$3  last;
                rewrite ^/course-(.*)             /course/11/22/33/course_33.html last;
            }
}

14.用户访问course-11-22-33.html实际上真实访问是/course/11/22/33/course_33.html

第一个历程: 准备站点目录环境
mkdir  course/11/22/33/ -p
cd course/11/22/33/
echo oldboy62 >course_33.html
         
第二个历程: 
[root@web01 33]# cat /etc/nginx/conf.d/rewrite.conf 
         server {
            listen            80;
            server_name       rewrite.oldboy.com;
            location  /  {
                root      /html;
                rewrite ^/course-(.*)-(.*)-(.*)   /course/$1/$2/33/course_$3  last;
                rewrite ^/course-(.*)             /course/11/22/33/course_33.html last;
            }

15. 访问rewrite.oldboy.com --- www.jd.com 如何实现 url

解决方式一:
server { 
       listen            80;
       server_name       rewrite.oldboy.com;
       rewrite  ^/(.*)   http://www.jd.com/$1  redirect;
    }
server {
       listen            80;
       server_name       www.jd.com;
       location  /  {
           root      /html;
           index     index.html;
       }
    }
解决方式二:
[root@web01 html]# vim /etc/nginx/conf.d/rewrite.conf 
server {
       listen            80;
       server_name       rewrite.oldboy.com www.jd.com;
       location  /  {
           root      /html;
           index     index.html;
         if ($http_host ~* ^rewrite.oldboy.com$) {
           rewrite  ^/(.*)   http://www.jd.com/$1  redirect;
         }
       }
    }

16.nginx读取照片 文本信息

[root@web01 ~]# ll /usr/share/nginx/html
total 8
-rw-r--r-- 1 root root 494 Apr 23 22:36 50x.html
-rw-r--r-- 1 root root 612 Apr 23 22:36 index.html