1

webpackとfluxibleは初めてなので、彼らの始め方のボイラープレートを理解しようとしていました: http://fluxible.io/quick-start.html

ここに画像の説明を入力

実行npm run devすると問題なく実行され、ライブ リロード Web サーバーが起動しますが、運用環境で実行する方法について混乱していました。package.json を見る

  "scripts": {
    "build": "webpack & webpack --config webpack.config.production.js",
    "dev": "node webpack-dev-server.js & PORT=3001 nodemon start.js -e js,jsx",
    "lint": "eslint ./*.js ./**/*.js",
    "start": "node start.js"
  }

npm run build実稼働構成モードでwebpackを実行しているように見え、jsファイルを/buildフォルダーにコピーすると思います。この時点で npm start を実行すると、これが実行start.jsされserver.js、サーバーは dev ホット ロードなしで実行されます。

私の質問は次のとおりです。アプリケーションが本番モードであると想定しているものを実行しているときに、アプリケーションがまだポーリングを実行し続けるのはなぜですか (私が想定しているのは、dev hot-laoder を実行するためのソケットまたはポーリングです)。ログにこれが表示されます：

  express:router dispatching GET /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +3s
  express:router query  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +1ms
  express:router expressInit  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms
  express:router compression  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms
  express:router jsonParser  : /socket.io/?EIO=3&transport=polling&t=1445788884250-772 +0ms

運用サーバーでは、ルート フォルダー全体をデプロイするだけですか、それともビルド フォルダーだけをデプロイすることになっているのでしょうか...もしそうなら、ビルド フォルダーに不足があるでしょう。

静的アセットはビルド フォルダー (express の /public フォルダーのようなもの) にコピーする必要がありますか?

start.js

require('babel/register');
module.exports = require('./server');

サーバー.js

import express from 'express';
import compression from 'compression';
import bodyParser from 'body-parser';
import path from 'path';
import serialize from 'serialize-javascript';
import {navigateAction} from 'fluxible-router';
import debugLib from 'debug';
import React from 'react';
import ReactDOM from 'react-dom/server';
import app from './app';
import HtmlComponent from './components/Html';
import { createElementWithContext } from 'fluxible-addons-react';
const env = process.env.NODE_ENV;

const debug = debugLib('fluxible');

const server = express();
server.use('/public', express.static(path.join(__dirname, '/build')));
server.use(compression());
server.use(bodyParser.json());

server.use(async (req, res, next) => {
    const context = app.createContext();

    debug('Executing navigate action');

    try {
        await context.getActionContext().executeAction(navigateAction, {
            url: req.url
        });


        debug('Exposing context state');
        const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

        debug('Rendering Application component into html');
        const markup = ReactDOM.renderToString(createElementWithContext(context));
        const htmlElement = React.createElement(HtmlComponent, {
            clientFile: env === 'production' ? 'main.min.js' : 'main.js',
            context: context.getComponentContext(),
            state: exposed,
            markup: markup
        });
        const html = ReactDOM.renderToStaticMarkup(htmlElement);

        debug('Sending markup');
        res.type('html');
        res.write('<!DOCTYPE html>' + html);
        res.end();
    } catch (err) {

        if (err.statusCode && err.statusCode === 404) {
            // Pass through to next middleware
            next();
        } else {
            next(err);
        }

    }

});


const port = process.env.PORT || 3000;
server.listen(port);
console.log('Application listening on port ' + port);

export default server;
4

0 に答える 0