タグ別アーカイブ: 環境構築

【webpack】webpackDevMiddleware とは

webpackDevMidleware -ドキュメント-

webpackDevMiddleware はデータ構造領域に接続するミドルウェに対しての小さなミドルウェアです。
メモリーの静的ファイルをコンパイルしたりそれらを受け取る際に使用します。

コンパイルがwebpackのアセットを受け取るリクエスト毎に実行している際、私たちが安定したbundleを持つまでブロックされます。

2つのモードを使う事ができます。

・watch mode (デフォルト) コンパイラーはファイル変更で再コンパイルします。
・lazy mode コンパイラはエントリーポイントへのリクエスト毎にコンパイルします。

API

var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");

var compiler = webpack({
    // configuration
    output: { path: '/' }
});

app.use(webpackDevMiddleware(compiler, {
    // オプション
}));
//app.useはexpressで利用するミドルウェアの関数を渡す
//app.use([path, ] middlewareFunc)
//pathが省略された場合'/'。path有りの場合そのpathに対してミドルウェア(<a href="http://expressjs.com/en/guide/using-middleware.html">ミドルウェアの説明</a>)を使う
//ミドルウェアの関数シグネチャは function(req, res, next)
//ミドルウエアはファクトリ関数(関数をreturnする関数)を使って生成するものが多い。この例の場合、webpackDevMiddleware関数はfunction(req, res, next)というシグネチャを持った関数を返す

オプション
noInfo
警告とエラーのみコンソール出力する
Default: false

quiet
何もコンソールに出力しない
Default: false

lazy
lazyモードに切り替える
Default: false

filename
lazyモードでコンパイルされるトリガーすべきリクエストに切り替える
多くの場合webpack設定オプション「output.filename」と等価です。

watchOptions.aggregateTimeout
最初の変更後の再ビルドを遅らせる
値はmsです 1000ms  = 1秒
Default: 300

watchOptions.poll
true: use polling (pollingを使う)詳しい設定方法(Document)
number: use polling with specified interval (詳細な間隔で使う)
Default: undefined

publicPath (required)
サーバーに対してのbindしたミドルウェアへのパス
多くの場合 これはwebpack設定のoutput.publicPathと等価です。

headers
独自ハンドラを追加します
例 { “X-Custom-Header”: “yes” }

stats
状態に対してのオプション出力
node.js API.を参照してください

middleware.invalidate()
手動でコンパイルを無効にします。
コンパイル変更時の内容を有効にする

middleware.fileSystem
メモリ上のコンパイルされたデータにアクセスできる可読のファイルシステム

【gulp】zsh: command not found: gulp!!!「急にgulpが壊れた!」と思ったら読む記事

【gulp】zsh: command not found: gulp!!!「急にgulpが壊れた!」と思ったら読む記事

【gulp】zsh: command not found: gulp!!!「急にgulpが壊れた!」と思ったら読む記事

zsh: command not found: gulp

まず。急には壊れません。
じゃあ原因は何だ!(お前だよ)
っていうのがありまして、
わたしも「ですよね、、」と思いながらも、ずーっとハマってて思い当たる節が色々ありすぎてわからなかった。

gulp
やっても
zsh: command not found: gulp
gulp -v
zsh: command not found: gulp(そりゃそうだ)

思い当たる節

・ログインshellいじった?
・nvmとかbrewとかいじった??
・nodeのバージョンあげたとか??
・npm i -g gulpでインストールはできるのに、gulpで実行できない($PATH通したつもり)
とか思い当たる節ある方。

これやってください。
前提条件
npm i -g gulp とnpm i gulpはやっている。インストールはされている。がそんなコマンドねーと言われる。

1.今のプロジェクトのnpmがどこをみているか確認

npm root
/Users/[userName]/Desktop/Git/react/playground/node_modules

2.今のグローバルのコマンド実行ファイルがどこを向いているか確認
npm root -g
/Users/[userName]/.npm-packages/lib/node_modules

ここのパスが問題だった。。
brewでnpmを実行していると見ているnode_modulesのパスが違う。。

3. npm config set prefix /usr/local

で変更する。下記をもう一回。
4. npm root -g
/usr/local/lib/node_modules
変わった。

そこにgulpをインストール。
5. npm i -g gulp


6. gulp

ありがとう解決してくれた英語記事

vagrant upしたら An error occurred while downloading the remote file. The error message, if any, is reproduced below. Please fix this error and try again.

Couldn’t open file /Users/**/base

続きを読む

楽しいローカル生活

Macproと5sがシンクロしています。コードを変えたら両方のデバイスに即時反映されます。つまりlocalでの修正がどちらにもすぐ反映されて、即時に実機確認ができるということです。
こんなローカル生活楽しい

こちらとどうにかmergeして開発すすめたい
GitHub

2日前までwebデザインの知識しかなかった芸人がサーバー構築して「サーバー構築芸人」になった話

search
AWS_Viso2 posted by (C)kanpan

わたしは算数、数学も苦手なのですが今日ミニマムでサーバー構築ができました。嬉しい。
今理解できた知識はほんの一部なんでしょうけど、それでも一般的なwebがどういうインフラ構築しててどうやってネットワークを敷いてるのか知ることができた。

あーなるほどな、通信ってこういうことだったのかって。

以下サーバー構築の環境でしたこと。
VPC内にプライベートサブネットとパブリックサブネットで分けて、
プライベート側にWebサーバー置いて、Apacheをインストール、機能を持たせて、IPアドレスをパブリックにしてインターネットゲートウェイに渡す。
ルートテーブルでパケットの仕分けした。

プライベートの方はデータベースサーバーを置いて、アクセスをパブリックサブネットからのwebサーバーだけに絞る。
ただそうするとMySqlをインストールすることもできないからプライベートサブネットからインターネットと通信できるように
NAサーバー置く。
NAサーバーはhttpとhttpsのIPアドレスをネット側に渡すようにした。DBとは一通にして。

スクラム開発で、サーバー側の人と距離が近いからちょっとでもネットワーク理解したくて、
そこから言語をやりたかった。

ここからが多分深いところでまだ「できる」と思っていないけど
「サーバーを構築した」っていうのは一旦自信を持っていいと思う(てゆーふうに鼓舞してきた)

ありがとうございました