この記事の概要
個人的によく書いている「俺式」シリーズ。
Angular6 で KOAN スタック Web アプリを作成する手順の備忘録。
以前までの経緯は、こちらの記事 を参照。
手順のうち、下記の内容を記載する
- Angular (v6) でのフロントエンド構築
- Koa (v2) で Web サービス, APIルーティングを構築
- その他、サーバサイドの簡単なバックエンド構築
- つまり、結果的に Web アプリのスケルトン的なものが完成する
加えて、以下、留意点。
- 外接部 (DB接続処理) の内容は今回書かない
- コンパイルに Webpack は一切使っておらず、 tsc のみ利用
- PWA (Progressive Web Apps) はあんま意識してない、ただの Web アプリ
- 今のところ GitHub などでソース公開はしてない (それだと勉強・理解にならないので)
前提
以下の環境で構築した。
- マシン:MacBook Pro (Retina, 15-inch, Mid 2015)
- OS:macOS High Sierra (v10.13.6)
- Node.js:v8.12.0
- Angular:v6.1.10
- Angular CLI:v6.2.6
上記のミドルウェア環境が未構築の場合は、公式ガイド等を参照してインストールしてください。
最低限、上記の前提が整ったものとして、作業手順を記載しています。
Express ではなく Koa を利用
ほとんどの記事では、Node.js の Web フレームワークとして、Express を使用した記事になっている。
古いバージョンは async/await が標準には無かったが、どっかのバージョンからはもう Express でも問題なく書けるようになり、より使いやすくなった。
ただ、もともとは、欲しい機能ほぼ全部盛りの「フルスタック フレームワーク」だったはずだが、v4 からは一部機能が分割され、使う機能によっては別途インストールが必要になるという中途半端な仕様になった。
何が入ってて、何が別インストールなのかわかりづらいので扱いづらい・・・。
ということで、Express を使った MEAN スタックではなく、同じ Node.js の Web フレームワークで、より軽量な Koa を使った KOAN スタックにする。
構築手順
実際に構築する内容。
量が多いので、記事を分ける。
手順 | 作業 | 内容 |
---|---|---|
1 | Web アプリのベース構築 | Angular6 でのフロントエンド構築と Koa でのバックエンド構築を行い、簡単なクラサバ通信を行う。 |
2 | アプリの daemon(デーモン)化と環境変数操作 | Web アプリの daemon(デーモン)化を行う。また、環境変数を操作し、アプリ実行モードによって色んな設定値を呼び分けられるようにする。 |
3 | クラサバ通信の呼び分け部分の作成 | フロントにサービスを作成し、バックエンドのAPIルーティングを整備し、細かくクラサバ通信ができる様にする。 |
4 | ロギング機構をつくる | HTTP 通信が発生した場合や、例外発生時などにログが残るようにする。 |
5 | セッション管理を行う |
koa-session を使用してセッション管理機能を作る |