前置准备

• 一台 linux 服务器（笔者这里以 Ubuntu 为例）
• 一个证书（没有可以不用管，后面的证书部署需要这个）
• 一个网站的静态资源产物

知识储备

• ssh 登录远程服务器：ssh root@xx.xx.xx.xx，然后输入密码即可。
• ssh 传输文件到远程服务器：scp -r ./dist root@x.x.x.x:/home/website/，这里表示将当前目录下 dist 目录全部传输到服务器 /home/website 目录下

快速上手

nginx 安装

• apt update && apt install nginx

安装完之后，nginx 的默认配置文件在 /etc/nginx/nginx.conf。

基础的 nginx 配置

复制下面内容，改动其中部分内容即可，相关改动可往后看。

user www-data;

#启动进程,通常设置成和cpu的数量相等
worker_processes  2;

#全局错误日志
error_log  /var/log/nginx/error.log;
error_log  /var/log/nginx/notice.log  notice;
error_log  /var/log/nginx/info.log  info;

#PID文件，记录当前启动的nginx的进程ID
pid  /var/log/nginx/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

#工作模式及连接数上限
events {
    worker_connections 1024;    #单个后台worker process进程的最大并发链接数
}

#设定http服务器，利用它的反向代理功能提供负载均衡支持
http {
    default_type  application/octet-stream;

    #设定日志
    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;
    rewrite_log     on;

    #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，
    #必须设为 on,如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，以平衡磁盘与网络I/O处理速度，降低系统的uptime.
    sendfile        on;
    #tcp_nopush     on;

    #连接超时时间
    keepalive_timeout  120;
    tcp_nodelay        on;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    # include /etc/nginx/conf.d/*.conf;
    # include /etc/nginx/sites-enabled/*;
    include mime.types;

    #gzip压缩开关
    gzip  on;

    #HTTP服务器
    server {

         #监听80端口，80端口是知名端口号，用于HTTP协议
        listen       80;

        # server_name  xiaohanglin.site localhost 127.0.0.1;

        #首页
        index index.html;

        #指向根目录
        root /home/website/docs/dist/;

        #编码格式
        charset utf-8;

        #代理配置参数
        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder-For $remote_addr;

        #静态文件，nginx自己处理
        location ~ ^/(assets)/ {
            try_files $uri $uri/ =404;
            #过期30天，静态文件不怎么更新，过期可以设大一点，如果频繁更新，则可以设置得小一点。
            expires 30d;
        }

        #静态文件，nginx自己处理
        location ~ ^/ {
            try_files $uri $uri/ =404;
        }

        #设定查看Nginx状态的地址
        location /NginxStatus {
            stub_status           on;
            access_log            on;
            auth_basic            "NginxStatus";
            auth_basic_user_file  conf/htpasswd;
        }

        #禁止访问 .htxxx 文件
        location ~ /\.ht {
            deny all;
        }

                #错误处理页面（可选择性配置）
        error_page  404 /404.html;
    }
}

配置修改

设置静态资源根目录

首先是设置你需要被 nginx 代理访问的静态资源目录，也就可以通过上面给出的服务器传输文件的命令把你要部署的资源传到服务器上，然后改下这一句配置：

root /home/website/docs/dist/;

把 root 后面的内容改到你传到服务器之后的目录路径。

设置资源请求处理

location ~ ^/(assets)/ {
    try_files $uri $uri/ =404;
    #过期30天，静态文件不怎么更新，过期可以设大一点，如果频繁更新，则可以设置得小一点。
    expires 30d;
}

#静态文件，nginx自己处理
location ~ ^/ {
    try_files $uri $uri/ =404;
}

这里主要看这两个，你可以设置自己的策略对资源进行控制，笔者这里针对 assets 前缀的静态资源请求直接设置了 30 天的缓存，其他资源则不做处理，看个人喜好即可。

这里的 try_files 就是拿到请求之后，直接根据请求路径和上面你设置的 root 目录，进行一层一层查找对应的资源，找不到就直接 404 就好了。

重启 nginx

改完配置之后执行 nginx -s reload 即可，接着就可以尝试访问一下试试了。