在云服务器上存放好网页代码文件后,如果想让网络中的其他电脑能够访问到这些网页,就需要在服务器上运行提供服务的软件,也就是HTTP服务器程序。(在软件层面,Web服务器使用HTTP协议,大部分资料中会将HTTP服务器和Web服务器视为等价。Web服务器的概念和详细介绍参考:什么是 web 服务器?- MDN (mozilla.org)[1])
本文介绍Nginx的简单使用以及如何配置Nginx来提供服务。
Nginx
Nginx[2]是一个HTTP服务器程序(也是反向代理服务器、邮件代理服务器和通用的TCP/UDP代理服务器程序)。
从原理上来说,Nginx就是一个接收网络请求并进行处理(比如返回图片或静态网页代码,或者将请求转发给其它程序)的程序。反向代理等概念可以后面慢慢了解。
接下来从安装、命令、和配置三个部分进行介绍,并演示静态页面的部署(Ubuntu系统)。
安装
安装Nginx:
sudo apt update
sudo apt install nginx
详细安装指引参见:nginx: Linux packages[3]
安装成功后Nginx会自动启动,也可以直接运行可执行文件启动:
sudo nginx
启动后通过浏览器访问服务器IP地址就能看到默认的网页(这里在局域网中运行):
如果有开启防火墙需要修改防火墙配置,添加允许访问规则。
命令
Nginx启动后,可以通过使用-s
参数调用可执行文件来控制程序。
sudo nginx -s <signal>
常用的控制命令有:
-
关闭Nginx: sudo nginx -s quit
-
重新加载配置文件: sudo nginx -s reload
注意应使用启动Nginx程序的用户账户来执行控制命令。
sudo nginx -s stop
也用于关闭Nginx,但stop
会立即关闭,quit
会等待请求处理完毕后才关闭。
另外修改配置文件后可以通过sudo nginx -t
来检查配置文件是否有效。
配置
Nginx的工作方式取决于配置文件。默认情况下,配置文件在/etc/nginx
目录下(或/usr/local/nginx/conf
、/usr/local/etc/nginx
),名称为nginx.conf
。
配置文件结构和语法
配置文件中包含控制Nginx的简单指令simple directive
和块指令block directive
。
simple directive
由名称和参数组成,名称和参数通过空格分隔,以;
结尾,如:root /data/www;
。
block directive
结构与simple directive
类似,但它以{}
包含的一组附加指令结尾。如果在{}
中具有其它指令,则其称为上下文context
。
配置文件每一行中位于#
符号后的内容为注释。
配置文件内容结构参考如下:
# comment
http {
server {
location / { # block directive, in server
root /data/www; # simple directive
}
}
}
示例配置和
Directive
参考:Core functionality (nginx.org)[4]
配置文件中位于所有context
外的directive
称为位于main context
中,events
和http
位于main context
中,server
位于http
中,location
位于server
中。
http
提供用于指定HTTP服务器指令的配置文件上下文;server
为虚拟服务器配置;location
为基于请求URL的配置。相关指令说明参考:Module ngx_http_core_module (nginx.org)[5]
静态网页部署
实现提供文件的功能(静态内容服务)需要编辑配置文件,修改http
中的server
,为其设置location
。
在修改配置文件之前,我们可以先看一下默认的nginx.conf
配置文件,里面包含这一段内容:
http {
# 此处内容省略
include /etc/nginx/sites-enabled/*;
}
http
中有一条include /etc/nginx/sites-enabled/*;
指令,表示包含/etc/nginx/sites-enabled/
目录下的所有配置文件的内容。
在/etc/nginx/sites-enabled/
目录下可以看到有一个default
文件,这个文件的内容摘取如下:
# Default server configuration
#
server {
listen 80 default_server;
listen [::]:80 default_server;
# 此处内容省略
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
# 此处内容省略
}
可以看到/etc/nginx/sites-enabled/default
中包含默认的server
配置:
-
监听80端口: listen 80 default_server;
,listen [::]:80 default_server;
-
请求根目录为 /var/www/html
:root /var/www/html;
-
首页为 index.html
或index.htm
或index.nginx-debian.html
:index index.html index.htm index.nginx-debian.html;
-
服务器名称配置为空: server_name _;
-
设置 /
路径请求返回文件:location / { try_files $uri $uri/ =404; }
这里我们直接修改这个文件来返回指定的网页。
要返回的网页使用上一篇文章(跳转链接:使用Hexo创建个人博客)中生成的静态博客网页。进入到Hexo项目目录,执行生成网页命令,并将生成的public
目录完整复制到/var/www/
路径下:
hexo g
sudo cp -r public/ /var/www/
修改/etc/nginx/sites-enabled/default
文件内容如下,这里改为访问/
路径时直接返回根路径下的内容(/var/www/public
也就是上面Hexo生成文件复制后的路径)。
server {
listen 80 default_server;
listen [::]:80 default_server;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
root /var/www/public;
}
}
修改完成后检查配置文件是否有效:
ubuntu:~$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
提示失败信息需要检查语法是否有误。
如上提示配置文件测试通过后执行sudo nginx -s reload
命令重新加载配置文件。
加载成功后重新访问服务器IP地址就能看到Hexo博客页面。
到这里前端静态页面的简单部署也就完成了,像我们平时通过域名来访问网站也主要是配置文件更加复杂(配置域名、SSL、代理等),用到了HTTP服务器程序的更多功能。
参考资料
什么是 web 服务器?- MDN (mozilla.org): https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server
[2]
Nginx: https://nginx.org/en/
[3]
nginx: Linux packages: https://nginx.org/en/linux_packages.html#Ubuntu
[4]
Core functionality (nginx.org): https://nginx.org/en/docs/ngx_core_module.html
[5]
Module ngx_http_core_module (nginx.org): https://nginx.org/en/docs/http/ngx_http_core_module.html
原文始发于微信公众号(技术知识小记):Nginx入门与前端静态网页部署
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/184798.html