LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tomy0610(c Tomioka)

Angular6 で俺式 KOAN スタック Webアプリを構築する、ほぼ全手順（2）

Last updated at Posted at 2018-12-17

概要

Angular6で「俺式 KOAN スタック」で Web アプリ構築するための個人的な備忘録記事。
概要については「こちら」を参照。
事前に「ほぼ全手順（1）」が完了していることが前提。

今回の内容は「Web アプリの daemon（デーモン）化」「環境変数を操作し、アプリ実行モードによって色んな設定値を呼び分けられるようにする」

Web アプリの daemon（デーモン）化

現状のままだと、アプリ起動コマンド実行後は、以下のような状態になる。

...
> demo-app@0.0.0 serve:node /path/to/webapp/demo-app
> node dist/web-server.js

======================================================================
MEAN stack Template App. アプリ名をここに表示
======================================================================
=========================================================== ver.0.0.0
App is listening on http://localhost:3000

この状態だと、「コマンド実行後、裏でアプリを動かしっぱなしにする」ということが出来ない。
なので、アプリを daemon（デーモン）化して、バックグラウンドでも起動したアプリが止まらないようにする。

1．daemon 化モジュール "forever" をインストール

npm install forever

2．アプリ起動コマンドを追加

forever 実行するスクリプトを、以下のとおり追記。
（呼出コマンド、アプリ起動コマンド、起動済み一覧表示コマンド、停止コマンド）

