Mac 配置 Nginx并且配置 css 文件的路径

Mac 配置 Nginx并且配置 css 文件的路径

简单点，就用 Homebrew 安装 nginx

打开你的终端，使用 brew install nginx 直接安装，如下，顺便介绍一点 nginx 的命令：

重启： sudo nginx -s reload
启动： sudo nginx
看启动成功没: ps aux | grep nginx
关闭： sudo nginx -s stop

nginx.conf文件

一般nginx安装之后，有以下路径

1./usr/local/Cellar/nginx/
2./usr/local/etc/nginx/

其中，nginx.conf路径在第二个路径里面，而nginx.conf文件本身是个配置文件，比如配置指向某个域名啊或者文件目录啊之类的。

现在，我们需要让

/Users/rogueandy/Documents/sourcetree_projects/node_server/app/views/css/login.css

路径下的 login.css 文件用 nginx 来配置，能够指向该静态文件，大概来讲讲主要的配置

#user nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {    worker_connections  1024;
}


http {
    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  /usr/local/etc/nginx/access.log;
    error_log   /usr/local/etc/nginx/error.log;
    #access_log  logs/access.log;
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  www.rogue.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            alias  /Users/rogueandy/Documents/sourcetree_projects/node_server/app/;
            index  index.html;
        }
        ...

主要的配置都是在以上显示出来的部分，

access_log  /usr/local/etc/nginx/access.log
用于打印一些日志

error_log   /usr/local/etc/nginx/error.log;
用于打印错误日志，如果你的目录下没有error.log文件，你可以手动创建一个，随便命名，但是配置的路径名字要和你最终创建的文件名一致

在 server 里

listen 80，一般如果端口nginx端口没有其他用处，就直接用 80吧，

server_name  www.rogue.com;
关于这个服务域名，你可以自己随便定义，www.xxx.com，这个域名对于你后来直接在浏览器进行 www.xxx.com访问会显示出你需要显示的静态文件，或者显示nginx之类的404.

然后再来看 location /以下的配置

alias  /Users/rogueandy/Documents/sourcetree_projects/node_server/app/;
该路径比你的静态文件所在的根目录，还记得 
/Users/rogueandy/Documents/sourcetree_projects/node_server/app/views/css/login.css这个路径吗

好了，暂时配置完毕，
此刻，你可以打开chrome浏览器，然后键入地址

chrome://net-internals/#dns
你打开会看见红色的导航栏条，点击右边的向下的剪头，里面有一个
clear cache，是清楚缓存的作用，点击之后，清楚缓存

打开你的终端，重启nginx

sudo nginx -s reload

然后，现在，在我的浏览器，访问这个地址

www.xxx.com/views/css/login.css
前面的 www.xxx.com是你自己在前面配置的地址，
然后，因为整个地址是
/Users/rogueandy/Documents/sourcetree_projects/node_server/app/views/css/login.css
而你在配置
alias 的地址是 /Users/rogueandy/Documents/sourcetree_projects/node_server/app/
所以，后面你需要跟上 views/css/login.css

这样，就可以在浏览器直接打开你的 login.css 文件了，
如果这样还是无法打开你的css文件，浏览器提示

403 forbidden

这个错误，那么，可能是你的权限问题，你需要在 nginx.conf 的第一行配置一行代码

user root owner;

给 nginx 添加权限，这样我这边是可以打开我的静态 css 文件了。