使用 Nginx 搭建静态网站

Question

开始建站了，暂时还没想要做些什么东西。Anyway，先搞个云服务器吧，那要怎么搭建呢？先来个最简单的。

以阿里云服务器为例，假设公网 IP 为 100.2.3.4（随便乱写的）。

1. 登录云服务

$ ssh root@100.2.3.4

2. 安装 Nginx 及相关命令

# 安装
$ yum install nginx -y

# 启动
$ nginx

# 关闭
$ nginx -s stop

# 重启
$ nginx -s reload

3. Nginx 默认配置

Nginx 配置文件目录一般在 /etc/nginx/ 下，打开 nginx.conf 文件可以看到配置：

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
        location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
}

当外网用户访问服务器 Web 服务由 Nginx 提供，Nginx 需要配置静态资源的路径信息才能通过 URL 正确访问到服务器上的静态资源。

当我们在服务器上安装并启动 Nginx 之后，就可以通过 http://<域名或IP> 访问我们的网页了。所以，在浏览器中输入 http://100.2.3.4 即可。

我们观察到浏览器的地址变成了 http://100.2.3.4/index.html，这页面是安装 Nginx 的默认站点，可以在 /usr/share/nginx/html 目录下找到。在 nginx.conf 配置文件中，有一项 root /usr/share/nginx/html 的配置，意思是当外网访问服务器跟目录时，Nginx 会将资源指向 /usr/share/nginx/html 的站点。

但如果输入地址，无法打开（如下截图）。

以阿里云为例，需要在云服务器添加安全组规则，添加并保存，重新刷新页面就能打开了。

关于阿里云服务器安全组规则说明，推荐这篇文章。

4. 修改 Nginx 配置

我习惯将前端静态资源放置到服务器的 /data/www 下，因此将配置修改为 root /data/www。此时访问 http://100.2.3.4 会指向 /data/www/index.html（在不配置 location 的 index 情况下，Nginx 默认配置是 index.html）。

server {
    listen       80;
    server_name  _;
    root         /data/www;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
    }

    error_page 404 /404.html;
    location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

修改配置后，记得执行 ngnix -s reload 重启 Nginx 服务。

5. 将 Webpack 打包的文件上传服务器

由于我使用的是 Mac 机器，因此可以直接在系统终端使用 scp 命令将本地文件上传到云服务器。

# scp [参数] [原路径] [目标路径]
$ scp -r /Users/frankie/Desktop/Web/react-demo/dist/* root@100.2.3.4:/data/www

scp（secure copy）用于在 Linux 下进行远程拷贝文件的命令。类似于 cp，只不过 cp 只能在本机进行拷贝，不能跨服务器。-r 表示递归复制整个目录。

关于 scp 更多细节，请看文章。

需要注意一下，下面两种的区别：

# 1️⃣
$ scp -r /xxx/dist /data/www

# 2️⃣
$ scp -r /xxx/dist/* /data/www

其中 1️⃣ 得到的是 /data/www/dist，而 2️⃣ 得到的是 /data/www。前者表示将 dist 整个目录拷贝至 /data/www 下。后者是把 dist 目录下的所有子文件和子目录都拷贝至 /data/www。

换句话说就是，前者配置 root 的路径应该是 /data/www/dist，后者则为 /data/www。

效果如下：

$ scp -r /Users/frankie/Desktop/Web/react-demo/dist/* root@100.2.3.4:/data/www/
root@100.2.3.4's password: 
bundle.2b1a17.js                              100% 1580   120.1KB/s   00:00    
favicon.ico                                   100% 9662   724.9KB/s   00:00    
index.html                                    100% 2045   149.9KB/s   00:00    
vendors.chunk.7fb171.js                       100%  625KB 409.8KB/s   00:01

[root@ali-ecs www]# ls
bundle.2b1a17.js  favicon.ico  index.html  vendors.chunk.7fb171.js

6. 看效果

在浏览器中访问 http://100.2.3.4 即可看到我们配置的网页了。

最简单的 Nginx 部署静态网页就完了，其他的下次再讲...