React Routerを使用したSPAをApache環境へデプロイする
はじめに
大学の授業でApache環境のさくらのVPSを与えられ、Webサービス作成を行いました。
その際、デプロイに苦労したので記事にしようと思いました。
環境
- Ubuntu 24.04
- Apache 2.4.63
- Nodejs/npm インストール済み
作成したwebサービス
- フロントエンド
- React
- Vite
- TypeScript
- バックエンド
- Flask
- SQLite
手順
アプリをクローン&ビルド
$ git clone https://github.com/yourname/yourproject.git
$ cd yourproject
依存関係のインストール&ビルド
$ npm install
$ npm run build
成功するとdist/
フォルダやbuild/
フォルダが生成されます。
Apacheの公開ディレクトリに配置
自分の環境では/var/www/html
がDocumentRootでした。調べるとhtdocs
やpublic_html
の場合もあるらしい。
$ sudo rm -rf /var/www/html/* #/var/www/html/の中身を削除
$ sudo cp -r dist/* /var/www/html/
これで、http://IPアドレス/
にアクセスすれば、Reactアプリが表示されるはずです。
しかし、ReactRouterを用いた場合、ページ遷移すると404を返します。
これは実際に遷移先のページを表示しているのもindex.html
と.jsファイルのおかげであり、遷移先の.htmlファイルは存在しないからです。
そのため、どんなURLでもindex.html
を返すようにする必要があります。
その設定を.htaccess
ファイルで行います
.htaccess
ファイルを作成
ビルドファイルがあるディレクトリ(/var/www/html
)に.htaccess
を作成します。(テキストエディタはお好きなものを)
$ cd /var/www/html
$ vim .htaccess
次の内容を記述してください
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
.htaccess
ファイルを有効化
/etc/apache2/site-available/000-default.conf
内の、AllowOverride
をAllにする。
$ sudo vim /etc/apache2/site-available/000-default.conf
AllowOverride
をAllにする。
<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html
<Directory /var/www/html>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
# etc...
</VirtualHost>
Apache再起動
sudo systemctl restart apache2
これでページ遷移が問題なく行われるはずです。
これ以降の開発では、プロジェクトファイルでgit pull
,npm run build
,sudo cp -r dist/* /var/www/html/
を行えば大丈夫です。
flaskの設定(追記)
AWSやさくらのVPSだと5000番を通さない場合が多いです。そのためApache側で80番に飛んだら自動で5000番に遷移させるように設定する必要があります。
configファイルを開く
$ sudo vim /etc/apache2/site-available/000-default.conf
80番に飛んだら5000番に飛ぶように追記する
<VirtualHost *:80>
ProxyPreserveHost On
ProxyPass / http://localhost:5000/
ProxyPassReverse / http://localhost:5000/
</VirtualHost>
参考になれば幸いです。
Discussion