设置部署路线

我已经使用Webpack创建了我的第一个React应用程序。现在我想让这个应用程序可以在我的开发环境之外访问，但是我不能让它工作。设置部署路线

对于我的发展我的本地计算机上运行：

"start": "node server.js",

这使我通过localhost:3000作出反应的应用程序访问。这很好。

但现在我想部署我的反应的应用程序在一个域的外部服务器上。要创建我的代码包我打

"build": "webpack -p"这将生成子文件夹MyProjectFolder/dist/bundle.js中的包文件。之后，我将我的index.html复制到/dist/，并包含该包文件。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Urlaub-planer</title> 
<!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<!-- Auth0Lock script --> 
<script src="//cdn.auth0.com/js/lock-9.0.min.js"></script> 
</head> 
<body> 
    <div class="todoapp" id="root"></div> 
    <!--<script src="/static/bundle.js"></script>--> 
    <script src="bundle.js"></script> 
    </body> 
    </html>

这些都提交然后复制到我的外部服务器运行Apache。服务器上的webfolder与我的ProjectFolder名称相同。我又试图通过

`https://myDomain.de/MyProjectFolder/index.html

访问我的应用程序这表明我这个错误：

我想，我必须改变我的路由器的设置，但我目前还没有线索如何做到这一点。在我的开发环境中，项目文件夹不包含在URL中，当我访问我的应用程序时，这可能是问题的一部分吗？任何人都可以通过这个指导我吗？这个问题对于你们中的一些人来说似乎是非常基本的，但这是我第一次使用所有这些新技术，并且我已经尝试了这么多，而且仍然是同样的错误信息。我需要做些什么，在外部服务器上部署我的React App，运行Apache，使用不同的域。请帮帮我。

这是我的路由定义文件（ProjectFolder/index.js）

import React from 'react' 
import { render } from 'react-dom' 
import { createStore, applyMiddleware } from 'redux' 
import { Provider } from 'react-redux' 
import {Router, Route, IndexRoute, browserHistory} from 'react-router' 
import createLogger from 'redux-logger' 

import App from './containers/App' 
import VacationSummary from './containers/vacation/VacationSummary' 
import VacationRequest from './containers/vacation/VacationRequest' 
import VacationRequestSummary from './containers/vacation/VacationRequestSummary' 

import Home from './containers/Home' 
import Demo from './components/Demo' 
import rootReducer from './reducers/reducers' 
import thunkMiddleware from 'redux-thunk' 

var injectTapEventPlugin = require("react-tap-event-plugin"); 
injectTapEventPlugin(); 

const logger = createLogger(); 

    let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, logger) (createStore) 

    let store = createStoreWithMiddleware(rootReducer) 

    let rootElement = document.getElementById('root') 

    if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('./reducers',() => { 
    const nextRootReducer = require('./reducers').default 
    store.replaceReducer(nextRootReducer) 
    }) 
    } 

    render(
    <Provider store={store}> 
     <Router history={browserHistory}> 
     <Route path="/" component={App}> 
     <Route path="Home" component={Home}/> 
     <Route path="VacationSummary" component={VacationSummary}/> 
     <Route path="VacationRequest" component={VacationRequest}/> 
     <Route path="VacationRequestSummary" component= {VacationRequestSummary}/> 
    </Route> 
    </Router> 
    </Provider>, 
    rootElement 
)

最后我的package.json

{ 
    "name": "Urlaubsplaner", 
    "version": "0.0.1", 
    "main": "index.js", 
    "scripts": { 
    "server": "node server/server.js", 
     "start": "node server.js", 
     "watch": "webpack --watch", 
     "production": "webpack -p" 
    }, 
    "author": "Auth0", 
    "license": "MIT", 
    "dependencies": { 
    "classnames": "^2.2.5", 
    "css-loader": "^0.23.1", 
     "material-ui": "^0.15.2", 
    "moment": "^2.13.0", 
    "react": "^15.1.0", 
    "react-bootstrap-daterangepicker": "^3.1.0", 
    "react-dom": "*", 
    "react-redux": "*", 
    "react-router": "*", 
     "react-tabs": "^0.7.0", 
     "react-tap-event-plugin": "^1.0.0", 
     "react-yearly-calendar": "^1.1.4", 
    "redux": "*", 
    "redux-form": "^5.2.5", 
    "redux-logger": "^2.6.1", 
     "redux-thunk": "*", 
    "style-loader": "^0.13.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^5.6.18", 
    "babel-loader": "^5.1.4", 
    "babel-plugin-react-transform": "^1.1.0", 
    "express": "^4.13.3", 
    "webpack": "^1.9.11", 
    "webpack-dev-middleware": "^1.2.0", 
    "webpack-hot-middleware": "^2.2.0" 
    } 
    }

而且我webpack.config

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     {test: /\.js$/, 
     loaders: [ 'babel' ], 
     exclude: /node_modules/, 
     include: __dirname 
     }] 
    } 
    }

更新：

我已经寻找解决方案，发现这github上线：Github 基于此信息，我已删除了

history={browserHistory}从我的路由器，现在我看到至少我的应用程序，但我得到一个新的错误，那就是类似旧的。

读消息后，我已经更新了我的代码

import {Router, Route, IndexRoute, hashHistory} from 'react-router' 
<Provider store={store}> 
    <Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <Route path="/Home" component={Home}/> 
     <Route path="/VacationSummary" component={VacationSummary}/> 
     <Route path="/VacationRequest" component={VacationRequest}/> 
     <Route path="/VacationRequestSummary" component={VacationRequestSummary}/> 
    </Route> 
    </Router>

但I'm仍然收到上述错误信息。一个想法？

来源

2016-08-15 BayLife

...我已经寻找解决方案，发现这github上线：[Github上] [2] 基于此信息，我已经从我的路由器删除

history={browserHistory}现在我看到至少我的应用程序，但我得到一个新的错误，这与旧的错误类似。

读消息后，我已经更新了我的代码

import {Router, Route, IndexRoute, hashHistory} from 'react-router' 
<Provider store={store}> 
    <Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <Route path="/Home" component={Home}/> 
     <Route path="/VacationSummary" component={VacationSummary}/> 
     <Route path="/VacationRequest" component={VacationRequest}/> 
     <Route path="/VacationRequestSummary" component={VacationRequestSummary}/> 
    </Route> 
    </Router>

但仍高于（更新Q）中提到的错误。我排除后

if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('./reducers',() => { 
    const nextRootReducer = require('./reducers').default 
    store.replaceReducer(nextRootReducer) 
}) 
}

错误消失了。现在，我仍然得到这个错误

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

但我认为这无关与在提到的问题

来源

2016-08-15 09:50:50 BayLife

如果您需要为环境不同的配置，你可以创建不同的WebPack的配置文件，揭发全局常量为DefinePlugin。

如果你已经设置你的环境在您的系统或容器，你会写这样的：

new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
})

这样你就可以在你的阵营代码访问process.env.NODE_ENV，并在您方便的创建不同的路线。

来源

2016-08-15 11:31:41 feychou

啊很好的建议。谢谢 – BayLife

设置部署路线

回答

相关问题