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

# React+Viteの環境構築_AzureVM_AlumLinux9

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

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

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

## 目次

- [React+Viteの環境構築\_AzureVM](#reactviteの環境構築_azurevm)
  - [はじめに](#はじめに)
  - [目次](#目次)
- [React+Vite環境構築](#reactvite環境構築)
  - [React+Viteプロジェクトを作成](#reactviteプロジェクトを作成)
  - [.htaccessをpublicディレクトリに追加](#htaccessをpublicディレクトリに追加)
- [Apacheにデプロイする](#apacheにデプロイする)
  - [React+Viteプロジェクトをbuildする](#reactviteプロジェクトをbuildする)
    - [動作確認](#動作確認)
  - [AzureVMにNode.jsをインストール](#azurevmにnodejsをインストール)
  - [Apacheで.htaccessを有効化する](#apacheでhtaccessを有効化する)
  - [ドキュメントルートにbuildしたReact+Viteプロジェクトを配置する](#ドキュメントルートにbuildしたreactviteプロジェクトを配置する)
  - [デプロイ成功](#デプロイ成功)
- [あとがき](#あとがき)

# React+Vite環境構築

## React+Viteプロジェクトを作成
React+Viteプロジェクト自体はローカルで開発して完成形をVMにgit cloneするなりFTPソフトで転送するなりした方がいいと思う
- 詳細は下記記事
  - https://zenn.dev/longbridge/articles/93f63e0423785b
``` powershell
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をインストール
``` powershell
yum module list nodejs
yum module install -y nodejs:20
node -v
```

## ローカルのプロジェクトをVMに持ってくる
git cloneするなりFTP使うなり。

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

## React+Viteプロジェクトをbuildする
- buildコマンド
  - ビルドに成功したらdistディレクトリがプロジェクトに生成されるからそれの中身を使用します
``` powershell
npm run build
```
ローカルでBuildしたやつをドキュメントルートにFTPで持ってくるとかでも良いかもね


## Apacheで.htaccessを有効化する
デフォルトだとおそらく無効化されているので有効化する
- httpd.confを編集するために開く
``` powershell
vi ../etc/httpd/conf/httpd.conf
```
- 下記に該当する箇所の「AllowOverride」をAllに変更する
``` powershell
# 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プロジェクトを配置する
- ドキュメントルートの確認または編集
``` powershell
vi ../etc/httpd/conf/httpd.conf
```
- 多分デフォルトはこんな感じ
``` powershell
#
# 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フォローしてね！
フォロバしまっす！

https://twitter.com/rioLi0N