使用nginx部署网站

技术文章第一时间送达！

作者：小火柴的蓝色理想

前面的话

如果服务器只需要放置一个网站程序，解析网站到服务器的网站，网站程序监听80端口就可以了。如果服务器有很多应用，借助nginx不仅可以实现端口的代理，还可以实现负载均衡。本文将详细介绍前端及nodeJS项目在服务器配置时需要用到的nginx配置。

安装

【卸载nginx】

在介绍如何安装nginx之前，先要介绍如何卸载nginx。因为nginx不正确的安装，导致无法正常运行，所以需要卸载nginx。

【安装nginx】

首先，更新包列表

然后，一定要在sudo下安装nginx

主机配置

【端口配置】

【主机名配置】

路径配置

【location】

nginx使用location指令来实现URI匹配

【根目录设置】

【别名设置】

【首页设置】

【重定向页面设置】

【try_files 设置】

反向代理

代理分为正向和反向代理，正向代理代理的对象是客户端，反向代理代理的对象是服务端。

反向代理（reserve proxy）方式是指用代理服务器来接受 Internet 上的连接请求，然后将请求转发给内部网络中的上游服务器，并将上游服务器上得到的结果返回给 Internet 上请求连接的客户端，此时代理服务器对外的表现就是一个 Web 服务器。

【负载均衡设置】

upstream，定义一个上游服务器集群

【反向代理设置】

proxy_pass 将请求转发到有处理能力的端上，默认不会转发请求中的 Host 头部

HTTPS配置

【HTTP2】

开启HTTP2服务非常简单，只需要在端口443后面添加http2即可。

gzip配置

开启网站的 gzip 压缩功能，通常可以高达70%，也就是说，如果网页有30K，压缩之后就变成9K， 对于大部分网站，显然可以明显提高浏览速度。

gzip配置在nginx.conf文件中已经存在，只不过默认是注释的状态，只需将注释符号去掉即可

缓存配置

如果服务器中存在静态资源，可设置本地强缓存。expires 7d表示在本地缓存7天

设置完成后，浏览器会自动添加expires和cache-control字段，而对于协商缓存Etag和Last-Modified，nginx默认开启，无需配置。

CSP配置

跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。为了防止它们，要采取很多编程措施，非常麻烦。很多人提出，能不能根本上解决问题，浏览器自动禁止外部注入恶意脚本？这就是"网页安全政策"（Content Security Policy，缩写 CSP）的来历。

CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置

目前，CSP有如下指令

指令值可以由下面这些内容组成：

隐藏信息

在请求响应头中，有这么一行 server: nginx，说明用的是 Nginx 服务器，但并没有具体的版本号。由于某些 Nginx 漏洞只存在于特定的版本，隐藏版本号可以提高安全性。这只需要在配置里加上这个就可以了：

配置流程

下面在/etc/nginx/conf.d下新建一个配置文件，命名为test-8081.conf，内容如下

注意：一般以域名-端口号来命名配置文件

下面使用sudo nginx -t来测试配置文件是否格式正确

如果不想让报文显示server的详细信息，需要将/etc/nginx/nginx.conf主配置文件中的server_tockens off前面的注释取消即可

接着，重启nginx服务

后端项目

下面来部署后端的nodejs项目，在/etc/nginx/conf.d目录下新建文件，该项目占用3000端口，则起名为api-xiaohuochai-cc-3000.conf

后台项目

后台项目起名为admin-xiaohuochai-cc-3001.conf。由于项目采用react构建，与普通的静态网站有些不同

1、前端路由

由于使用前端路由，项目只有一个根入口。当输入类似/posts的url时，找不到这个页面，这是，nginx会尝试加载index.html，加载index.html之后，react-router就能起作用并匹配我们输入的/posts路由，从而显示正确的posts页面。

2、反向代理

注意：一定要在api后面添加/，否则不生效

3、配置缓存及CSP

下面是详细的配置文件

前台项目

详细配置如下

SSR项目

如果前端项目是服务器端渲染的SSR项目，则与普通的前端项目有很大不同，它不仅需要守护后端程序，还有前端静态资源的处理，如果是首页，还需要处理www

详细配置如下

↓↓↓

看完本文有收获？请转发分享给更多人