【IT修真院系列】nginx如何配置?

首页 | IT修真院 task1中要求配置nginx,可以直接访问,很多新人问这个问题, 我先放出利勇师兄以及我和19师弟总结的攻略供参考,如有其他问…
关注者
160
被浏览
34,746

9 个回答

----------------------------------------利勇师兄的攻略--------------------------------------------------

第一步:咱们先不管这玩意是干嘛的,先去官网把它下下来

官方网址:nginx.org/

当你进官网后,第一反应绝逼是;擦,怎么全是英文?瞬间慌慌的。。。

不要慌,看图


点击2014然后你会进入这样一个页面

这个时候 请勇敢的点击最上面那个版本

即nginx-1.79;

然后出现

然后点击下载Stable version也就是稳定版的第三个版本;

随便存到你想存的任何一个文件解压出来不用安装就可以直接用了,文件夹名字命为nginx;

PS:也许你第一次下载会提示失败,再下一次就好;

第二步:当咱们把nginx下下来了怎么用呢?直接点击nginx.exe程序,这是你会发现有个黑色弹出框一闪即逝;没错,这不是BUG;这说明它启动了;

然后随便打开一个浏览器;输入localhost出现下图;好恭喜你安装成功了;

也许你会疑问为啥输入localhost就弹出这个页面来,首先咱们正式介绍下这个软件是干嘛的,当时楼主在网上百度了一大堆,看的稀里糊涂的;按照楼主理解是:这货是用来将你的电脑转化为一台虚拟WEB服务器的;举个栗子,打开一个浏览器输入www.baidu.com百度的服务器响应你这个请求让浏览器展现百度的页面,同理可得,这个时候你的localhost类似于www.baidu.com
自己的电脑相当于百度的那个服务器;这个时候你可能又会问了,咱装着干嘛用啊?作为一名程序猿,当你的产品开发好成功之后是不是就上线可以让别人访问了;
当你成功之前那前一刻,你是不是得测试下你这个产品上线后能不能用啊;这个时候装上nginx你就能用你的电脑作为模拟主机来看看产品的功能是不是都OK
了;

第二步:具体的测试方法

Nginx的配置文件是文件夹中的conf文件下的nginx.conf,其实配置文件默认不修
改也是可有用的;如果你通过浏览器输入localhost出现的页面即为文件夹下HTML文件中的index.html;所以你可以将你想要检测的产品放
到HTML文件夹中,并将原本的index.html文件给删了,这个时候打开网页输入localhost,使用ctrl+F5清下浏览器缓存即出现你产
品中的index.html(产品的首页都会命名为index.html)页面,然后进行一系列测试看看是否OK;

第三步:修改配置

上面说到配置可以不修改,但在实际的测试过程中,一般不大可能会将产品往nginx文件里的html文件夹中塞,这个时候咱们就得改下配置了;请打开nginx文件夹下的conf文件夹,里面有个nginx.conf文件,用阅读工具如记事本之类打开它;举个栗子:

默认网站根目录为/usr/local/nginx/html,要将它改成/home/www

vi /usr/local/nginx/conf/nginx.conf

将其中的

     location / {
           root   html;
           index  index.php index.html index.htm;
       }

改为

     location / {
           root   /home/www;
           index  index.php index.html index.htm;
       }

然后再将

location ~ \.php$ {
           root           html;
           fastcgi_pass   127.0.0.1:9000;
           fastcgi_index  index.php;
           fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
           include        fastcgi_params;
       }

改为

location ~ \.php$ {
           root           /home/www;
           fastcgi_pass   127.0.0.1:9000;
           fastcgi_index  index.php;
           fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
           include        fastcgi_params;
       }

然后重启nginx

-----------------------------古尘和19的补充攻略------------------------------------------------------

2016.02.06


首先 大家应该在论坛或者官网,下载过@利勇 师兄的 《Nginx使用方法》,基本上都能做到输入localhost出现welcome界面这一步,如果没有出现的话,很可能是你的软件目录下有中文,建议大家养成一个好习惯,所有的软件安装目录都用英文,哪怕是拼音也行,因为毕竟从系统到软件,大多是国外的,中文路径容易出问题。

