AngularでのSPA開発に便利な、angular-http-serverというnpmパッケージの紹介です。
以前から開発環境で使っている、http-serverというパッケージ。
http-serverというコマンドを実行するだけでカレントディレクトリをドキュメントルートにした簡易HTTPサーバーが立ち上がるという便利なやつです。
しかし、ビルド済みのAngularプロジェクトをhttp-serverで実行すると、「存在しないパスを指定した際にindex.htmlにリダイレクトする」という設定がされていないために、ルーティングの確認ができません。
そんな時便利なのが、angular-http-server いかにもすぎる名前ですが、「存在しないパスを指定した際にindex.htmlにリダイレクトする」という設定がされているため、ルーティングの確認も行うことができます。
インストール
どこでも実行できるように、今回はグローバルにインストールします。
$ npm install -g angular-http-server
使ってみる
Angular-CLIで作成したプロジェクトを例に、ビルド済みページの動作確認を行ってみます。
まずは、ng buildでプロジェクトをビルド
$ ng build
プロジェクトルートディレクトリ以下にdistディレクトリが作成され、ビルド済みファイルが作成される。
./dist/
├── favicon.ico
├── index.html
├── inline.bundle.js
├── inline.bundle.js.map
├── main.bundle.js
├── main.bundle.js.map
├── polyfills.bundle.js
├── polyfills.bundle.js.map
├── styles.bundle.js
├── styles.bundle.js.map
├── vendor.bundle.js
└── vendor.bundle.js.map
distに移動して、angular-http-serverコマンドを実行します。
$ angular-http-server
ブラウザからlocalhost:8080にアクセスすると、トップページが表示され、その他ルータで設定したパスへのリンクも正常に行えるかと思います。
オプション
ポート番号指定
angular-http-server -p <ポート番号>
HTTPSでサーバー起動
angular-http-server --https
CORSを有効化
angular-http-server --cors
最後に
便利です。