Question

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

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

"start": "node server.js",

这可以通过localhost:3000访问我的React应用。这很有效。

但现在我想在具有域的外部服务器上部署我的react应用程序。要创建我的代码包，我点击

"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>

但我仍然收到上面的错误消息。一个想法？

Answer 1

如果您需要不同的环境配置，您可以创建不同的webpack配置文件，并使用DefinePlugin公开全局常量。

如果您已经在系统或容器中设置了环境，那么您可以编写如下内容：

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

这样您就可以在React代码中访问process.env.NODE_ENV并在方便时创建不同的路线。

设置部署路由

1 个答案: