実運用経験のない2か月程度のreact勉強中が恐らく本番開発運用こうだろうと推察するブログ

意外と実運用の記事とか、本ってないのではないでしょうか。nodejsも自由にやろうと思えばできますし、reactもそうなのかな？nextjsに勝手についてくるのかwebpackなるものがあります。これがそもそも一番普及しているLAMP的なノリではないところがありますね。

LAMPですと、バーチャルホストで分けて本番環境、テスト環境をディレクトリでキッチリ分けたりします。でもreactなのかwebpackなのかは分かりませんが、こんな感じでなっています。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "開発環境用コマンド",
    "build": "ビルド用コマンド",
    "start": "本チャン用コマンド",
    "install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm run dev"
  },

testとinstallは海外とか色んな所でいいなと思ったもの、無意識に記述していたものです。実運用でもこれくらいは記載していそう。食べログとか、DMMとかリクルートに聞きたいわ。testは本当はいらんけど、Hello world的な「npm run test」を実行してみるテスツみたいなもの。このように何でも追加できて、それに記述されたコマンドが実行される。そう、開発なのか、本チャンなのかで、コマンドが変わるんですね！これがLAMP的にいうと何故？気持ちわるぅってなります。

installはcleanと書いても良くて、適当にnpmをインストールしていると順番なのかなんなのか壊れる時があるから。node_modules消して、package-lock.json消して、.nextっていうビルド後のファイル消して、npm installで、package.jsonにあわせてインストールしなおす。そしてnpm run devは「開発環境用コマンド」ですね！
この時におかしなことになっていると、あのモジュールがないぞとか、いろいろ分かります。

まぁちょっと怖いのが同じディレクトリで開発と本番があることですよね。一応切り分けられてはいるんですが、距離が近すぎます。キッチリ分けられていたLAMPと比べると、別にかっこよくもありません。

で、開発本番で渡す値を変えたり、ポート変えたりできる訳です。私は開発でゴリゴリしてポートそのままにビルド後に本番として「npm run start」しました。すると同じポートを使用できないので、別のポートを開放してそっちのポートでリッスンして「npm run dev」とした感じです。これで同時に同じPJTディレクトリで開発と、本番が出来上がりました。

あとはこの趣味レベルで開発ゴリゴリからの本番適応を繰り返して、本当に問題ないのかですね。一応一度実行したnodeはその時のファイルを参照し続けているので、開発のビルドがコケて、やべーーーってなっていても、旧来の状態でサービスし続けてはくれているはずではあります。そうはいってもドキドキですね。慣れかもしれません。LAMP歴長い人多いでしょうから同じ気持ちになると思うんですが、ディレクトリキッチリ分けて、ビルドが問題ない状態になったらcpとかsync的に本番用の別ディレクトリに反映させて「npm run start」をstop,startさせたいものです。まぁ面倒なんで問題なければこのwebpack?に従いますが。

そうそうちょっとしたミスとかすぐ直る軽微なバグとか、これっていちいちビルドするってことですね。この辺がWeb感薄くて、スマホアプリ感ありますね。どっちもアプリなんですけどね。

具体的に書きますと、本番は3000ポート、開発は3001ポートにする場合、

"dev": "next -p 3001",
"start": "next start -p 3000",

こうですね。これで参照するディレクトリも違います。nextjsを触っている方なら分かると思います。開発環境は少し処理が重くなるが、エラーとか出して開発しやすくなっています。逆に実運用には邪魔なのでビルドで軽快なエラーも見せないバージョンになります。

試しに「# npm run start」中に「# npm run build」したら反映されるか見たが、反映されず、restartしたらコケて、再buildしたらstartできた。
おいおい、これじゃリリースする度にbuild中止まるよね？サーバ複数で運用ですか？必ずメンテページですか？ちょっと未来と引き換えに、まだ不安定な部分しか見えない。ワシが知らないだけなんだろうか。

追記

dev -> build -> startでdev,startは両立できるが壊れるケースがあって、それがnpmなどでnode_moduleを追加するときだ。このときに.nextディレクトリがない！みたいなエラーがでてstartに影響が出る。つまり安全に行くならディレクトリは分けなくてはダメ。一旦npm installしてbuildしてstartといった一瞬サイトがおかしくなる。それあかんよね...。やっぱりメンテ画面だしたり2台構成で交互にスイッチさせてみたいなことを大規模なサイトだとやらないといけなそう。それかテストディレクトリをrsyncかなぁ。にしてもおやっぱおかしくなるな。ノンビジネスサイトならえいやー！でいいけどね。