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

by

クリエイターとエンジニアを応援するNP-Systems@個人開発

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>

常時SSL化する

常時SSL化するためには、2つのことを行います

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>


About Author: M. Shikishima

@Masaya04997245 会社員をしながら個人でシステム開発をしています.
this is single-default.php
最新記事
同カテゴリの記事 ionic-angular