其实我们看到的welcome界面,就是nginx/html目录下的index.html页面,重点是接下来的步骤,很多人不理解。“默认网站根目录为/usr/local/nginx/html,要将它改成/home/www”,这句话的意思就是,把默认路径从nginx/html改成你自己放置代码的路径,这里的home/www只是@利勇 师兄举的一个mac路径的栗子,windows系统路径是E:\home\www这种格式

我们先来看下原配置文件

#为注释部分,忽略不计

server {
       listen       80;
       server_name  localhost;

       location / {
           root   html;
           index  index.html index.htm;
       }
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }


“下面我们仔细来分析一下:
listen:表示当前的代理服务器监听的端口,默认的是监听80端口。注意,如果我们配置了多个server,这个listen要配置不一样,不然就不能确定转到哪里去了。
server_name:表示监听到之后需要转到哪里去,这时我们直接转到本地,这时是直接到nginx文件夹内。
location:表示匹配的路径,这时配置了/表示所有请求都被匹配到这里
root:里面配置了root,表示当匹配这个请求的路径时,将会在这个文件夹内寻找相应的文件,这里对我们之后的静态文件伺服很有用。
index:当没有指定主页时,默认会选择这个指定的文件,它可以有多个,并按顺序来加载,如果第一个不存在,则找第二个,依此类推。
下面的error_page是代表错误的页面,这里我们暂时不用,先不管它 ”