package.json
{
  "name": "demo-app",
  "version": "0.0.0",
  "scripts": {
    "start": "npm run clean && npm run build && npm run serve:node",
    "forever": "npm run clean && npm run build && npm run serve:forevr", // 追加
    "list": "forever list", // 追加
    "clean": "rm -rf dist",
    "build": "npm run build:client && npm run build:server",
    "build:client": "ng build",
    "build:server": "tsc --project server --outDir dist --allowjs true",
    "serve:node": "node dist/web-server.js",
    "serve:forevr": "forever start dist/web-server.js", // 追加
    "stop": "forever stop dist/web-server.js", // 追加
    ...
  },
  ...

3．確認

起動確認

試しに実行してみる。

npm run forever

以下のようになれば、daemon 化成功。

...
> demo-app@0.0.0 serve:forevr /path/to/webapp/demo-app
> forever start dist/web-server.js

warn:    --minUptime not set. Defaulting to: 1000ms
warn:    --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info:    Forever processing file: dist/web-server.js # アプリ起動完了

my-mac:demo-app-dir user$ # コマンド完了後、返ってくる

これで、アプリ起動しても他のコマンド打てるし、ターミナル落としても起動アプリが勝手に止まったりしなくなる。

起動中のアプリを確認

npm run list

実行すると、以下のように、実行中のスクリプトやコマンド履歴、IDなどが出る。

> demo-app@0.0.0 list /path/to/webapp/demo-app
> forever list

info:    Forever processes running
data:        uid  command             script             forever pid   id logfile                        uptime
# 起動中のアプリ ▼
data:    [0] BQIE /usr/local/bin/node dist/web-server.js 13168   13169    /Users/tommy/.forever/BQIE.log 0:0:9:43.442

停止確認

以下のコマンドで daemon 化されたアプリを停止できる。

npm run stop

もう一度 npm run list で確認すると、以下のように起動中一覧からアプリが消える。

> demo-app@0.0.0 list /path/to/webapp/demo-app
> forever list

info:    No forever processes running # 起動中のアプリが存在しない

環境変数を操作し、設定を呼び分けられるようにする

1．node-config を導入する

起動時に NODE_ENV (環境変数) を指定するだけで config ファイルを自動で呼び分けてくれる便利なモジュール、node-config をインストール。と、同時に、型定義ファイルもインストール。

npm install config @types/config

2．環境変数毎の設定ファイルを作成

node-config の仕様どおりに、ルートディレクトリ直下に config というディレクトリを用意して、環境変数に対応した設定ファイルを作る。
設定ファイルの形式は json などに対応しているが、今回はコメントも記載できて書きやすい yaml (ヤムル) ファイルで書く。

今回作成する環境値
  • ローカル環境（daemon 化せずに node アプリ起動する環境）
  • 開発環境 (daemon 化してアプリ起動するが、開発用)
  • 本番環境 (daemon 化してアプリ起動し、本番で動かす用)

config ファイル作成：ローカル環境

config/default.yaml
---
  # ローカルマシン環境用 設定値

  mode: 'local'
  description: 'local モードでアプリ起動'
  port: 3000

config ファイル作成：開発環境

config/development.yaml
---
  # 開発環境用 設定値

  mode: 'development'
  description: 'development モードでアプリ起動'
  port: 3000

config ファイル作成：本番環境

config/production.yaml
---
  # 開発環境用 設定値

  mode: 'production'
  description: 'production モードでアプリ起動'
  port: 3000

3．web-server.ts を修正

node-config を使用して、web-server.ts を以下のとおり修正してみる。

  • アプリ起動時に、設定ファイルからアプリのポート番号を設定する
  • API 呼び出し時、環境変数を動的に返却するように設定してみる
server/web-server.ts
...

import * as Koa from 'koa';
import * as koaStatic from 'koa-static';
import * as KoaRouter from 'koa-router';
import * as bodyParser from 'koa-bodyparser';
import * as config from 'config'; // 追加
import { join } from 'path';

const app = new Koa();
const PORT = process.env.PORT || config.get('port'); // 修正：3000 -> config のポート値を使用
const clientSrcPath = join(process.cwd(), 'dist/client');

...

const koaRouter = new KoaRouter();
koaRouter.get('/api/*', (ctx) => {
  let response = 'API が呼ばれました'; // 追加
  response += `process.env.NODE_ENV: ${process.env.NODE_ENV}`; // 追加
  response += `設定ファイル: ${config}`; // 追加

  ctx.status = 200;
  ctx.body = response; // 修正
});

...

4．アプリ起動コマンドを修正

実行環境別にスクリプトを用意する。以下のとおりに追記・修正。

package.json
{
  "name": "demo-app",
  "version": "0.0.0",
  "scripts": {
    "local": "npm run clean && npm run build && npm run serve:local", // 修正： start -> local ローカル環境用
    "start:dev": "npm run clean && npm run build && npm run serve:dev", // 修正： forever -> start:dev 開発環境用
    "start:prod": "npm run clean && npm run build && npm run serve:prod", // 追加： 本番環境用
    "list": "forever list",
    "clean": "rm -rf dist",
    "build": "npm run build:client && npm run build:server",
    "build:client": "ng build",
    "build:server": "tsc --project server --outDir dist --allowjs true",
    "serve:local": "NODE_ENV=production node dist/web-server.js", // 修正： start -> local ローカル環境用
    "serve:dev": "NODE_ENV=production forever start --uid demo-app-dev dist/web-server.js", // 修正： start -> local 開発環境用
    "serve:prod": "NODE_ENV=production forever start --uid demo-app dist/web-server.js", // 追加： 本番環境用
    "stop:dev": "forever stop demo-app-dev", // 修正： UID を指定して 開発環境 アプリ停止
    "stop:prod": "forever stop demo-app", // 追加： UID を指定して 本番環境 アプリ停止
    ...
  },
  ...

「NODE_ENV=xxx」を指定しながらアプリ起動することで、対応する config ファイルが自動で呼び出され、同時に 環境変数 process.env.NODE_ENV に環境値が格納される。
また、 forever start にオプション --uid を指定することで、起動済みアプリ一覧表示時に何を起動したかわかるようになる。アプリ停止も UID で行える。

5．確認

ローカル環境モードで起動してみる

アプリ起動
npm run local
ブラウザから API アクセス

Web ブラウザから http://localhost:3000/api/aaa にアクセスすると以下のように出る

API確認_local.png
アプリ停止

Ctrl＋C で停止

開発環境モードで起動してみる

アプリ起動
npm run start:dev
起動アプリ一覧表示
起動中アプリ確認
> demo-app@0.0.0 list /path/to/webapp/demo-app
> forever list

info:    Forever processes running
data:        uid          command             script             forever pid   id logfile                                uptime
# 開発環境用アプリ ▼
data:    [0] demo-app-dev /usr/local/bin/node dist/web-server.js 14536   14537    /Users/tommy/.forever/demo-app-dev.log 0:0:0:46.339

UID の部分に demo-app-dev と表示される

ブラウザから API アクセス

Web ブラウザから http://localhost:3000/api/aaa にアクセスすると以下のように出る

API確認_dev.png
アプリ停止
npm run stop:dev

本番環境モードで起動してみる

アプリ起動
npm run start:prod
起動アプリ一覧表示
起動中アプリ確認
> demo-app@0.0.0 list /path/to/webapp/demo-app
> forever list

info:    Forever processes running
data:        uid          command             script             forever pid   id logfile                                uptime
# 本番環境用アプリ ▼
data:    [0] demo-app /usr/local/bin/node dist/web-server.js 14571   14572    /Users/tommy/.forever/demo-app.log 0:0:0:4.12

UID の部分に demo-app と表示される

ブラウザから API アクセス

Web ブラウザから http://localhost:3000/api/aaa にアクセスすると以下のように出る

API確認_prod.png
アプリ停止
npm run prod

結果

同じソースコードでも、起動コマンドを変えることで、環境変数や設定値を、動的に変えられることが確認できた。
これによって、例えば、外部 API のアクセス先やログの出力先などを設定ファイル別に書くことで、いちいち NODE_ENV 変数を呼び出して if 文などで処理を分岐させるようなソースコードを書かなくてすむ。

この後やること

画面のボタンから複数の API を呼べるように通信部を作り込む。

→ 「Angular6 で俺式 KOAN スタック Webアプリを構築する、ほぼ全手順（3）」に執筆

0
0
0

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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?