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

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

# 获取 key
curl -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 update
sudo apt install nginx

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

nginx

4. 放通防火墙端口

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

sudo ufw allow http

5. 访问 Nginx 示例页面

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

http://43.21.15.16（替换为你的服务器 ip 地址）

或者，如果是本地服务器：
http://localhost

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

二、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

使用常用的文本编辑工具，例如 nano、vim等打开新复制的配置文件，添加自定义的配置：

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 地址访问网站测试是否成功。