名詞の性別を検索するサイトを作ったけど、意見を聞かせてください
Scrap はいくつか書いてみたけど
Article についても、書く練習をしてみます
なんか…… Scrap と編集画面が違って、書きにくいのですが……
（普通にプレビューボタンで、Markdownをプレビューしたい……）
質問する場なのかも分からないけど……
Idea カテゴリーならイイのかな？
とりあえず、このサイトです
Vue.jsを勉強するついでに というサイトを作ったのです
もともと自分用に作ったものだし
日本人にニーズ無いと思って、宣伝もしてないけど
それから3年経って
定期的にインド人？からの利用はあるのですが
もう作り直したいのです
システム構成です
構成は、以下のような感じです
- 検索して表示するだけのサイトなので、ログイン機能はない
- Readするだけで、Writeするものは何もない
サーバーの実装
名詞の性別を網羅した情報は
たった1ファイルのSQLiteに入れてある
Node + ExpressでCUIアプリを作って
foreverでサービス化してある
指定したURLを叩かれると、Expressがそれを受け取って
SQLiteに SELECT を実行して
結果をJSON形式にして、レスポンスとして返す
Expressは443番ポートでリッスンさせることが
rootでしかできなかったので、10000番以上にしてあって
Nginxのリバースプロキシ機能で、443番に転送してある
そのURLが な感じ
検索したい単語をクエリーで渡すと
検索結果がJSONで返る
こういうの、Web APIっていうのかな？
（分からないので、とりあえず以下、Web APIって呼びます。正しい名前を教えてください……）
画面の実装
ブラウザに表示してる画面側は
Vue CLI3でジェネレートしたプロジェクトを元に
Bulmaを使って整えた
vue ui って打つとブラウザに表示される
Vueの開発支援画面？をめっちゃ活用した
（npm run 〇〇を打たなくても、ボタンから実行できるので）
ビルドもボタンから実行して
dist に作られたHTMLファイルたちを、サーバーに置いて
Nginxでホストして表示してる
これら2つをホストしてるサーバーは
GCPのCompute Engine（e2-micro）のUbuntu
VPSっていうのかな？
そこに git を入れて
置き場のディレクトリを作って
GitHubからリポジトリを git clone してある
今のコードを維持したくない理由
これらのコードを維持したくなくなった理由は
理由1. VueよりReactを好きになったから
Vue2で作ったので、次はVue3に進もうと思ってました
でも、VuetifyもBulmaもBootstrapも、全然Vue3をサポートせず
サポートするよーって中の人が書いてたIssueも、遅延が多くて
世界中からの、まだですかコメントばかりで空気が悪くて
2年待っても、Vue3ではTailwind CSSしか使えず、全然進捗が無かったから
Vueより難しそうって思ってたReactで作ったら、Vueより簡単だったのです
Vueは自分にリアクティブの魅力を教えてくれたけど
もう卒業して読みたくない……って気持ちになった
なので、画面側をReactでリメイクしたい
Vite + React + mui で数個アプリを作ったけど、開発体験がすごく良かったし！
理由2. NodeよりDenoを好きになったから
Denoを使ってみたら、すごく開発体験が良かったのです
もともと
tsconfigとか、webpackの設定ファイルを書くのが嫌いなのです
あれらを細かく把握して
書けるようになりたい、という気持ちが無いのです
なので、サーバー側をDenoでリメイクしたい
今のシステム構成の不安なところ
以下、このままでいいのかな……？
って気になっている点を羅列します
どうせなら、「いま風に」
そして、自己流でなく「普通に」した上で、リメイクしたいためです
不安1. Web APIをホストしてるサーバーと、画面をホストしてるサーバーが同じって、いいのかな？
これって普通なんでしょうか？
ホビー用途だとしても、こんなテキトーでいいのか？
って思っちゃって、自信を持てません……
上記のシステムの場合
Web API側のプロセスは何もWriteしてないのだから
静的なホストしかできないような
別の、もっとシンプルなクラウドサービス上でも動作するはずです
ただ、URLは
Herokuのサブドメインとか、長いハッシュ文字列でなく
みたいに、自分のサブドメインであってほしいのです（自分で使いたい時に覚えられないから……）
自分のドメインのまま、GCP以外でホストすることも可能でしょうか？
その場合、どうやって証明書を取るのでしょうか？
（いまはサブドメインを増やしたいたびに、Ubuntu上でLet's Encryptするだけで済んでます）
不安2. GCPのCompute Engineのe2-microのままでいいのかな？
GCPは3年間毎月、完全に0円だったので
ぜんぜん満足できてるんだけど
なぜネット上の情報では、ホビー用途だとしても
無料期間が1年で終わるAWSが多くて、ずっと無料のGCPが少ないのですか？
（Azureはもっと少ないけど……）
私の体験＆体感だと、むしろこのe2-microの環境が
何かを試しに作る際の、第1候補になっちゃうのですが……
世間はもっと無料にこだわる人が多いと思ってたので違和感あって、気になります
EC2やS3はメジャーだし使いたいのですが
ホビー用途にAWSを選ぶ人は、2年目からいくらくらい支払ってるものでしょうか？
不安3. 1つのVPSに、こんなたくさんサービスやサイトをホストしていいのかな？
上記のサイト以外にも、サイトやWeb APIを10個くらいホストしてて
Nginxの sites-available が長ーくなってます
同時に起動してるけど
（e2-microだろうと）全部いちおう動いてはいるようなのですが
ホビー用途で小さいアプリをたくさん作ってる人は
皆様こんな感じですか？
HerokuとかNetfyのアカウントも持ってるけど
色んなところに作ると管理しきれなくなって
めんどくなって、自分には維持できなくなりそうなので、GCPに統一してるのですが
他の人は「いま自分がホストしてるURL群、と、その管理のための作業手順」
を、どうやって把握してるのでしょう……？
不安4. Nginxのリバースプロキシ機能って、こんな使いまくるものなのかな？
不安3に書いた、Nginxの sites-available には、リバースプロキシ設定が
大量に並んでます
自分の作ったWeb APIたちは、Nodeとか、Denoとか、Docker上のDenoとか
色んな言語の内蔵Webサーバーが核なのですが
どれも443番ポートではホストできないので
全部Nginxに443番に置き換えてもらう、この構成になってしまいます
しかも、最近は各アプリをDockerで構成してて
dist に置いたHTMLを、まずDocker上のNginxで（8080番とかで）ホストして
それをさらにホストUbuntuのNginxで、サブドメインへの443番に置き換える
ということもしてて
ホスト側のNginxの設定が、リバースプロキシのための行ばかりになってしまいました
自分の知識では
PythonにしろDenoしろ、言語内蔵のWebサーバーを使うと
URLを http から https にしたり
:8000 などの部分を消す方法が、この方法しかありません
しかし、世間もそうならば
もっとNginxでのリバースプロキシの記事は多くてもいい気がします
実際には、そんな記事はほとんど目にしないので
ほかの人たちは別の方法を使ってるのだと思いますが……
どうやってるのでしょうか？
不安5. もっとDockerを使わなくていいのかな？
Dockerを勉強して、上記のGCPの環境にDockerを入れて使ってもみました
ファイルを動的に生成しないようなアプリならば
それで特に問題なく、Dockerは素晴らしい体験でした
しかし、ファイルを生成するアプリだと
mount した volume に作られたログファイルなどが
root権限になっていて扱いづらいです
root以外で生成させる方法もあるようですが
世間の多くのDocker入門記事の手順に従うと、root権限で作られるはずです
Docker化によって発生する、こういう要変更な箇所を
ほかの入門者たちはどうやってスムーズに解決してるのでしょうか？
あるいは、情報の永続化手段として
ローカルのファイルシステムに、ファイルとして保存するのはもう古いやり方であり
クラウドなどに保存するのがメジャーになったとかで
パーミッションやオーナーが問題になることが少ない、などの理由でしょうか？
不安6. 毎日、サーバーを再起動してもいいのかな？
上に書いた は時々落ちてます
画面は落ちてないけど
裏にいる https://gender.llll-ll.com/api/translate?q=cat が落ちてるから
検索しても、結果が表示されないという挙動になります
ディスク容量は余ってるし
たぶん、一気にアクセスが来るか、Ubuntuを起動し続けると
徐々にメモリが逼迫して、Nodeのプロセスが固まる
という動作だと思うけど……
cron で1日1回 sudo reboot すると安定しました
Ubuntuの再起動後、必要な各サービスは自動的に起動しますが
1分間くらいはサイトが 404 になります
ホビー用途だとしても、こんな大味な対策をして良いのでしょうか？
不安7. 本番環境へのデプロイの方法が、git pullっていいのかな？
GitHub ActionsとかCIとか、全く使ってません
サーバー側のソースコードを更新する方法は
ssh でGCPのUbuntuにログインして、リポジトリ置き場のディレクトリに cd して
git pull する、です
やりたいことは気分的にサーバーへのプッシュのはずなんだけど
やってる操作は、サーバーに入ってからプルなわけです
いまやってるこの操作が、正解な気がしません……
きっとデプロイというのは、もっと手元でコマンド1発でできるのが
普通のやり方なのだと思います
実際、npmとかHerokuにデプロイした時は、そんな感じでした
git push によるVPSへのデプロイも、勉強して試したことがありますが
VPS内に push 用のリポジトリ置き場と、pull 用のリポジトリ置き場を用意し
Git Hookを使う方法で
VPSのOSを入れ直すたびに、こんな面倒な準備したくない！
って思いました
不安8. ビルドしたHTMLをデプロイする際に、元になったReactのプロジェクトごとデプロイしていいのかな？
Viteでプロジェクトを生成すると、.gitignore が自動生成されますが
GitHubの各リポジトリのルートにある .gitignore とかぶってしまうため
プロジェクトはリポジトリのルートから、1つ掘って置くようにしてます
dist はたいてい、.gitignore で対象になってますが
自分はそれを解除してて
dist ごとGitHubに push してます
こうすると、不安7で書いたように
VPSでGitHubから pull するだけで dist が展開されるので
そのパスをNginxで指定しておけば、pull するだけで、サイトを更新できるためです
でもこの方法だと、本来VPS上には必要ないはずの
Reactのコード（.tsx とか）まで、一緒に pull されてくるわけで……
このやり方は良くない気がします
でも、どうするのが普通なのかが分かりません……
あと、同様の疑問ですが
TypeScriptから 〇〇.min.js をビルドするようなプロジェクトで
ビルドした js をデプロイする際に、元になった ts ごとデプロイしていいのかな？
という疑問もあります
この場合も、dist を .gitignore から解除しておけば
GitHub上に 〇〇.min.js が置かれ、そのRawのURLができるので
わざわざnpmに publish しなくても、この方法で配布すればイイんじゃないの？
って思ってしまうのです
自己流を卒業したい
この辺の不安が解消すると
次のレベルに行けそうなので
詳しい人に、答えられるだけ答えてもらいたいです
今だったら、こういう構成で作るのが普通だよ
という、普通を教えてください
（NextとかCloudflareとかなんでも）
ペコリ
Discussion