LoginSignup
3

More than 5 years have passed since last update.

Angular6 で俺式 KOAN スタック Webアプリを構築する、ほぼ全手順(概要)

Last updated at Posted at 2018-12-17

この記事の概要

個人的によく書いている「俺式」シリーズ。
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 を使用してセッション管理機能を作る

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3