Apacheでwebサイト公開(React)しようとしてハマった罠

はじめに

こんにちは

私はwebアプリ，webサイト開発に関しては右も左もわからないズブの素人でございます．
そんな私がPortfolio系のサイトを作って自宅サーバーから公開してみたわけです．

ちなみにReactなどのフレームワークはおろかjavascriptやHTML,CSSすらもほぼ未経験です．お恥ずかしながらjsxなんてものは知りもしませんでした．

この記事では私が特によくわからなくて躓いた部分について書きます．
私と同じようなズブの素人のそこのあなた🫵の役に立てれば幸いでございます．

対象者

・サーバーもフロントエンドも何も知らないけど自分のサイト作ってみたい!
・js? jsx?😩

0. 前提

前述した通り私もまともな知識があるわけではないので，間違ったことを言わないようにあまりに詳しくない事には触れません．
ですので，サーバーを立てるとか，webサイトのソースコードプログラミングに関しては，他のサイトやyoutubeを参考にして作ってください．

ここではyoutuberが当たり前の事すぎて説明を省いたであろうことをざっくりと説明します．

1. Apache

1.1 ソースコードを置くディレクトリ

まず，WindowsにApacheをインストールすると，こんな感じで↓ Cドライブの配下にApacheのディレクトリが作成されます．

c/
|
Apache24/
    ├- bin/
    ├- cgi-bin/
    ├- conf/
    ├- error/
    ├- htdocs/
    |   └- ソースコードはここに入れる
    |
    さらにたくさんのフォルダとファイル達

公開するサイトのソースコードは'htdocs'というフォルダの中に入れます．
Apacheを起動するとhtdocsの中を参照するようにconfigに記述されているからです．この参照先を変えるにはApache24/conf/httpd.confを編集することになります．

2. サイトのソースコード

今回私は，
・React
・Tailwind CSS
・Vite

を用いてtutorialを見ながらサイト作成を行いました．

ソースコードはHTML, CSS, JavaScript, JSXを使います．

2.1 JSXの罠

JSXはJavaScriptの拡張構文と呼ばれるもので，Reactの開発で"人間にとって"大変便利なものになります．ただし，あくまで人間がコーディングをする際に便利なだけで，これがブラウザで動くわけではない事に注意が必要です．ここで私は大躓きをしました．

"コードを書いてもブラウザで動作しない? じゃあどうやって外部に公開するんすか🤔"

私はjsxがブラウザで動作しないということを知らずに大人になってしまったので，コードをApacheに載せても一向にCSSが反映されずに途方に暮れることになります．

解決策
JSXで記述したものは本番環境に移行する際に，.jsxから.jsにトランスパイルしなければいけません．
トランスパイルとは言語を別言語に変換する事です．この場合，ブラウザが認識できる.jsに変換しています．

私は今回Viteを用いて開発を行いました．また後述しますが，Buildをすると勝手に.jsにまとめてくれます．私はこれに気づいていませんでした．
トランスパイルをしなければならない事を知って，自力でトランスパイルをする方法を調べてましたが，無駄でした．勝手にやってくれます．

2.2 Build と Dev

コードを書いている最中はこまめにローカルホストで実行して確認をしますね? その際に

npm run dev

などのコマンドを用いると思います．devは開発中に出来を確認するために使うコマンドですが，これで完成!という時は

npm run build

を使います．
私を罠に嵌めた仕様がありまして，devでローカルホストで表示する分にはトランスパイルが必要ないという事です．しかし本番のブラウザで動作させたら画面が真っ白だったりcssが適用されてなかったり...
htmlやcssのみでの開発と同じようなもんだと思っていましたから，トランスパイルなんて概念は知っているわけがないのです．

npm run buildをすると開発ディレクトリ内に"dist"というフォルダとその中に.htmlやら.js，.cssなどのファイルができているはずです．これが本番環境に持っていくべきフォルダになります．
この中の.jsは先述した.jsxがトランスパイルされた結果の産物です．

この二つの枠の違いは，configファイルとjsonファイルがあるかないかですかね．青枠の部分はconfigがあるため，buildやらdevができますが，赤枠単体ではそれらができません．
私は，サーバーにソースファイルを移行した後build(実行の意味で)をして動かすのかな?と思っていたため，buildができず困惑しました．
結論を言うと，Apacheの場合はhtdocsにdistファイル(赤枠)の中身を置くだけでwebサイトは表示できます．何か実行的なことをする必要はありません．

buildをした後，さらに編集をする場合は，開発ディレクトリでもう一度buildをし，生成されたdistフォルダをhtdocsに置き直します．

2.3 全体の流れ

1. 開発用ディレクトリ(どこでも可)で.jsxをふんだんに使ってソースコードを書く
2. npm run devで実行結果を確認
3. OKならnpm run buildでdistフォルダを生成
4. Apacheのhtdocsにdistフォルダの"中身"だけを移行させる
5. webサイト完成
   -----------さらに編集する時は--------------
6. 開発ディレクトリでソースコードを編集
7. 開発ディレクトリでもう一度build
8. htdocsにdistを置き直す

こんな感じの流れで作成していきます．
htdocsに入れたらbuildもdevもできずエラーになりますので注意

3. 症状まとめ

1. ブラウザで表示したら画面が真っ白 or cssが適用されてない
   -> 開発用ディレクトリのままhtdocsに入れていた．ブラウザは.jsxを認識できないため，.jsにトランスパイルする必要がある．

2. distフォルダをhtdocsに移行したが，htmlも表示されない
   -> Apacheのデフォルトでは参照先はhtdocs直下になっているため，htdocs直下にindex.htmlがないといけない．つまり，distフォルダから全部出して配置する必要がある．

3. htdocs内でbuildできない
   -> する必要ないし，できなくて正常です．

4.さいごに

独学ド素人の私が躓いたところを紹介しました．また思い出したら追記します．
同じド素人のお役に立てれば幸いです．