(上面这段分析文字,引用自 tomcat结合nginx使用小结


接下来的任务就很明确了,把listen 80下面的个 root html中的路径,改成我们自己放代码的文件夹,例如在E盘下面新建一个home的文件夹,再在目录下新建一个www的文件夹,那么路径就是:E:\home\www,把task1.html放进去,然后修改配置


server {
       listen       80;
       server_name  localhost;
       location / {
           root   E:\home\www;
           index  index.html index.htm;
       }
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }


只改上面那处红字(知乎不能改变文字颜色?那就加粗好了)的地方就可以了,然后Windows系统用任务管理器 (ctrl+alt+delete)关闭nginx进程,可能有好几个,全都关掉,然后重新打开nginx,浏览器输入localhost/task1.html,就可以正常访问了,如果还是访问不了的话,在localhost上加上端口:80试试~

(其实我理解的是,只要路径正确就行,但是我换了其他的文件夹名字,例如E:\wy\task,E:\task等,都失败了,提示404错误,不知道是不是我访问的姿势不对,我试了一个多小时都不行...ORZ)


另外,@19 师弟:手机访问我研究出来了,不需要电脑共享文件

首先,电脑和手机连接上同一个wifi

然后查看电脑ip:win+R→cmd→ipconfig→回车, 找到无限局域网适配器wlan中的ip地址,例如我的是192.168.0.119

然后手机浏览器中输入192.168.01.119/task1.html 就可以看到自己的代码啦~


PS:手机访问还有另外两个方法

1、代码上传至服务器,直接用ip访问

2、谷歌浏览器的F12调试中,左上角有个手机的图标,点那个就可以模拟移动设备访问,有很多不同尺寸的手机,苹果、三星、洛基亚之类的,木有小米 0.0



感想:

1、感谢@19 师弟的耐心指导,没想到12点了还在,下次有人问你这个问题,把这篇日报给他看就行啦~

2、我在夜猫子的路上一去不复返了..orz



--------------------------------------------------2016.03.05 更新--------------------------------------------------

在群里看到老大帮师弟解答问题,顺便也解了我先前的疑惑

为什么用E:\wy\task,E:\task等路径都显示错误,都是转义字符的锅

详情可参见: 转义字符_百度百科

先前我路径中的\t被自动转换成制表符了,所以读取不了目录,换成mytask就行了

另外,也明白了看错误日志的重要性

nginx路径下的\logs\error.log就是错误日志,复制里面的内容去百度就行

其他很多软件应该也是类似原理

再次感谢老大~

PS:

1、先前我口中的@19 师弟,原来是首席大师兄,失敬,失敬

2、@苏哈哈 师兄补充的一条:#号是注释符号


--------------------------------------------------2017.8.13 更新--------------------------------------------------

上面的教程是去年刚开始学IT的时候写的,虽然很小白,但是确实很多新人在这里卡住了,所以分享到知乎上来,大神可以直接跳过~

另外补充几点:

  1. 80端口有时候会被其他程序占用,可自行改成其他的
  2. server name 默认是localhost,可修改成其他的,但是要配置相应的hosts,如想修改为task,则hosts中需增加一条 127.0.0.1 task
  3. 建议直接在index主页加上所有任务的跳转链接,这样就可以直接用localhost:80访问主页,然后跳转到其他任务了,不用自己在url后面加小尾巴
  4. nginx的作用远不止如此,项目中更常用的是解决跨域问题,如JS后面几个angular任务中,给出的后端接口 ip为175.25.23.192:10498,获取banner列表接口为get方法,url为/a/article/search,我们可以在nginx中加上这样配置
	 server {
		listen        80;
		server_name   localhost;
		location / {
			root   E:\wy\student\carrots-admin-html\\trunk;
			index  index.html index.htm;
		}
		location   /a/{
			proxy_pass http://175.25.23.192:10498;
		}
	}

这样一来,localhost:80/a/article/search也就等效于175.25.23.192:10498/a/article/search

可以改成其他拦截名,如

location   /b/{
			proxy_pass http://175.25.23.192:10498/;
		}

需要注意的是,由于这里的b并不在接口url中,所以proxy_pass中配置的ip后面要加上/,可以简单理解为,实际发送请求的时候,b会被编译掉,localhost:80/b/a/article/search等效于175.25.23.192:10498/a/article/search

mac的nginx配置问题

1

使用ruby安装HomeBrew(mac系统已自带ruby了)

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

关于HomeBrew的详细用法,请访问其官网:

Homebrew — OS X 不可或缺的套件管理器

这里还有一个问题,brew的源基本都是国外的,很可能被墙,所以遇到无法下载安装软件时候,可以自己先下载对应版本号的软件,然后放到/Library/Caches/Homebrew/路径中,然后brew install 软件名 安装。

2

安装nginx

brew install nginx

基本上上面一句话,就可以安装好nginx了,这里有个问题,就是如何指定nginx的版本,通常在更新homebrew软件源后,它会给出软件最高稳定的版本,今天是2016年1月7日,他给出的nginx版本是1.8稳定版,刚好是我需要的,如果需要指定版本,可以去其官网:Homebrew — OS X 不可或缺的套件管理器 找到配置方法。

查看下安装好的nginx版本

nginx -v

启动nginx

sudo nginx

在浏览器上输入:http://localhost:8080,出现下面这样的页面,证明nignx启动了。

nginx常用操作

sudo nginx              #启动nginx
sudo nginx -s reload    #修改配置后重新加载生效
#简单解释下,上面这种方法重启,nginx在重启的时候不会中断服务,因为  nginx在启动后,会有一个master进程和多个worker进程,重启是会先生成新的worker进程去接受reload命令,等老的worker进程执行完毕,master进程在关闭他们,所以服务器不会中断。
sudo nginx -s  reopen   #重新打开日志文件
sudo nginx -s stop  #快速停止nginx
sudo nginx -s quit  #完整有序的停止nginx
sudo nginx -t     #测试当前配置文件是否正确

nginx的常见目录

/usr/local/Cellar/  #nginx默认安装的目录,所有使用brew安装的软件默认都在这里
/usr/local/Cellar/nginx/1.8.0/html  #默认的访问目录,就是我们说的网站根目录
/usr/local/etc/nginx/     # nginx.conf所在的目录

3

修改默认路径从nginx/html改成你自己放置代码的路径

vim /usr/local/etc/nginx/nginx.conf

接下来的任务就很明确了,把listen 80下面的两个 root html中的路径,改成我们自己放代码的文件夹,例如在E盘下面新建一个home的文件夹,再在目录下新建一个www的文件夹,那么路径就是:E:\home\www,把task1.html放进去,然后修改配置

修改完成后,点击Esc键,shift+: 输入:wq,保存修改。

sudo nginx -s reload #修改配置后重新加载生效,每次修改必须重新加载才有效。

在此感谢古尘师姐和叶子师兄的帮助,如有遗漏,还望指正。