Nginx入门与前端静态网页部署

在云服务器上存放好网页代码文件后,如果想让网络中的其他电脑能够访问到这些网页,就需要在服务器上运行提供服务的软件,也就是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入门与前端静态网页部署

Welcome to nginx

如果有开启防火墙需要修改防火墙配置,添加允许访问规则。

命令

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中,eventshttp位于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/htmlroot /var/www/html;
  • 首页为index.htmlindex.htmindex.nginx-debian.htmlindex 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博客页面。

Nginx入门与前端静态网页部署

博客页面

到这里前端静态页面的简单部署也就完成了,像我们平时通过域名来访问网站也主要是配置文件更加复杂(配置域名、SSL、代理等),用到了HTTP服务器程序的更多功能。

参考资料

[1]

什么是 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

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!