Angular（Ionic）をWebアプリケーションとしてapache(Xserver)でデプロイする

XserverでAngular（Ionic）をホスティングする方法です。流れとしては

サブドメインを設定
そのサブドメインにionic build –prodで生成したファイルをアップロードする
そのサブドメインのルートに.htaccessを設置する
常時SSL化する

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

https://awesome-rainbow-colors.com/2020/07/25/ionic%E3%81%AEandroid%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E3%81%97%E3%81%A6%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4/

常時SSL化する

常時SSL化するためには、２つのことを行います https://www.xserver.ne.jp/manual/man_server_fullssl.php まず、無料独自SSLを導入します。これでHTTPSで接続するとSSL通信できるようになります。さらに、HTTPで接続した時に自動でリダイレクトするように.htaccessに下記を追加します。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

なので最終的には、下記の.htaccessを作成して、サブドメインのプロジェクトのルートフォルダに設置すればいいです。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>