利用Nginx服务器发布前端页面

Nginx作为http服务器，可以做网页静态服务器。部署静态资源前，我们先学习一下Nginx配置文件

创新互联服务项目包括腾冲网站建设、腾冲网站制作、腾冲网页制作以及腾冲网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，腾冲网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到腾冲省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; #工作模式及连接数上限 events { #epoll是多路复用IO(I/O Multiplexing)中的一种方式, #仅用于linux2.6以上内核,可以大大提高nginx的性能 use epoll; #单个后台worker process进程的并发链接数 worker_connections 1024; # 并发总数是 worker_processes 和 worker_connections 的乘积 # 即 max_clients = worker_processes * worker_connections # 在设置了反向代理的情况下，max_clients = worker_processes * worker_connections / 4 为什么 # 为什么上面反向代理要除以4，应该说是一个经验值 # 根据以上条件，正常情况下的Nginx Server可以应付的连接数为：4 * 8000 = 32000 # worker_connections 值的设置跟物理内存大小有关 # 因为并发受IO约束，max_clients的值须小于系统可以打开的文件数 # 而系统可以打开的文件数和内存大小成正比，一般1GB内存的机器上可以打开的文件数大约是10万左右 # 我们来看看360M内存的VPS可以打开的文件句柄数是多少： # $ cat /proc/sys/fs/file-max # 输出 34336 # 32000 < 34336，即并发连接总数小于系统可以打开的文件句柄总数，这样就在操作系统可以承受的范围之内 # 所以，worker_connections 的值需根据 worker_processes 进程数目和系统可以打开的文件总数进行适当地进行设置 # 使得并发总数小于操作系统可以打开的文件数目 # 其实质也就是根据主机的物理CPU和内存进行配置 # 当然，理论上的并发总数可能会和实际有所偏差，因为主机还有其他的工作进程需要消耗系统资源。 # ulimit -SHn 65535 } http { #设定mime类型,类型由mime.type文件定义 include mime.types; 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 logs/access.log main; #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件， #对于普通应用，必须设为 on, #如果用来进行下载等应用磁盘IO重负载应用，可设置为 off， #以平衡磁盘与网络I/O处理速度，降低系统的uptime. sendfile on; #tcp_nopush on; #连接超时时间 #keepalive_timeout 0; keepalive_timeout 65; tcp_nodelay on; #开启gzip压缩 gzip on; gzip_disable "MSIE [1-6]."; #设定请求缓冲 client_header_buffer_size 128k; large_client_header_buffers 4 128k; #设定虚拟主机配置 server { #侦听80端口 listen 80; #定义使用 www.nginx.cn访问 server_name www.nginx.cn; #定义服务器的默认网站根目录位置 root html; #设定本虚拟主机的访问日志 access_log logs/nginx.access.log main; #默认请求 location / { #定义首页索引文件的名称 index index.php index.html index.htm; } # 定义错误提示页面 error_page 500 502 503 504 /50x.html; location = /50x.html { } #静态文件，nginx自己处理 location ~ ^/(images|javascript|js|css|flash|media|static)/ { #过期30天，静态文件不怎么更新，过期可以设大一点， #如果频繁更新，则可以设置得小一点。 expires 30d; } #PHP 脚本请求全部转发到 FastCGI处理. 使用FastCGI默认配置. location ~ .php$ { fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } #禁止访问 .htxxx 文件 location ~ /.ht { deny all; } } } 配置Nginx/Tengine

请先确保自己的服务器安装了Nginx或者Tengine（本文以Tengine为例）

将静态资源文件拷贝到指定目录，如/home/admin

配置nginx-proxy.conf文件

server { listen 8089; server_name localhost; location /resource_static/ { root /home/admin/; } }

本文配置的监听端口为8089，具体是情况而定

上面配置表示输入 localhost:8089/resource_static/ 时会访问本机的/home/admin/resource_static/ 目录，在/home/admin/resource_static/下新建一个文件test.json,如下所示：

在浏览器中输入：

localhost:8089/resource_static/test.json

跨域问题

跨域问题经常会遇到,如下面的错误：

Access to Font at \'http://xxx:8089/resource_static/console/hello.ttf\' from origin \'http://xxx:8089\' has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header is present on the requested resource. Origin \'http://xxx:8080\' is therefore not allowed access. 解决方法：

如果配置成这样，依然会有问题

location /resource_static/ { root /home/admin/; add_header \'Access-Control-Allow-Origin\' \'*\'; add_header \'Access-Control-Allow-Credentials\' \'true\'; add_header \'Access-Control-Allow-Methods\' \'GET, POST, OPTIONS\'; add_header \'Access-Control-Allow-Headers\' \'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type\'; }