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 {
    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       7000;
        server_name  localhost;

        # 设置项目根目录，大部分指令只支持相对路径，所以必须设置。
        root D:/react-project/demo/react-webpack4-demo/dist/;

        # alias 相当于定义了目录的别名，目录必须以/结尾 root+
        # root  相当于定义了目录文件所在位置，解析后路径为 root+location

        # 正则匹配标识：
        # ~   区分大小写匹配
        # ~*  不区分大小写匹配
        # !~  与区分大小写不匹配
        # !~* 与不区分大小写不匹配

        # 目录匹配
        # -f和!-f用来判断是否存在文件
        # -d和!-d用来判断是否存在目录
        # -e和!-e用来判断是否存在文件或目录
        # -x和!-x用来判断文件是否可执行

        # rewrite 后缀指令
        #last  #本条规则匹配完成后，继续向下匹配新的location URI规则
        #reak  #本条规则匹配完成即终止，不再匹配后面的任何规则
        #redirect  #返回302临时重定向，浏览器地址会显示跳转后的URL地址
        #permanent  #返回301永久重定向，浏览器地址栏会显示跳转后的URL地址

        # 正则符号
        # ^ 匹配开头
        # . 匹配所有
        # (|) 匹配或
        # $ 匹配结尾
        # * 0-n次
        # ? 0-1次
        # + 1-n次
        # \ 转义字符

        # 例：/webSource/app --> /react/app
        # rewrite ^/webSource/app/(.*) /react/app/$1 break;

        # 例：/20180629/20180629xxxx.mp4 ---> /mp4/20180629/xxxx.mp4
        # rewrite ^/([0-9]{8})/([0-9]{8})((0-9a-Z)+}).mp4$ /mp4/$1/$2.mp4 break;

        # 例：/photo/123456 重定向到 /path/to/photo/12/1234/123456.png
        # rewrite "/photo/([0-9]{2})([0-9]{2})([0-9]{2})"/path/to/photo/$1/$1$2/$1$2$3.png break;

        location /op/ {
            rewrite ^/op/(.*) /$1 break;
            # 如果没找到uri 则打开index --react中所有的请求都应该交给index处理，因为内置路由系统
            try_files $uri $uri/ /index.html;
            index index.html; #自动在目录下寻找index.html
            expires  30d; #缓存不常变的变量，30天
        }

#        location ~* /op(.*)$ {
#            alias D:/react-project/demo/react-webpack-demo/view/;
#            index index.html;
#            try_files $uri /webapp/$1 /webapp/view/index.html;
#        }



        # ~正则开始，详情见nginx正则表达式
#        location ~* /op/(js|css|image|view)/ {
        ##            alias D:/react-project/demo/react-webpack-demo/$1/;
        ##            expires  30d; #缓存不常变的变量，30天
        ##        }
    }
}