从0安装nginx到前端项目部署教会你最简单的nginx部署前端项目很久没有搞nginx了，大概快一年了。趁着今天空闲

很久没有搞nginx了，大概快一年了。趁着今天空闲搞一下，顺便记录一下。防止以后忘记。

一、准备

前言：安装nginx建议使用rpm包，因为之前碰到如果在内网服务器上面，可能新机子的话连基本的gcc编译环境都没有，解压安装各种包都需要环境，并且有时候有的nginx包还需要其他包做配置会相对的麻烦。而rpm不需要，只需要把nginx的rpm包传到服务器上面解压稍微配置就可以。

之前在内网以及nginx.zip包上面踩过很多坑，包括因为内网不能直接使用yum源去下载需要的东西。这篇文章记录下从0到nginx的安装再到部署前端项目，相对简单，有经验的直接略过。

基本条件准备：

云虚拟主机一台。
分别下载xshell、xftp，在自己电脑上安装
下载nginx的rpm包，准备待会上传到服务器安装（我的linux是Centos7.0）最好是用7的以免其他版本问题。

二、开始安装

将rpm上传的Linux的文件夹📂

然后在对应目录下执行安装命令：sudo rpm -ivh nginx-1.18.0-2.el7.ngx.x86_64.rpm

这一步如果是Centos8的系统可能会出现如下报错： warning: nginx-1.20.2-1.el7.ngx.x86_64.rpm: Header V4 RSA/SHA1 Signature, key ID 7bd9bf62: NOKEY error: Failed dependencies: libcrypto.so.10()(64bit) is needed by nginx-1:1.20.2-1.el7.ngx.x86_64 libcrypto.so.10(OPENSSL_1.0.2)(64bit) is needed by nginx-1:1.20.2-1.el7.ngx.x86_64

2022.02.23_肖国垚&97f0d554226403f5d23705008d187f57.png 解决：在后面加上 --force --nodeps 如 sudo rpm -ivh nginx-1.18.0-2.el7.ngx.x86_64.rpm --force --nodeps即可。

提示 Thanks for using nginx! 表示安装成功。

使用测试命令查看nginx所在位置：nginx -t

2022.02.23_肖国垚&facb7665879cdafdb4d2a6a80c1a7700.png

三、启动nginx并部署

1、启动nginx

命令：nginx -s reload

这一步如果报错：nginx: [error] invalid PID number "" in "/var/run/nginx.pid"

可能会是因为nginx的进程已经存在，或者nginx默认配置问题。我们这里因为是刚刚安装，所以是因为nginx的默认配置问题，要给nginx指定配置文件nginx.cong在哪。

使用nginx -c指定配置文件：nginx -c /etc/nginx/nginx.conf，然后再重新启动nginx。

2022.02.23_肖国垚&52617b37be1d22030af29b24cd39d228.png

这样子代表我们nginx已经启动了。

2、解决端口问题

这个问题卡了我好久，我印象中以前是端口可以随意开随意用的，因为nginx默认配置为80端口搞得我启动了一直访问不了。原因是80/8080/8443/443这几个端口需要备案才可以使用！

所以这里我们需要把默认配置的端口改一下，再目录 /etc/nginx/conf.d中的 default.conf文件里面默认80端口改为8089

server {
    listen       8090;  #原本的80改为8090。它表示对外的端口，我们是通过这个端口访问当项目的
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html; #前端打包后的dis文件夹下的文件放在这个地址上面
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

然后重启nginx:nginx -s reload，接着访问主机ip+端口：http://106.225.185.9:8090/

就可以看到效果：

2022.02.23_肖国垚&4e5e84a2e861978f4f30be7f36bf798f.png

3、部署前端项目并配置

最后一步把我们打包好的dist文件内容传到 /usr/share/nginx/html 目录下，就算是部署好了

2022.02.23_肖国垚&ebe6b6aecccb2478a6412d2766e10cd2.png

解决刷新404问题：

当你的前端项目启动的是history模式，在访问非首页刷新页面的时候会404，需要加上重定向配置：

server {
    listen       8090; 
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; #每次找不到文件时候去重定向到首页
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

开启gzip压缩：

gzip是资源压缩功能，可以使用户在访问时候更快下载你的静态资源文件，需要在http层配置，在/etc/nginx目录下找到nginx.conf配置文件，把如下配置加到http里面然后重启nginx即可。

# 开启gzip
gzip on;

# 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
gzip_min_length 1k;

# gzip 压缩级别 1-10 
gzip_comp_level 2;

# 进行压缩的文件类型。

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

对比开启压缩和未开启压缩的资源下载大小：

未开启：