使用我使用webpack編譯的express服務器將生成部署到生產-p

Question

我想將我的應用程序部署到生產環境。在使用webpack -p構建我的包後，我不知道該做什麼。如何使用快遞節點服務器在生產中提供此捆綁包。

我webpack.config.js文件

var HtmlWebpackPlugin = require('html-webpack-plugin') 
var debug = process.env.NODE_ENV !== "production"; 
var webpack = require("webpack"); 

var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: [ 
    './app/index.js' 
    ], 
    output: { 
    path: __dirname + '/dist', 
    publicPath: '/', 
    filename: "index_bundle.js" 
    }, 
    module: { 
    loaders: [ 
     {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    plugins: debug ? [HTMLWebpackPluginConfig] : [ 
    HTMLWebpackPluginConfig, 
    new webpack.optimize.CommonsChunkPlugin('common.js'), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    new webpack.optimize.AggressiveMergingPlugin() 
    ], 
}; 

我的package.json文件

{ 
    "name": "my-web", 
    "version": "1.0.0", 
    "description": "Practicing react-website", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot --port 8080 --host 0.0.0.0 --content-base dist/ --history-api-fallback", 
    "prod": "NODE_ENV=production webpack -p", 
    "postinstall": "npm start" 
    }, 
    "dependencies": { 
    "axios": "^0.15.0", 
    "express": "^4.14.0", 
    "radium": "^0.18.1", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2", 
    "react-router": "^2.8.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.17.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-react": "^6.16.0", 
    "html-webpack-plugin": "^2.22.0", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.16.1" 
    } 
} 

注：NPM開始運行在本地主機上非常精細。因此，我使用webpack -p在./dist文件夾中創建捆綁包。需要從這裏的步驟。

此外，有關更好的部署方式的建議表示讚賞。

Answer 1

現在需要服務與快遞的DIST文件夾的內容，這裏有一個基本的實現，你可以作爲一個例子使用：

在你創建一個文件名爲app.js。文件夾（在同一個文件夾，你DIST文件夾中）

app.js

var path = require('path'); 
var express = require('express'); 

var app = express(); 

app.use(express.static(path.join(__dirname, '/dist'))); 

app.get('/*', function(req, res){ 
    res.sendfile("index.html", {root: path.join(__dirname, '/dist')}); 
}); 

app.listen(80, function() { 
    console.log("BePretty Frontend App is running at localhost: 80") 
}); 

然後，運行節點app.js，如果你得到EACCES錯誤，運行須藤節點應用改爲.js。這將在本地運行您的生產文件http://localhost。

如果您想要將其部署到其他地方（例如，heroku https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction），您將需要檢查他們的指示。