見出し画像
Photo by maikosan0429

ReactでNginxで公開しました。。

くまかけ

以前から、クラフトビール関連の情報を残していきたいなぁと考えてました。
今回とうとう手を付けることに。
んで、どうせなら避けてた？React使おうと思いっ立ったのがドタバタの始まり始まり〜！！！です。

Reactの簡単なのは以前作ったことあるし、ChatGPT君もいてくれるから、軽い軽い！！なんてスタートしました。。。ふぅ〜。。。

最初に悩んだのUIライブラリ

これも、どうせ作るなら味気ない画面よりUIライブラリを使ってみようと思い立ちます。
調べてみるといろいろ案ですねぇ。。。
そのなかで、普段"adminLte"使ってるんで、”React-admin”を試してみました。

まずはサンプルの作成。。

ChatGPTに「React + React-adminで登録画面と一覧画面を作っておくれ！」
と指示をすると、２つ３つ質問が返ってきた後、さらさらさら〜っと作ってくれました。いやいや、すごいもんです。
できてきた画面を見ながら、あれして、これしてって指示すると、その都度サラサラサラ〜っと作ってくれました。

実は、不採用としました。

画面は、左メニューで、なんかかっこいいなぁと思える画面ができてきました。これでええやんなんて思いながらソースを見てるとなんか違和感。
このReact-admin、ルーティング処理に独自の処理を採用しています。
最初、どこでルーティングしてるんだろって２度見しちゃいました。
もちろん、React-routerの利用も可能なんですが。。
今回もう一つのテーマとしてReactのトレーニングがあります。
なので、極力標準的な構成にしたく、泣く泣く不採用としました。

ということで。。

ということで、ライブラリも普通に使われているものと決めて「Material UI」を利用することとしました。
これも同様にChatGPT君に「React + MaterialUIで登録画面と一覧画面を作っておくれ！」と指示をすると、スラスラスラ〜っと作ってくれました。
React-adminに比べると、あっさりした画面が出てきました。
まぁ、後で気が向いたらなんとかしましょう(^^)

バックエンドは？

Reactをフロントエンドとしたら、そこから情報を受信して、一覧を返したりデータベースに登録したりの、バックエンドが必要となります。
ここは手堅く、いつも使っているnodejs + Postgresqlで構築することとしました。
早速ChatGPTくんに「フロントエンドから来たパラメータを受診して、登録修正削除をするスクリプトを作っておくれ！」と指示すると、パタパタパタ〜っと作ってくれました。いやほんと便利な世の中に。。

開発環境〜！！

いつもは手元のMacbookAirで開発をするんですが、今回は思うところがあり、Proxmoxで構築した仮想サーバー環境で開発をしています。
ubuntu24 + nginx + postgresql16が既に動いている環境です。
今回この環境のおかげで一つ知識を得ました。
それは、Dockerの定義の”network”定義です。
Postgresqlが常駐している環境での開発なんてなかったんで、意識しなかったのですが、今回、見事にポートがガッチャンしました。
ChatGPT君にどうしようって聞いたら、「そんなもんnetworkしてbridgeすりゃOKよ！」(めっちゃ意訳。。)とのアドバイスをもらい、初めて使用しました。一つ賢くなりましたww

環境設定でウロウロ

これは、ChatGPT君にハメられた時のメモです。
Reactでは、環境変数としては.envや.env.productに記載すれば開発環境、本番環境で分けて定義ができます。
nodejsでは、普段は、開発環境とdocker-composeで、本番環境はpm2で起動管理をしているので"ecosystem.conf.js"に記載をしています。
nodejsでも、.env、.env.productionが使えるよ〜なChatGPT君から話が来たんで試してみました・・・が、結局は諦めましたora
NODE_ENVをみて自動的に読み込むファイルを切り替えてくれるのかと期待したのですが、ものの見事に裏切られました。。
改めてChatGPT君に尋ねてみたら、「そんなことできませんよ？」とのつれない返事。。
nodejsのなかで、NODE_ENVを見て切り替えるなんて方法もあったんですが、今回は普段の方法を取ることにしました。

本番環境〜！！

今回これ用に一つ仮想サーバーを作成しました。
ローカルのDNSがあるんで、適当に「tools.test.cm」なんてしています。
tools.test.cm：React画面(一覧画面)が表示されます。
tools/test.cm/util：バックエンドが呼び出されます。
こんな感じのnginxのconfを設定しました。
ここで一つ。
バックエンド用に
location /util {
  root /opt/tools.test.cm/public_html;
}
のようにしていると、tools.test.cm/util/test.htmlてアクセスとするとpublic_html/test.htmlではなくpublic_html/util/test.htmlへアクセスがされます。
これを回避するには
location /util {
  alias /opt/tools.test.cm/public_html;
}
とする必要があります。
こうすることで、public_html/test.htmlにアクセスしてくれるようになります。

とりあえずひと段落

今回Reactの勉強したいなぁからスタートしたプロジェクト。
もっと細かいネタはあれこれあるんですが、それはまたどこかです。
ここまでお読みいただきありがとうございました！


いいなと思ったら応援しよう！