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ソフトで転送するなりした方がいいと思う
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して使用していないのが問題
あとがき
わからないところや問題点あれば連絡いただけると対応いたします～
よかったらTwitterフォローしてね！
フォロバしまっす！