Skip to content

Nginx

安装

环境安装 - Nginx

常用命令

bash
# 查看状态(一般安装完成能自动启动)
systemctl status nginx
# 手动启动
systemctl start nginx
# 重启
systemctl restart nginx
# 测试配置文件是否正确(这个方法也能输出 配置文件的存储路径)
nginx -t
# 编辑配置文件
vim /etc/nginx/nginx.conf

配置文件解析

一般在 http 下配置,一个 server 就是一个服务(每个服务 listen 一个端口)。下边展示两个静态服务:

nginx
{
  ...
	http {
  	...
  	server {
      listen       1110;
      index        index.html;
      root         /path/to/project-a;
    }

  	server {
      listen       1111;
      index        index.html;
      root         /path/to/project-b;
    }
  }
}

单页应用(如 Vue)

按照上述配置:假如向服务器请求 ip:1111,能够访问到 ip:1111/path/to/project-b/index.html。此时在页面点击按钮跳转到 ip:1111/login,可以访问登录页(单页应用的路由动态渲染页面)。紧接着刷新页面,就会向服务器请求 ip:1111/login,因为该静态服务下并没有 login 相关的静态文件,就会报 404 的错误。

按照Vue Router History Mode - nginx 配置,增加配置如下:

nginx
server {
  listen       1111;
  index        index.html;
  root         /path/to/project-b;
  location / { 
    try_files $uri $uri/ /index.html; 
  } 
}

此时访问 ip:1111/login 找不到文件,就会尝试找 ip:1111/login/,这里找不到就访问根目录下的 /index.html 文件,当返回 index.html 文件之后,Vue Router 也在前端初始化完成,检测到页面 url 是 ip:1111/login 就会动态渲染登录页了。

根据域名转发到对应端口

先在域名解析处配置好 A 记录,将域名指向服务器 ip 地址。

随后 Nginx 监听 80 端口,根据域名转发至本地对应端口服务。

nginx
server {
  listen 80;
  server_name www.example.com example.com;
  location / {
    proxy_pass http://localhost:3000;
  }
}
不推荐阿里云的“隐性 URL”

根据域名转发到服务器的对应端口可以从“域名解析”处配置实现,

image

如图所示:先配置一条 A 记录,访问http://school.example.com能解析到指定 ip;然后再配置一条隐性 URL,实现访问http://imgs.example.com实际转发为:http://school.example.com:<端口号>的效果。

这种效果能满足一些简单场景,但如图片这类静态服务,会导致 Content-Type 头出现问题,如图所示:

image

最终效果就是:

通过浏览器地址栏直接访问地址,会先看到访问配置的隐性 URL(响应头有问题),再访问实际的 URL(响应头没问题)

通过 js 访问地址,会连续两次访问隐性 URL(响应头有问题)

这可能是阿里云刻意的策略,很早之前验证的结果,后续再遇此类场景可通过动图表现下。