开发者学堂课程【Nginx 企业级 Web 服务实战：Nginx 实现 PC 和移动站点】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/649/detail/10756
Nginx 实现 PC 和移动站点（一）
内容介绍：
一、前言
二、新建一个PC web站点
三、新建一个Mobile web站点
四、root 与 alias
五、总结之前内容重点
一、前言
讲解一个示例：
根据公司最基础的环境做出一个 PC 端和移动端的效果，用户访问 PC 端域名的时候往往显示 PC 端内容，如果访问移动端显示移动端内容，怎么让用户区分是 PC 端还是移动端呢？
如果是 app，app 里显示的域名就是移动的域名，到了移动端后，页面显示的内容可能和 app 不同，因为电脑分辨率等原因可能会显示的比较大。但是移动端就不同，移动端会经过测试优化，专门适配手机。
另外当用户使用浏览器访问时，我们也会在 Nginx 做一些适配，判断浏览器类型，如果符合某些特征，适应移动就会转移到移动端域名。
功能怎么做，假设用户就是访问到移动端或者 PC 端，要新建两个目录，用以保存 PC web 站点或者 Mobile Web 站点代码，以及配置一些文件
二、新建一个 PC web 站点
新建一个配置目录，在该目录中新建了一个文件 pc.conf，并生成了一个 PC 端的页面文件
[root@s2 ~]# mkdir /apps/nginx/conf/conf.d
[root@s2 ~]#cat /apps/nginx/conf/conf.d/ pc.conf
server {
listen 80;
server_name www . magedu. net;
charset utf-8
location / {
root /data/nginx/html/pc;
index index.html index.htm;
}
}
[root@s2 ~]# mkdir /data/nginx/html/pc -p
[root@s2 ~]# echo "pc web" >
/data/nginx/html/pc/index.html
[root@s2 ~]#vim /apps/nginx/conf/nginx.conf
include /apps/nginx/conf/conf.d/ * .conf;
[root@s2 ~]# systemctl reload nginx
访问测试
上述 html 如果想要编辑的美观，需要一个专门的编辑工具，演示使用 PyCharm
进入后新建一个目录 linux39，之后在该目录下创建一个 HTML File，命名为index.html，选 html5 的版本，创建好后如图，直接写好类型，我们只需要在中写内容
title 编辑为 magedu 官网，之后可以在 body 中写静态页面，当输入< 时，就会提示<中可以写入的内容，比如写
输入
马哥教育官方网址
然后再将代码复制，看上去就会美观。
在 reload 之后还需要写 host 文件解析，输入 sudo vim /etc/hosts
之后输入密码
在172.20.0.101 www.linux39.com 后添加 www.magedu.net mobile.magedu.net
所以现在有两个域名，一个是 PC 端，一个是移动端
现在访问网址 magedu.net
页面显示结果为172.20.0.101
未在 nginx 主配置中引用 include，在主配置中输入 include /apps/nginx/conf/conf.d/*.conf;
然后执行一个/apps/nginx/sbin/nginx -t
再输入 /apps/nginx/sbin/nginx -s reload
之后再刷新网址
如图显示出官网，这就是 PC端
再输入 vim /data/nginx/html/pc/index.html
将马哥教育官方网址改为马哥教育官方 PC 网址
刷新网址，显示页面为马哥教育官方 PC 网址
三、新建一个 Mobile web 站点
[root@s2 ~]# cat /apps/nginx/conf/conf.d/mobile.conf
server {
listen 80;
server_name mobile.magedu.net;
location / {
root /data/nginx/html/mobile;
}
}
[root@s2 ~]# mkdir /data/nginx/html/mobile-p
[root@s2 ~]# echo "mobile web" >>
/data/nginx/html/mobile/index.html
[root@s2 ~]# systemctl reload nginx
演示：
直接拷贝，输入 cp linux39-pc.conf linux39-mobile.conf
再输入vim linux39-mobile.conf ^C
/apps/nginx/sbin/nginx -t
显示域名冲突：
[warn] conflicting server name “www.magedu.net” on 0.0.0.0;80, ignored
需要修改
再输入cp linux39-pc.conf linux39-mobile.conf
vim linux39-mobile.conf
修改server_name为mobile.magedu.net
路径也修改为 /data/nginx/html/mobile
那么该路径也需要创建，输入mkdir /data/nginx/html/mobile
cp/data/nginx/html/pc/index.html /data/nginx/html/mobile/
输入vim /data/nginx/html/mobile/index.html
然后将首页也改为移动端，将马哥教育官方 PC 网址修改为马哥教育官方 mobile 网址
然后继续输入/apps/nginx/sbin/nginx -t
/apps/nginx/sbin/nginx -s reload
现在使用 www.去访问就是显示 PC 网址，
使用 mobile.magedu.net 访问就显示为马哥教育官方 mobile 网址，如图
一个 nginx 可以监听多少个域名呢？其实在源代码上没有上限
那么站点做好之后是怎么来访问的呢？
如图
其中写了多个 server name，请求一旦被转发到 nginx 的 master 进程后就会处理，之后会交给 worker 进程，worker 进程处理时，观察访问哪个域名，此处有两个域名www.magedu.net 和 mobile.magedu.net，此时工作进程就会观察访问头部，访问哪个域名，如果访问 www.magedu.net，那么就会到它的 location 中去找相关的资源配置，目前没有配置太多，只配置了一个 location，该 location 指定了它所有的程序代码在什么地方
location / {
root /data/nginx/html/pc;
}
而 mobile 就会到
location / {
root /data/nginx/html/mobile;
}
中
如果再有 location 时也一样，是先匹配域名，再匹配域名访问的 uri，那么 nginx 是怎么查看域名的呢？
这个是客户端带的，是通过在请求中增加一个 Host 传递的，如图
显示请求的是 mobile.magedu.net 域名，就会调用该域名的 server 进行处理
再来写一个示例，例如当访问 PC 端时，该 PC 端可能显示效果比较好，我们给它分配一些图片，那么这些图片的路径不是在 uri 后面直接跟图片
也有可能直接跟，观察淘宝页面像这种
带有 tfs，tfs 可以理解为是一个 location，当访问 tfs 时，在做什么处理
tfs 是 Turbo File System，是淘宝的文件系统，专门用于放置这些图片。
那我们怎么实现呢？
当访问 www.magedu.net/tfs/1.jpg 时，我们希望能够将它调到指定目录中去，现在是没有的
实现还需要编辑该文件，输入vim linux39 -pc.conf
在复制一个 location，该 location 叫 tfs
location /tfs {
root /data/nginx/static/;
index index.html index.htm;
}
/tfs 是一个目录，该目录要放在 /data/nginx/static/ 中
现在先来创建该目录，输入
mkdir /data/nginx/static/tfs -p
cd /data/nginx/static/tfs/
ll
然后找一张图片，进入 magedu.net 网站寻找到一张1234.jpeg
然后将图片路径复制，输入
wget http://www.magedu.com/wp-content/uploads/2019/12/1234.jpeg
之后再输入
wget http://www.magedu.com/wp-content/uploads/2019/12/1234.jpeg^C
再来 reload，输入
/apps/nginx/sbin/nginx -s reload
mv ^C
cp 1234.jpeg 1.jpeg
此时来访问网址，输入www.magedu.net/tfs/1234.jpg
显示如图
