跳到主要内容位置

Nginx 教程:如何在 Ubuntu 20.04 下安装并配置 Nginx

我们前端工程师在开发完前端项目,并把它打包成静态的网站之后,需要上传到服务器上,才能让互联网上感兴趣的用户来访问。我们之前在阿里云购买了一台远程服务器,它现在还不能用来让用户访问网站,因为静态的 HTML 文件是通过 HTTP 协议来发送到用户的浏览器上的,那就需要在服务器里面安装一个服务器程序,来处理 HTTP 请求,并把我们的静态网站发送到用户的浏览器上。 常见的服务器程序有:

  • Nginx。
  • Apache。
  • Tomcat。
  • IIS。等等

另外我们所熟知的 Node.js,也是一个服务器程序。我们这里以 Nginx 为例,来展示如何在安装了 Ubuntu 20.04 的服务器上安装并配置 Nginx,然后上传网站测试访问。

一、安装 Nginx#

安装 Nginx 需要安装 Nginx 依赖、添加 APT 源、启动 Nginx、放通防火墙端口等一系列步骤,我们分别来看一下。

1. 登录服务器#

在安装 Nginx 之前需要远程 SSH 登录到云服务器上边,如果你是在本地测试安装,那么可以省略这一步。

ssh ecs# 或# ssh -i some/path/to/key 用户名@ip

2. 安装 Nginx 依赖包#

接着安装 Nginx 的依赖包:

# 安装依赖sudo apt install curl gnupg2 ca-certificates lsb-release

如果是以 root 用户登录的,可以省略 sudo,下同。

然后添加 Nginx 的 apt 源。 apt是 Ubuntu 20.04 操作系统的软件包管理器,默认使用 Ubuntu 自己提供的软件源去查找软件。Nginx 有自己的软件源,这样安装的 Nginx 版本会比较新,所以可以利用它的软件源来安装。运行下边的这些命令添加 Nginx 的 apt 源:

echo "deb http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" \    | sudo tee /etc/apt/sources.list.d/nginx.listecho "deb http://nginx.org/packages/mainline/ubuntu `lsb_release -cs` nginx" \    | sudo tee /etc/apt/sources.list.d/nginx.listecho -e "Package: *\nPin: origin nginx.org\nPin: release o=nginx\nPin-Priority: 900\n" \    | sudo tee /etc/apt/preferences.d/99nginx

再添加 Nginx 的签名密钥,把它移动到受信任的存储区。

# 获取 keycurl -o /tmp/nginx_signing.key https://nginx.org/keys/nginx_signing.key# 移动 key 到受信任的存储区sudo mv /tmp/nginx_signing.key /etc/apt/trusted.gpg.d/nginx_signing.asc

这些操作都是固定的,直接复制粘贴命令就好了。

3. 安装 Nginx#

添加完 Nginx 的 apt 源之后,更新 apt,然后安装 Nginx:

sudo apt updatesudo apt install nginx

安装完成之后直接运行 nginx这个命令来启动 Nginx:

nginx

4. 放通防火墙端口#

之后需要在阿里云服务器的防火墙里边放通 80 端口,因为 HTTP 请求默认是使用 80 端口来监听的: img 如果是本地服务器,并且开启了 Ubuntu 操作系统防火墙,还需要放通 Unbuntu 防火墙的 80 端口:

sudo ufw allow http

5. 访问 Nginx 示例页面#

之后我们访问一下 Nginx 的测试页面,在浏览器里边输入:

http://43.21.15.16(替换为你的服务器 ip 地址)
或者,如果是本地服务器:http://localhost

记得在 ip 前加上 http://协议。如果能看到 Welcom to nginx 这个欢迎页面,就说明 Nginx 服务启动成功了。 img

二、Nginx 配置文件简介#

接下来我们需要配置 Nginx,来让它加载我们的静态网站。首先看一下他的默认配置文件,默认配置文件在 /etc/nginx/conf.d/default.conf中,我们可以用 cat /etc/nginx/conf.d/default.conf来看一下它里面的内容:

server {    listen       80;    server_name  localhost;
    #access_log  /var/log/nginx/host.access.log  main;
    location / {        root   /usr/share/nginx/html;        index  index.html index.htm;    }
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html    #    error_page   500 502 503 504  /50x.html;    location = /50x.html {        root   /usr/share/nginx/html;    }
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80    #    #location ~ \.php$ {    #    proxy_pass   http://127.0.0.1;    #}
    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000    #    #location ~ \.php$ {    #    root           html;    #    fastcgi_pass   127.0.0.1:9000;    #    fastcgi_index  index.php;    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;    #    include        fastcgi_params;    #}
    # deny access to .htaccess files, if Apache's document root    # concurs with nginx's one    #    #location ~ /\.ht {    #    deny  all;    #}}

配置文件的语法为:

  • 由关键字加上大括号这样的形式来构成的,称为一个配置块。
  • 每个配置项是由一个关键字(属性名),值(属性值),和一个分号(必须)构成的。

接下来看一下关键的配置项:

  • server。代表一个服务器的配置,可以配置多个 server 块,每个 server 之间通过监听不同的端口,来处理不同的请求。
  • listen。server 里边的 listen 配置,是用来设置监听的端口的,这里是 80,HTTP 端口。
  • server_name。服务器名称,一般填写域名。如果没有可以先写 localhost 或者 服务器 IP 地址。
  • location。用来匹配域名后面的 URL 路径,这里匹配的是根路径。在它的里边:
    • root。指的是网站的根目录。
    • index。指定网站的首页,这里指定的是 index.html 和 index.htm。

三、添加自定义 Nginx 配置#

我们可以在默认配置的基础上,添加上自定义配置,我们复制一份默认配置,并且起个别的名字,比如以域名为配置文件名,用于区分各个配置项,Nginx 会自动加载这些配置文件:

cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/yourdomain.conf

使用常用的文本编辑工具,例如 nanovim等打开新复制的配置文件,添加自定义的配置:

server {    server_name  zxuqian.cn;    listen 80
    location / {        root   /var/www/html;        index index.html;        try_files $uri $uri/ $uri.html =404;    }}

在这个配置文件中,我们把:

  • server name 改成自己的域名。
  • listen 监听 80 端口。
  • location 里边:
    • root 网站根目录改成了 /var/www/html,这个可以随意。
    • index 只保留 index.html 这个首页。
    • try_files 是一个 Nginx 指令,它会根据域名后面的 URL 部分,去寻找同名的文件或目录,如果没有找到就返回 404。$uri 变量表示域名后面的 URL 片段,这里指定了三种:
      • $uri匹配整个 url 片段。
      • $uri/匹配 URL 目录,也就是以 '/' 结尾的 URL,例如 [https://zxuqian.cn/config-babel-to-test-latest-ecmascript-features](https://zxuqian.cn/config-babel-to-test-latest-ecmascript-features/)/
      • $uri.html 匹配以指定文件名结尾的 URL,这里是 .html。

配置完成之后,需要重新加载 Nginx 配置文件,下面这行命令:

nginx -s reload

四、部署网站#

最后把网站部署上去,可以直接用 scp 命令,假如我们的静态网站在 build目录下,可以用下面这行命令,把 build 目录下的所有文件,拷贝到服务器指定的目录下:

scp -r ./build/* ecs:/var/www/html/

在这条命令中:

  • -r 代表把当前目录以及子目录下面所有的文件都复制到服务器上。
  • 指定本地目录,本地目录/*这里是必须的,可以把隐藏的文件(点号开头的文件)也一同复制。
  • 指定远程服务器的目录,我们这里用的 ecs, 跟 ssh 命令中配置的名字一样。冒号后边指定服务器上的目录,这里使用 Nginx 配置文件中,root配置指定的目录。

把整个目录复制上去之后,可以用域名访问一下网站测试,如果能够打开,就说明部署成功了。

小结#

好了,这个就是如何在 Ubuntu 20.04 下安装和配置 Nginx 的教程,主要是这几个步骤:

  • 添加 Nginx 的 apt 源。
  • 安装 Nginx。
  • 放通服务器防火墙的 80 端口。
  • 修改 Nginx 配置文件,指定网站存放目录、网站首页以及根据 URL 查找文件的方式。
  • 最后重新加载配置文件,输入 IP 地址访问网站测试是否成功。