webpack -pを使用してコンパイルしたExpress Serverを使用してビルドにデプロイする-p

Question

私のアプリを本番環境に配備したいと考えています。 webpack -pを使ってバンドルをビルドした後に何をすべきか分かりません。エクスプレスノードサーバーを使用してこのバンドルをプロダクションで提供する方法。

マイwebpack.config.jsマイ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" 
    } 
} 

注意を

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() 
    ], 
}; 

ファイル：NPM開始は、ローカルホスト上の非常に細かい実行されています。そして、私はwebpack -pを使ってバンドルを./distフォルダに作成しました。ここからステップが必要です。

また、より良い展開方法についてのご意見をお待ちしております。あなたは今急行であなたのdistフォルダの内容を提供する必要が

Answer 1

は、ここにあなたが一例として使用できる基本的な実装です：

はあなたに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") 
}); 

は、ノードを実行しますが、EACCESエラーが発生した場合、sudoのノードアプリを実行し、をapp.js代わりに.jsこれにより、ローカルのプロダクションファイルがローカルでhttp://localhostに実行されます。

これを他の場所に展開する場合（たとえば、heroku https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction）、指示を確認する必要があります。