1. daikiojm

    Posted

    daikiojm
Changes in title
+AngularのSPAをローカルでサクッと確認するにはangular-http-serverが便利
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,75 @@
+AngularでのSPA開発に便利な、[angular-http-server](https://www.npmjs.com/package/angular-http-server)というnpmパッケージの紹介です。
+
+以前から開発環境で使っている、[http-server](https://www.npmjs.com/package/http-server)というパッケージ。
+`http-server`というコマンドを実行するだけでカレントディレクトリをドキュメントルートにした簡易HTTPサーバーが立ち上がるという便利なやつです。
+しかし、ビルド済みのAngularプロジェクトをhttp-serverで実行すると、「存在しないパスを指定した際にindex.htmlにリダイレクトする」という設定がされていないために、ルーティングの確認ができません。
+そんな時便利なのが、[angular-http-server](https://www.npmjs.com/package/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
+```
+
+
+## 最後に
+
+便利です。