nginx编译安装以及部署前端资源

1.编译安装nginx

mkdir /appl
cd /appl
wget http://nginx.org/download/nginx-1.24.0.tar.gz
tar -zxvf nginx-1.24.0.tar.gz
cd nginx-1.24.0/
#定义安装目录为/appl/nginx
./configure --prefix=/appl/nginx
#编译、安装
make
make install

安装完成后,如下截图:

2.修改配置文件，部署前端资源（服务端、管理端）

vi /appl/nginx/conf/nginx.conf

配置修改如下：

#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 {
    server_tokens off;
    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        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;


    #gzip  on;
   server {
        listen       89;
        server_name  localhost;



        #charset koi8-r;

        #这里是管理端前端资源 
	location / {
            root   /home/swz/NBlog-master/blog-cms/dist;
            index  index.html index.htm;
           try_files $uri $uri/ /index.html;
        }

        error_page  404              /404.html;
        #
        #        # redirect server error pages to the static page /50x.html
        #                #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        #这里是服务端前端资源 
        location / {
            root   /home/swz/NBlog-master/blog-view/dist;
            index  index.html index.htm;
           try_files $uri $uri/ /index.html;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }  

}

3.启动nginx

cd /appl/nginx/sbin
#启动nginx
./nginx
#查看进程，如下图即成功
pe -ef|grep nginx

4.nginx补充知识

浏览器刷新，会报错404，但是加上try_files $uri $uri/ /index.html;就不再发生了，原因： nginx刷新404问题

为什么刷新页面会出现这种情况？

如：http://xxxxxx:8080/index.html ，此时刷新页面的时候回去根据浏览器的url， 访问nginx上请求对应的静态资源，而nginx会根据localhost / 的匹配规则在dist文件夹里面没有找到对应的静态文件index，所以就会报错404。