使用nginx部署网站

时间:2022-09-21 18:42:53

前面的话

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

安装

【卸载nginx】

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

sudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件
sudo apt-get purge nginx nginx-common # 卸载所有东东,包括删除配置文件
sudo apt-get autoremove # 在上面命令结束后执行,主要是卸载删除Nginx的不再被使用的依赖包
sudo apt-get remove nginx-full nginx-common #卸载删除两个主要的包

【安装nginx】

  首先,更新包列表

sudo apt-get update

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

sudo apt-get install nginx
使用nginx部署网站

主机配置

【端口配置】

listen 127.0.0.1:;
listen *:;
listen localhost:;
# IPV6
listen [::]:;
# other params
listen default_serer ssl;
listen 127.0.0.1 default_server accept_filter=dataready backlog=

【主机名配置】

server_name www.xiaohuochai.com xiaohuochai.com
server_name *.xiaohuochai.com
server_name ~^\.xiaohuochai\.com$

路径配置

【location】

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

location = / {
# 完全匹配 =
# 大小写敏感 ~
# 忽略大小写 ~*
}
location ^~ /images/ {
# 前半部分匹配 ^~
# 可以使用正则,如:
# location ~* \.(gif|jpg|png)$ { }
}
location / {
# 如果以上都未匹配,会进入这里
}

【根目录设置】

location / {
root /home/test/;
}

【别名设置】

location /blog {
alias /home/www/blog/;
}
location ~ ^/blog/(\d+)/([\w-]+)$ {
# /blog//article-name
# -> /blog/-article-name.md
alias /home/www/blog/$-$.md;
}

【首页设置】

index /html/index.html /php/index.php;

【重定向页面设置】

error_page             /.html;
error_page /50x.html;
error_page = /1x1.gif; location / {
error_page @fallback;
}
location @fallback {
# 将请求反向代理到上游服务器处理
proxy_pass http://localhost:9000;
}

【try_files 设置】

try_files $uri $uri.html $uri/index.html @other;
location @other {
# 尝试寻找匹配 uri 的文件,失败了就会转到上游处理
proxy_pass http://localhost:9000;
}
location / {
# 尝试寻找匹配 uri 的文件,没找到直接返回
try_files $uri $uri.html =;
}

反向代理

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

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

【负载均衡设置】

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

upstream backend {
# ip_hash;
server s1.barretlee.com;
server s2.barretlee.com;
}
server {
location / {
proxy_pass http://backend;
}
}

【反向代理设置】

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

location /blog {
prox_pass http://localhost:9000; ### 下面都是次要关注项
proxy_set_header Host $host;
proxy_method POST;
# 指定不转发的头部字段
proxy_hide_header Cache-Control;
proxy_hide_header Other-Header;
# 指定转发的头部字段
proxy_pass_header Server-IP;
proxy_pass_header Server-Name;
# 是否转发包体
proxy_pass_request_body on | off;
# 是否转发头部
proxy_pass_request_headers on | off;
# 显形/隐形 URI,上游发生重定向时,Nginx 是否同步更改 uri
proxy_redirect on | off;
}

HTTPS配置

server{
listen 80;
server_name api.xiaohuochai.cc;
return 301 https://api.xiaohuochai.cc$request_uri;
}
server{
listen 443;
server_name api.xiaohuochai.cc;
ssl on;
ssl_certificate /home/www/blog/crt/api.xiaohuochai.cc.crt;
ssl_certificate_key /home/www/blog/crt/api.xiaohuochai.cc.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
if ($ssl_protocol = "") {
rewrite ^(.*)https://$host$1 permanent;
} }

【HTTP2】

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

server{
listen http2;
...
}

gzip配置

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

使用nginx部署网站

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

    ##
# Gzip Settings
## gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level ;
gzip_buffers 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

缓存配置

使用nginx部署网站

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

location / {
expires 7d;
...
}

  设置完成后,浏览器会自动添加expires和cache-control字段

  而对于协商缓存Etag和Last-Modified,nginx默认开启,无需配置

CSP配置

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

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

  目前,CSP有如下指令

