使用 create-react-app 打包传到服务器 访问出错

#1

通过 create react app 脚手架打包部署代码到nginx上
目前只能通过 http://IP 访问
想通过 http://IP/index 访问
请教下怎么设置nginx配置
目前我的nginx配置

server {
       listen 80 default_server;
       listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /var/www/build;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

       server_name _;

       location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # root /var/www/build;
                # index index.html;

                try_files $uri $uri/ /index.html;
        }


        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #       include snippets/fastcgi-php.conf;
        #
        #       # With php7.0-cgi alone:
        #       fastcgi_pass 127.0.0.1:9000;
        #       # With php7.0-fpm:
        #       fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #       deny all;
        #}
}
#2

没有人遇到过吗？:sweat::sweat::sweat::sweat:

#3

你这里的 nginx 配置的问题。

sever {
      listen  80;
      sever_name    localhost;
      location  /  {
            root  +  配置你的nginx上的文件包地址；
            index index.html;
     }
}
#4 
location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                root /var/www/build;
                index index.html;

                try_files $uri $uri/ /index.html;
        }

这样也试过了，访问不到 /index二级域名,只能访问80端口

#5

有偿解决 急急急 ～～～

#6

这应该不是nginx 的问题吧 nginx帮你访问到 80 /index 应该是nodejs 配置的吧？

#7 
location /index {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                root /var/www/build;
                index index.html;

                try_files $uri $uri/ /index.html;
        }

这个是访问 http://IP/index 加载的资源文件 也不行 看官方说要配置

 "homepage": ".",

我配置完还是不行

#8

你nodejs是怎么启动的? 端口开的多少

#9

没有node启动，我代码是 用 create-react-app 搭建的项目， build之后生成一个build的静态文件夹，
然后上传到了服务器上，服务器 搭建了一个nginx服务器去做解析

#10

报什么错啊?

#11

也不报错- -

#12

那你访问直接访问80的时候都是正常显示 包括功能什么的都正常？

#13

嗯嗯 都正常。

#14 
    server {
        listen 80;  
        server_name static.vlms.cn;  
        index index.html index.htm;  
        charset utf-8;  
  
    
        # not allow to visit hidden files.  
        location ~ /\. {  
	    deny all;  
	    access_log off;  
	    log_not_found off;  
        }  
        location /index {  
           alias /var/www/build/;
           expires    7d;  
        }  
    }
#15

谢谢大神，页面没出来，不过文件都加载上了 有个error

Warning: [react-router] Location "/index/" did not match any routes
#16

虚拟路由路径问题,在所有路径前加上一级/index

#17

还是不行，我的代码配置如下，感觉没啥问题啊

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';

ReactDOM.render((
  <Router history={browserHistory} routes={routes} />
), document.getElementById('reactBox'));

import React from 'react';
import { Route, IndexRoute, Redirect } from 'react-router';

import { App } from './component/App';
import { Index } from './component/Index';
import { Register } from './component/Register';
import { Login } from './component/Login';

export default (
  <Route path="/index" component={App}>
    <IndexRoute component={Index} />
    <Route path="/index/register" component={Register} />
    <Route path="/index/login" component={Login} />
  </Route>
);

package.json

{
  "name": "9000y",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "default": "node ./bin/www & npm run watch",
    "build": "webpack",
    "watch": "webpack -w",
    "start": "DEBUG=9000y:* npm run default"
  },
  "dependencies": {
    "animate.css": "^3.5.1",
    "antd": "^0.12.16",
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "draft-js": "^0.6.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "jquery": "^3.3.1",
    "morgan": "~1.6.1",
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-router": "^2.4.0",
    "redux": "^3.5.2",
    "serve-favicon": "~2.3.0"
  },
  "description": "9000y",
  "devDependencies": {
    "antd": "^0.12.16",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.1.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "connect-multiparty": "^2.0.0",
    "cross-env": "^1.0.7",
    "css-loader": "^0.23.1",
    "es6-promise": "^3.1.2",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.16.1",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://briefguo@github.com/BriefGuo/9000y.git"
  },
  "keywords": [
    "9000y"
  ],
  "author": "GYJ",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/BriefGuo/9000y/issues"
  },
  "homepage": "https://github.com/BriefGuo/9000y#readme"
}
#18

路由配置没有问题，你看下是不是浏览器缓存的问题

#19

expires 7d; 设置为 expires 1s; 这是文件缓存时间

#20

这里的地址路径需要和你的项目位置对应的哦！~~~~