React+Viteの環境構築_AzureVM_AlumLinux9

作成日: 20240625
最終更新日: 20240625

はじめに

ローカル環境にNode.jsが構築されているのは前提
WebサーバーはApacheの使用を前提にしてます
AzureVMにApacheを導入しているのも前提です
OSはAlmaLinux9を使用しています

AzureVMとか言っといてAzureVM関係の知識は記事にない気がするけど検索用ワードです。
初心者がAzureVMにAlmaLinuxを入れてReact+Viteをデプロイしたくて検索したときにAzureVMもタイトルに入ってた方が安心するよねって想定。

React+Vite環境構築

React+Viteプロジェクトを作成

React+Viteプロジェクト自体はローカルで開発して完成形をVMにgit cloneするなりFTPソフトで転送するなりした方がいいと思う

詳細は下記記事
- https://zenn.dev/longbridge/articles/93f63e0423785b

npm create vite

.htaccessをpublicディレクトリに追加

中身は下記をコピペする
.htaccessがないとApacheにデプロイしたときにルーティングが機能しない

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

Apacheにデプロイする

VMにNode.jsをインストール

yum module list nodejs
yum module install -y nodejs:20
node -v

ローカルのプロジェクトをVMに持ってくる

git cloneするなりFTP使うなり。

FTP使う場合はユーザー権限が適切じゃないと転送できないから注意ね
chownコマンドとかで変えてもろて。

React+Viteプロジェクトをbuildする

buildコマンド
- ビルドに成功したらdistディレクトリがプロジェクトに生成されるからそれの中身を使用します

npm run build

ローカルでBuildしたやつをドキュメントルートにFTPで持ってくるとかでも良いかもね

Apacheで.htaccessを有効化する

デフォルトだとおそらく無効化されているので有効化する

httpd.confを編集するために開く

vi ../etc/httpd/conf/httpd.conf

下記に該当する箇所の「AllowOverride」をAllに変更する

# Further relax access to the default document root:
<Directory "/var/www/html">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   Options FileInfo AuthConfig Limit
    #
    AllowOverride All # こうする
    #AllowOverride none  # デフォルトがnoneだと思うけどnoneだと.htaccessの使用ができない
    #

ドキュメントルートにbuildしたReact+Viteプロジェクトを配置する

ドキュメントルートの確認または編集

vi ../etc/httpd/conf/httpd.conf

多分デフォルトはこんな感じ

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/var/www/html"

#
# Relax access to content within /var/www.
#
<Directory "/var/www">

このドキュメントルートの場合はhtmlディレクトリの中に
buildしてできたファイル群(distディレクトリの中身)をコピペするって感じ

デプロイ成功

この手順でApacheにデプロイすることができます！！

トラブルシューティング

デプロイしたサイトで画像等が表示されない

静的アセットをimportして使用していないのが問題
- https://ja.vitejs.dev/guide/assets.html

あとがき

わからないところや問題点あれば連絡いただけると対応いたします～

よかったらTwitterフォローしてね！
フォロバしまっす！

AzureVM+AlmaLinux9+ApacheでReact+Viteの環境構築とデプロイしたときのメモ的な