Angular2アプリケーションを通常のサーバーにデプロイ

Angular2アプリケーションをangular-cliでビルドすると公開用のdistフォルダが作成されるので、
基本的にはこれをサーバーにアップすればそのまま動作する。

ただ、jsファイルはハッシュ値がついてファイル名が変わってしまうため、
多少気をつけないといけない。

簡単にデプロイするための方法として下記のような方法があげられる。

distフォルダもignoreせずバージョン管理してしまう

特に支障がなければdistフォルダもcommitしてしまえば良いと思う。

ソースに変更がなければ何度ビルドしてもハッシュ値は変わらない気がするので、
バージョンアップの際だけビルドしてそのままコミットで問題ないと思う。
あとは本番サーバーでpullするだけ。

デプロイ用のプログラムを作成する

何らかの理由でdistフォルダ以外は本番にアップしたくない場合、
上記方法は使えないので自動デプロイ用のプログラムを用意する必要がある。

具体的には下記のような処理のプログラム。

1. 準備用フォルダを作成
2. 準備用フォルダに最新のdist内ファイルを全てアップロード
3. 本番フォルダと準備用フォルダを入れ替え

一人もくもく会 用にぱぱっと適当に作成したプログラムのサンプル。

Deploying script with sftp for Angular. 'npm run deploy' or 'npm run deploy rollback' · GitHub

必要に応じて準備用フォルダを事前に削除したり、古い本番フォルダを残してバージョン管理するなり削除するなりが必要かと思われる。

.htaccess

関係ないので補足になるが、ルーティングを使っている場合、トップページ以外からアクセスが来た場合もそのURLのページを表示しなければならないので、
下記のような.htaccessの設定が必要となる。

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]