VueなどSPAがリロードでNot Foundになる件に対応

Vueのアプリでvue-routerを使いSPAにしたとき、
デプロイした環境でブラウザのリロードを行うとNot Foundになる。

このときHTTPサーバの設定が必要であることをいつも忘れるので記録する。

apacheの場合

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

<VirtualHost *:80>
    ServerName (YourServerName or IP address)
    DocumentRoot /var/www/html
    <Directory "/var/www/html">
        FallbackResource /index.html
    </Directory>
</VirtualHost>

sudo systemctl restart httpd

nginxの場合

sudo vi /etc/nginx/nginx.conf

server {
    listen       80;
    charset      utf-8;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

sudo systemctl restart nginx

参考

• https://stackoverflow.com/questions/55977676/error-404-on-reload-or-direct-url-with-vue-and-apache
• https://stackoverflow.com/questions/66511355/404-on-refresh-with-vue-router-and-nginx