AngularをビルドしてCPI(レンタルサーバー)上にデプロイする

本記事ではビルドしたAngularアプリケーションをCPI(レンタルサーバー)にデプロイする手順を記載します。

環境

mac : Mojave(10.14.3)
Angular CLI : 7.3.0

Angularをビルドする

// baseHrefには/html配下のindex.htmlが配置してあるフォルダを指定する
// ※CPIは '/html' がドキュメントルートとなるため、/htmlはpathに含めない
ng build --baseHref='your base href'

CPIにデプロイする

ビルドしたAngularアプリケーションをCPIの /html 配下の任意のフォルダに配置します。
※/htmlフォルダはデフォルトで用意されているものを使用してください。
※この時点ではリダイレクト設定がされていないため、まだアプリケーションは動作しません。

.htaccessを記述する

Angular公式の記述を参考に.htaccessを作成します。

// CPI上でリダイレクトさせるためには以下設定が必要となります。
Options +SymLinksIfOwnerMatch

// Angular公式のリダイレクト設定
RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

.htaccessを配置する

対象フォルダにftpで.htaccessを配置してください。

CPIでftp経由でファイルを配置する方法:
https://www.cpi.ad.jp/support/faq/faq_func/faq_func_ftp/support-248.html

なぜか繋がらない！って思った時の確認ポイント

• デプロイしたindex.htmlの base href は正しい参照先に向いてますか？
• .htaccessに Options +SymLinksIfOwnerMatch を追加しそこなってませんか？

参考
CPI:
https://www.cpi.ad.jp/

CPIの.htaccessについてのヘルプ:
http://acesr.document.secure.ne.jp/other/Tips-htaccess/

CPIのドキュメントルートについて:
https://www.cpi.ad.jp/support/faq/faq_func/faq_func_directory/support-602.html

Angular公式のデプロイ方法:
https://angular.io/guide/deployment