指令    指令值示例    说明
default-src 'self' cnd.a.com 定义针对所有类型(js、image、css、web font,ajax 请求,iframe,多媒体等)资源的默认加载策略,某类型资源如果没有单独定义策略,就使用默认的。
script-src 'self' js.a.com 定义针对 JavaScript 的加载策略。
style-src 'self' css.a.com 定义针对样式的加载策略。
img-src 'self' img.a.com 定义针对图片的加载策略。
connect-src 'self' 针对 Ajax、WebSocket 等请求的加载策略。不允许的情况下,浏览器会模拟一个状态为 的响应。
font-src font.a.com 针对 WebFont 的加载策略。
object-src 'self' 针对 <object>、<embed> 或 <applet> 等标签引入的 flash 等插件的加载策略。
media-src media.a.com 针对 <audio> 或 <video> 等标签引入的 HTML 多媒体的加载策略。
frame-src 'self' 针对 frame 的加载策略。
sandbox allow-forms 对请求的资源启用 sandbox(类似于 iframe 的 sandbox 属性)。
report-uri /report-uri 告诉浏览器如果请求的资源不被策略允许时,往哪个地址提交日志信息。 特别的:如果想让浏览器只汇报日志,不阻止任何内容,可以改用 Content-Security-Policy-Report-Only 头。

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

指令值    指令示例    说明
img-src 允许任何内容。
'none' img-src 'none' 不允许任何内容。
'self' img-src 'self' 允许来自相同来源的内容(相同的协议、域名和端口)。
data: img-src data: 允许 data: 协议(如 base64 编码的图片)。
www.a.com img-src img.a.com 允许加载指定域名的资源。
.a.com img-src .a.com 允许加载 a.com 任何子域的资源。
https://img.com img-src https://img.com 允许加载 img.com 的 https 资源(协议需匹配)。
https: img-src https: 允许加载 https 资源。
'unsafe-inline' script-src 'unsafe-inline' 允许加载 inline 资源(例如常见的 style 属性,onclick,inline js 和 inline css 等等)。
'unsafe-eval' script-src 'unsafe-eval' 允许加载动态 js 代码,例如 eval()。

  admin.xiaohuochai.cc中的CSP配置如下

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline'; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site;";

隐藏信息

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

server_tokens   off;

配置流程

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

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

upstream xiaohuochai {
server 127.0.0.1:;
}
server{
listen ;
server_name 1.2.3.4;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_pass http://test;
proxy_redirect off; } }

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

使用nginx部署网站

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

使用nginx部署网站

  接着,重启nginx服务

sudo nginx -s reload
使用nginx部署网站

后端项目

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

upstream api {
server 127.0.0.1:3;
}
server{
listen ;
server_name api.xiaohuochai.cc;
return https://api.xiaohuochai.cc$request_uri;
}
server{
listen http2;
server_name api.xiaohuochai.cc;
ssl on;
ssl_certificate /home/www/blog/crt/api.xiaohuochai.cc.crt;
ssl_certificate_key /home/www/blog/crt/api.xiaohuochai.cc.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1. TLSv1.;
ssl_prefer_server_ciphers on;
if ($ssl_protocol = "") {
rewrite ^(.*)https://$host$1 permanent;
}
location / {
    proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_pass http://api;
proxy_redirect off;
}
}

后台项目

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

  1、前端路由

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

try_files $uri $uri/ /index.html = ;

  2、反向代理

  由于该项目需要向后端api.xiaohuochai.cc获取数据,但是后台占用的是3000端口,相当于跨域访问,这时就需要进行反向代理

    location /api/ {
proxy_pass http://api/;
}

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

  3、配置缓存及CSP

expires 7d;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline'; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site;";

  下面是详细的配置文件

