使用nginx部署网站

前面的话

　　如果服务器只需要放置一个网站程序，解析网站到服务器的网站，网站程序监听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

主机配置

【端口配置】

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

【主机名配置】

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/20180402/article-name
    # -> /blog/20180402-article-name.md
    alias /home/www/blog/$1-$2.md;
}

【首页设置】

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

【重定向页面设置】

error_page    404         /404.html;
error_page    502  503    /50x.html;
error_page    404  =200   /1x1.gif;

location / {
    error_page  404 @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 的文件，没找到直接返回 502
    try_files $uri $uri.html =502;
}

反向代理

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

　　反向代理（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 443 http2;
...
}

gzip配置

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

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

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 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;

缓存配置

　　如果服务器中存在静态资源，可设置本地强缓存。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 等请求的加载策略。不允许的情况下，浏览器会模拟一个状态为 400 的响应。
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:8081;
}
server{
        listen 80;
        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来测试配置文件是否格式正确

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

　　接着，重启nginx服务

sudo nginx -s reload

后端项目

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

upstream api {
        server 127.0.0.1:3000;
}
server{
        listen 80;
        server_name api.xiaohuochai.cc;
        return 301 https://api.xiaohuochai.cc$request_uri;
}
server{
        listen 443 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.1 TLSv1.2;
        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 = 404;

　　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:3001;
}
server{
    listen 80;
    server_name admin.xiaohuochai.cc;
    return 301 https://admin.xiaohuochai.cc$request_uri;
    root /home/www/blog/admin/build;
    index index.html;
}
server{
        listen 443 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.1 TLSv1.2;
        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 = 404;
    }
}

　　上面是后台项目的配置，前台项目的配置也类似，就不再赘述

原文地址：https://www.cnblogs.com/xiaohuochai/p/9093819.html

时间： 2024-10-12 14:42:28

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

Django+uWSGI+Nginx 部署网站

Django 1.11设置 保证Django在本地调试没有问题: 当然这是前提^_^ 收集静态文件至指定文件夹 Django静态文件设置具体参考:https://docs.djangoproject.com/en/1.11/ref/contrib/staticfiles/ 在myproject/settings.py中设置静态文件STATIC_URL和STATIC_ROOT设置: 如: STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE

Nginx部署文档（二进制包安装）

Nginx部署文档(二进制包安装) 创建时间:2016-06-27 修改时间:2017-03-04 修改时间:2017-03-06 文档目的2 基础知识2 常用命令2 系统环境2 操作步骤3 1. 安装依赖3 2. 安装nginx3 3. 启动nginx5 3. 关闭防火墙6 4. 修改生产环境配置6 常见问题7 问题一:报错"cp: `conf/koi-win' and `/usr/local/nginx/conf/koi-win' are the same file"7 问题二:[

Nginx主配置参数详解，Nginx配置网站

1.Niginx主配置文件参数详解 a.Linux中安装nginx.博文地址为:http://www.cnblogs.com/cindy-cindy/p/6847499.html b.当Nginx安装完毕后,会有相应的安装目录,安装目录里的nginx.confg为nginx的主配置文件,nginx主配置文件分为4部分,main(全局配置).server(主机配置).upstream(负载均衡服务器设置)以及location(URL匹配特定位置的设置),这四者的关系是:server继承main,l

部署网站运行平台LNMP + Memcached缓存

部署网站运行平台LNMP + Memcached缓存  *本实验的LNMP和Memcached都安装在同一台服务器上 *Nginx   提供网站服务 *MySQL   提供数据库服务 *PHP    提供动态网站编程语言 *Memcached 提供数据缓存(通过降低对Database的访问来加速web应用程序) 一.搭建LNMP平台(源码包安装) Linux+Nginx+Mysql+PHP(perl) 1)基本环境准备 安装"开发工具"和"开发库""Dev

腾讯云,搭建nginx静态网站服务器

搭建Http静态服务器环境 任务时间:15min ~ 30min 搭建静态网站,首先需要部署环境.下面的步骤,将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务. 安装 Nginx 在 CentOS 上,可直接使用 yum 来安装 Nginx yum install nginx -y 安装完成后,使用 nginx 命令启动 Nginx: nginx 此时,访问 http://<您的域名> 可以看到 Nginx 的测试页面 [?] 如果无法访问,请重试用 nginx -s rel

Django + Gunicorn + Nginx 部署 Ubuntu 服务器

Django + Gunicorn + Nginx 部署服务器 获取腾讯云 root权限 本人的服务器使用的是腾讯云,腾讯云默认是没有开放 root 用户的,我们来创建 root 用户. 创建 root 账号并设置密码. sudo passwd root 设置 root 账户登录需要密码. sudo vim /etc/ssh/sshd_config 修改 without-password 为 yes. PermitRootLogin yes 重启 ssh 服务. sudo service ssh

【Nginx】Nginx部署Windows设置80端口

Nginx部署在Windows端口做负载均衡时,配置其监听80端口.Start时会发现无法启动,原因为其80端口已被占用. 即使IIS中关闭全部80端口的网站后访问此80端口出现的是404,而非网络断开连接.可以推断出IIS或相关容器一直监听 导致Nginx无法启动的.通过CMD->netstat -ano | findstr "80"发现PID为4的System进程占用. 目前找到的解决方案是修改注册表,重启服务器可以解决此问题:\HKEY_LOCAL_MACHINE\SYST

Nginx 部署 Ant Design pro

利用Ant Design pro开发的项目,如何用Nginx部署呢? 第一步:把项目打包,打包命令如下: npm run build 运行完毕会在项目目录下生成dist文件夹. 第二步:想要测试打包好的代码是否可以正常运行,安装serve,如下命令 npm i serve -g serve安装完毕,利用serve运行打包好的代码,运行命令: serve dist 测试完毕,代码可以正常运行. 第三步:用Nginx进行部署. 1.下载Nginx:http://nginx.org/en/downlo

Tomcat中部署网站和绑定域名

在安装的tomcat的文件夹下有个conf文件夹 下面有个server.xml文件, 1. 使用80端口 默认tomcat用的是8080端口. <Connector port="8080" protocol="HTTP/1.1"               connectionTimeout="20000"               redirectPort="8443" /> 把这个节点的8080修改成80端口