🙌

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でした。調べるとhtdocspublic_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