ReactJS 应用程序 EC2 路由器 404答案

【问题标题】：ReactJS app EC2 router 404ReactJS 应用程序 EC2 路由器 404
【发布时间】：2017-12-06 20:16:58
【问题描述】：

我有基于https://github.com/coryhouse/react-slingshot 的反应应用程序。我有网址：/about 如果我通过本地主机上的开发模式或生产直接访问此 url，它工作正常。但是在通过 nginx 的 EC2 实例中我得到了错误：

404 未找到

nginx/1.10.3 (Ubuntu)

这是我的 nginx 配置文件：

server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

server {
        listen 443 ssl;
        root /home/ubuntu/www/example;
        index index.html index.htm;

    add_header Strict-Transport-Security "max-age=31536000";        
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH:AES256+ECDHE';

        # Make site accessible from http://localhost/
        server_name example.com;
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
                # Uncomment to enable naxsi on this location
                # include /etc/nginx/naxsi.rules
        }
}

如何正确配置它？谢谢！

【问题讨论】：

标签： reactjs nginx amazon-ec2 react-router

【解决方案1】：

呵呵，我终于在网上找到了 smth :)

https://gkedge.gitbooks.io/react-router-in-the-real/content/nginx.html

工作正常。

我错过了好地方：

location ~* \.(?:manifest|appcache|html?|xml|json)$ {
      expires -1;
      # access_log logs/static.log; # I don't usually include a static log
    }

    location ~* \.(?:css|js)$ {
      try_files $uri =404;
      expires 1y;
      access_log off;
      add_header Cache-Control "public";
    }

    # Any route containing a file extension (e.g. /devicesfile.js)
    location ~ ^.+\..+$ {
      try_files $uri =404;
    }

    # Any route that doesn't have a file extension (e.g. /devices)
    location / {
        try_files $uri $uri/ /index.html;
    }

【讨论】：

【解决方案2】：

server {
    listen 80 default_server;
    server_name /var/www/example.com;

    root /var/www/example.com;
    index index.html index.htm;      

    location ~* \.(?:manifest|appcache|html?|xml|json)$ {
      expires -1;
      # access_log logs/static.log; # I don't usually include a static log
    }

    location ~* \.(?:css|js)$ {
      try_files $uri =404;
      expires 1y;
      access_log off;
      add_header Cache-Control "public";
    }

    # Any route containing a file extension (e.g. /devicesfile.js)
    location ~ ^.+\..+$ {
      try_files $uri =404;
    }

    # Any route that doesn't have a file extension (e.g. /devices)
    location / {
        try_files $uri $uri/ /index.html;
    }
}

https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#configuring-your-server

【讨论】：