upstream admin {
server 127.0.0.1:3;
}
server{
listen ;
server_name admin.xiaohuochai.cc;
return https://admin.xiaohuochai.cc$request_uri;
root /home/www/blog/admin/build;
index index.html;
}
server{
listen http2;
server_name admin.xiaohuochai.cc;
ssl on;
ssl_certificate /home/www/blog/crt/admin.xiaohuochai.cc.crt;
ssl_certificate_key /home/www/blog/crt/admin.xiaohuochai.cc.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1. TLSv1.;
ssl_prefer_server_ciphers on;
if ($ssl_protocol = "") {
rewrite ^(.*)https://$host$1 permanent;
}
location /api/ {
proxy_pass http://api/;
}
location / {
index index.html;
root /home/www/blog/admin/build;
expires 7d;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline'; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site;";
try_files $uri $uri/ /index.html = ;
}
}

前台项目

  前台项目起名为www-xiaohuochai-cc-3002.conf。项目采用vue构建。该项目与后台项目类似,但稍有些不同。不同之处在于,使用主域名xiaohuochai.cc或二级域名www.xiaohuochai.cc都需要跳转

server{
listen http2;
server_name www.xiaohuochai.cc xiaohuochai.cc;
...

  详细配置如下

upstream client {
server 127.0.0.1:3;
}
server{
listen ;
server_name www.xiaohuochai.cc xiaohuochai.cc;
return https://www.xiaohuochai.cc$request_uri;
root /home/www/blog/client/dist;
index index.html;
}
server{
listen http2;
server_name www.xiaohuochai.cc xiaohuochai.cc;
ssl on;
ssl_certificate /home/www/blog/client/crt/www.xiaohuochai.cc.crt;
ssl_certificate_key /home/www/blog/client/crt/www.xiaohuochai.cc.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1. TLSv1.;
ssl_prefer_server_ciphers on;
if ($ssl_protocol = "") {
rewrite ^(.*)https://$host$1 permanent;
}
location /api/ {
proxy_pass http://api/; }
location / {
index index.html;
root /home/www/blog/client/source/dist;
expires 7d;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://static.xiaohuochai.site ; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline' https://static.xiaohuochai.site; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site https://www.xiaohuochai.site;";
try_files $uri $uri/ /index.html = ;
}
}

SSR项目

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

  详细配置如下

upstream client {
server 127.0.0.1:;
}
server{
listen ;
server_name www.xiaohuochai.cc xiaohuochai.cc;
return https://www.xiaohuochai.cc$request_uri;
}
server{
listen http2;
server_name www.xiaohuochai.cc xiaohuochai.cc;
ssl on;
ssl_certificate /home/blog/client/crt/www.xiaohuochai.cc.crt;
ssl_certificate_key /home/blog/client/crt/www.xiaohuochai.cc.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1. TLSv1.;
ssl_prefer_server_ciphers on;
if ($host = 'xiaohuochai.cc'){
rewrite ^/(.*)$ http://www.xiaohuochai.cc/$1 permanent;
}
location / {
expires 7d;
add_header Content-Security-Policy "default-src 'self' https://static.xiaohuochai.site; connect-src https://api.xiaohuochai.cc; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://static.xiaohuochai.site ; img-src 'self' data: https://pic.xiaohuochai.site https://static.xiaohuochai.site; style-src 'self' 'unsafe-inline' https://static.xiaohuochai.site; frame-src https://demo.xiaohuochai.site https://xiaohuochai.site https://www.xiaohuochai.site;";
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_pass http://client;
proxy_redirect off; }
}

使用nginx部署网站的更多相关文章

  1. Django&plus;uWSGI&plus;Nginx 部署网站

    Django 1.11设置 保证Django在本地调试没有问题: 当然这是前提^_^ 收集静态文件至指定文件夹 Django静态文件设置具体参考:https://docs.djangoproject. ...

  2. nginx部署网站

    部署单个网站非常简单,只要将网站HTML文件和资源文件(.jpg .css .js等)全部复制到nginx-1.13.12\html目录下. 然后启动 启动进入cmd,切换到nginx-1.13.12 ...

  3. 「Linux&plus;Django」Django&plus;CentOs7&plus;uwsgi&plus;nginx部署网站记录

    转自:http://www.usday.cn/blog/51 部署前的准备: 1. 在本地可以运行的django项目 2. 一台云服务器,这里选用Centos系统 开始部署: 首先在本地导出项目需要的 ...

  4. nginx部署网站step by step

    安装后,修改nginx.conf,在httpd{}中添加 include /nginx/vhosts/*.conf; 如果没有vhosts就新建一个文件夹 *.conf是一种正则表达式用法,表示纳入一 ...

  5. 使用Nginx部署静态网站

    这篇文章将介绍如何利用Nginx部署静态网站. 之前写过2篇有关Nginx的文章,一篇是<利用nginx,腾讯云免费证书制作https>,另外一篇是<linux安装nginx> ...

  6. Ubuntu 下使用 Nginx 部署 &period;NET Core 2&period;0 网站

    前言 本文介绍如何在 Ubuntu 16.04 服务器上安装 .NET Core 2.0 SDK.创建项目与发布,并使用 Nginx 部署 .NET Core 2.0 Web 项目. 安装 .NET ...

  7. Nginx主配置参数详解,Nginx配置网站

    1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...

  8. Ubuntu 14&period;04 上使用 Nginx 部署 Laravel

    本教程将会涉及以下工具: Ubuntu 14.04 LTS PHP 5.5 MySQL Laravel 5.0 Nginx 参考文章:Ubuntu 14.04 上使用 Nginx 部署 Laravel ...

  9. 使用uWSGI&plus;nginx部署Django项目

    最近使用django写了一些项目,不过部署到服务器上碰到一些问题,还有静态文件什么的一堆问题,这里总结一下碰到的问题和解决方案,总体思路是按照官方文档走的. 原文地址:http://uwsgi-doc ...

随机推荐

  1. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  2. TSwitch 中文简繁显示支持(XE6 Android)

    说明: XE6 的 TSwitch 做了很多改进,包含多语显示处理,但 XE6 似乎只认定一种中文语系「zh」,它无法处理「zh_TW」.「zh_CN」.「zh_HK」.「zh_SG」等语系,不过可以 ...

  3. win7 远程桌面关机

    在任务管理器中, 打开运行窗口, 执行 shutdown -s 命令, 将在30秒后关闭win7, 如果需要更快, 加上 -t 10 参数 关于 shutdown 的命令行说明: C:\Users\R ...

  4. C语言错误: HEAP CORRUPTION DETECTED

    程序源代码: //写文件两种方式(文本文件和二进制文件) #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<std ...

  5. centos 安装 redis3&period;2&period;0 集群

    这里创建6个redis节点,其中三个为主节点,三个为从节点. redis和端口对应关系: 127.0.0.1:7000 127.0.0.1:7001 127.0.0.1:7002 从: 127.0.0 ...

  6. Powmod快速幂取模

    快速幂取模算法详解 1.大数模幂运算的缺陷: 快速幂取模算法的引入是从大数的小数取模的朴素算法的局限性所提出的,在朴素的方法中我们计算一个数比如5^1003%31是非常消耗我们的计算资源的,在整个计算 ...

  7. 解决Angular2 &lpar;SystemJS&rpar; XHR error &lpar;404 Not Found&rpar; loading traceur

    初学Angular2,跟着Angular2中文网学到HTTP这一节时出现了一个异常: GET http://localhost:3000/traceur 404 (Not Found) Error: ...

  8. python基础之Day22

    1.组合 什么是? 一个类的对象具备某一个属性,该属性值属于另一个类的对象,这样就可以引用 为何用: 解决类与类之间代码冗余问题 如何用? 2.菱形继承 单继承:一个个往父类上查找 菱形:一个子类继承 ...

  9. Nodejs 传图片的两种方式

    node上传图片第一种方式 1,首先引入模块 "connect-multiparty": "~1.2.5", 在package.json中添加 "co ...

  10. Quartz&period;NET开源作业调度框架系列&lpar;一&rpar;&colon;快速入门step by step-转

    Quartz.NET是一个被广泛使用的开源作业调度框架 , 由于是用C#语言创建,可方便的用于winform和asp.net应用程序中.Quartz.NET提供了巨大的灵活性但又兼具简单性.开发人员可 ...