posted: 2019/05/19

netlify devでparcelがランダムポートにならないように騙す

netlify devは、ローカル環境でproxyやfunctionをローカルに立ててくれる便利なシロモノだ。

これの中身がどうなっているかというと、こちらのASCIIの図がわかりやすいだろう

デフォルトでは、自前のプロダクトが5555である場合、それをnetlify devがproxyして、8888で通せるようになっている。

そして、それぞれプロダクトのポートは detectorsという部分で内部で自動決定されている。

ここにヒットしなかった場合、ポートが8888ではなく起動のたびにランダムになってしまい大変面倒くさい。

parcelでの問題

現状、parcelは上記detectorが無い。
更にparcelの場合、parcel serve エントリポイントのファイル という指定をするため、上記detecotorsで決定しきれない（と今の所思ってPRを断念した）

かといってこのままランダムポートも耐えられないので、一旦下記のように乗り切った
試してないがwebpackもdetectorが無いので、同様の解法が使えるかも知れない

仕組み上、netlify-devはdetectorを見ているだけなので、邪道だが他のプロダクトだと思わせて騙してしまえばとりあえずワークアラウンドになる。
別にnextでなくても良いのだが、一番シンプルそうなnextを選んだ

まずpackage.jsonにnextが含まれている事があるのでこれを入れる

$ npm i next

次にpackage.json。こちらはdevとしてparcelの起動を設定しておく。portはnextにあわせて3000に割り振る

{
  "scripts": {
    "dev": "parcel serve --port 3000 src/index.html",
    "start": "dotenv netlify dev"
  }
}

これであとは下記で parcel -> (3000) -> netlify-dev -> (8888) とつなげてくれる。

ポート固定出来ないの？という話はissue#173では上がっているので、そのうちなんとかなるかもしれない