Next.jsをレンタルサーバーで動かそうとして、思った以上に話が大きくなった話

とりあえずビルドした#

まずはローカルで動かす。

これは割と順調だった。

Next.jsのチュートリアルを見ながら画面を出して、

1
npm run build

も通る。

ほうほう。

なんか速そうやん。

じゃあサーバーに置いてみるか。

buildフォルダをアップした#

ここで最初の疑問が発生する。

ビルドしたら成果物が出る。

じゃあそのフォルダをFTPでアップしたら終わりちゃうん？

と思った。

Reactだけ触ってると割とそういう発想になる。

しかしここから雲行きが怪しくなる。

package.jsonが消えた#

サーバー上で

1
npm install

しようとした。

すると

1
node_modules

が出来ない。

おかしい。

なんでや。

確認すると package.json がほぼ空。

中身が

1
{
2
  "type": "commonjs"
3
}

だけ。

最初に疑ったことは

「Next.jsのビルド成果物って依存関係全部持ってるんちゃうん？」

だった。

でも違った。

そもそも今触ってるのが

SSR運用なのか
静的エクスポートなのか

自分でも分かってなかった。

Node.jsの話になってきた#

ここで気付き始める。

これ。

Reactをサーバーに置く話じゃない。

Node.jsアプリを運用する話や。

Next.jsを置くということは

Node
npm
package.json
サーバープロセス

の話が付いてくる。

初回表示改善のために来たはずなのに、

気付いたら運用の話をしている。

嫌な予感がした。

Djangoと共存させたい#

うちの環境は既にDjangoが動いている。

構成はざっくりこんな感じ。

1
Apache
2
  ↓
3
Django (8000)

ドメインも分かれている。

1
mydm001.skr.jp
2
mydm002.skr.jp

なので考えた。

Apacheで振り分けたらいけるんちゃう？

.htaccess迷宮編#

ここから完全に別のゲームが始まる。

例えばこんな設定。

1
RewriteCond %{HTTP_HOST} ^mydm001\.skr\.jp [NC]

最初は

「NCって何やねん」

から始まる。

次に

1
[L]

を見て

「どこまで効くん？」

となる。

さらに

1
RewriteRule ^index\.html$ - [L]

を見て

「ハイフン何やねん」

になる。

RewriteRuleの適用範囲が分からん#

途中で出てきた最大の疑問がこれ。

1
RewriteCond %{HTTP_HOST} ^mydm001\.skr\.jp [NC]
2
RewriteRule ...

って、

次の RewriteRule にも効くん？

効かんの？

である。

調べると、

RewriteCond は直後の RewriteRule にしか効かない。

つまり

1
RewriteCond
2
RewriteRule
3

4
RewriteRule

だと、

下の RewriteRule には効いていない。

ここで頭の中の理解が一回崩壊した。

どんどん話が大きくなる#

さらに

ポート8000誰が使ってる問題
SSL証明書問題
wwwありなし問題
リバースプロキシ問題

まで出てきた。

この辺りで思った。

俺、何をやってるんやっけ。

Reactの初回表示を改善したかっただけでは。

気付いたらホーム画面は出た#

最終的には

1
mydm001.skr.jp

でDjangoのフロントが表示できるようになった。

1
mydm002.skr.jp

で管理画面も出せるようになった。

一応目的は達成した。

しかし達成感よりも先に出てきた感想はこれだった。

Next.jsどこ行った？

である。

この時点で見えていた未来#

Reactの初回表示改善のために始めたはずだった。

しかし実際には

Apache
Node.js
Django
SSL
ドメイン
.htaccess

の調査をしていた。

この時点で薄々気付き始めていた。

もしかして。

もしかしなくても。

Reactのままの方が幸せなんじゃないか。

そんな考えが頭をよぎり始めていた。

この時点で、なんとなく結果は出ている。

ただ、問題はそこじゃない。

なぜそうなったのか。

何を調べて、

どこで違和感を覚えて、

何を理由に方向転換したのか。

それが今回一番面白いところだったりする。

次回、「結局Reactに戻った話」。

デュエルスタンバイ！

関連記事#