きっと何者にもなれないSEの記録帳

日々で得たIT技術を記録していきます。

MEAN and Cosmos DBをVisual Studio Team ServicesでAzure App Serviceにデプロイする

サンプルアプリの準備

MEAN構成のサンプルアプリとして以下を使用する
https://github.com/hi1280/angular-cosmosdb

前提条件

Azure CLI 2.0をインストールしている
https://docs.microsoft.com/ja-jp/cli/azure/install-azure-cli

Angular CLIをインストールしている

npm install -g @angular/cli

VSTSのプロジェクトが作られている
https://www.visualstudio.com/en-us/docs/setup-admin/team-services/sign-up-for-visual-studio-team-services

Cosmos DBの作成

以下のコマンドを実行する

# コマンドのオプションは環境に応じて適宜変更する  
az login
az group create -n my-heroes-db-group -l "Japan East"

# Cosmos DBをMongoDBのAPIで作成する
# Cosmos DBの名前が競合して作成できない場合、-nオプションの値を適宜変更する  
az cosmosdb create -n my-cosmos-heroes-example -g my-heroes-db-group --kind MongoDB

サンプルアプリとCosmos DBの連携

Cosmos DBの接続文字列を確認する

az cosmosdb list-connection-strings -n my-cosmos-heroes-example -g my-heroes-db-group --query "connectionStrings[0].connectionString"

example-environment.jsを接続文字列の内容に沿って修正する
このパラメータはサンプルアプリからCosmos DB(MongoDB)に接続する際の接続文字列に使われる
f:id:hi1280:20170730143854p:plain

example-environment.jsのファイル名をenvironment.jsに変更する

ローカルでアプリを起動する
# Angular CLIのビルド実行
npm run build

# Node.jsの実行
npm start

http://localhost:3000をブラウザで開く

Azure App Serviceの作成

az group create --location "Japan East" --name myResourceGroup 

# FREEプランで作成
az appservice plan create --name my-app-heroes-plan --resource-group myResourceGroup --sku FREE
az webapp create --name my-app-heroes-example --resource-group myResourceGroup --plan my-app-heroes-plan

# node.jsのバージョン指定
az webapp config appsettings set -g myResourceGroup -n my-app-heroes-example --settings WEBSITE_NODE_DEFAULT_VERSION=6.11.1

Visual Studio Team Services(VSTS)との連携とデプロイ

プロジェクトをVSTSにPushする

プロジェクトルートで以下のコマンドを実行する

# 既存のgitリポジトリを削除
rm -fR .git

# gitのローカルリポジトリに対する操作
git init
git add .
git commit -m "initial commit"

# gitのリモートリポジトリに対する操作
# xxxxxは任意
git remote add origin https://xxxxx.visualstudio.com/_git/my-app-heroes-example
git push -u origin --all
VSTS上でプロジェクトのビルド定義をする

ビルドタスクは以下の通りに定義する

Get Sources

  • This Projectを選択する
  • 該当のリポジトリとブランチを選択する

npmパッケージをインストー

  • Add Taskをクリックし、npmを追加する
  • installコマンドを選択する

Angular CLIのビルド実行

  • Add Taskをクリックし、npmを追加する
  • customコマンドを選択する
  • Command and argumentsrun buildと入力する

サーバのnpmパッケージをインストー

  • Add Taskをクリックし、npmを追加する
  • installコマンドを選択する
  • Working folder with package.jsondistと入力する

成果物を公開する

  • Add Taskをクリックし、Publish Build Artifactsを追加する
  • Path to Publishdistと入力する
  • Artifact Namedistと入力する
  • Artifact TypeServerを選択する

f:id:hi1280:20170730230357g:plain

VSTS上でプロジェクトのリリース定義をする

リリースタスクは以下の通りに定義する

Artifact

  • ビルドのArtifactの最新を選択する

Azure App Serviceにデプロイする

  • Run on agentの+マークをクリックし、Azure App Service Deployを追加する
  • Azure subscription及びApp Service nameを適宜選択する
  • Package or folder$(System.DefaultWorkingDirectory)/my-app-heroes-example-build/distと入力する
  • Generate Web.configにチェックをつける
  • Web.config parameters-Handler iisnode -NodeStartFile index.js -appType nodeと入力する
  • Publish using Web Deployにチェックをつける

f:id:hi1280:20170730230455g:plain


VSTS上からビルド及びリリースを実行した後に、Azure App ServiceのURLを開くとアプリが実行できる

Visual Studio CodeでTypeScriptを書くときのオススメ設定

TypeScriptにある便利機能をVisual Studio Code(以下、VSCode)がいい感じに可視化してくれるので、この二つの組み合わせは非常に良いです。
その中でも個人的に良いと思った機能と設定方法を紹介します。

なお、動作確認は以下のバージョンで行なっています。

Node.js: 6.11.1
TypeScript: 2.4.2
VSCode: 1.14.2
tslint: 5.5.0

誤りを教えてくれる

Compiler Optionsの--strictを有効にする

https://www.typescriptlang.org/docs/handbook/compiler-options.html

--strictを有効にすることで、Compiler Optionsの以下を全て有効にしたことと同様になります。

  • --noImplicitAny
  • --noImplicitThis
  • --alwaysStrict
  • --strictNullChecks

この中でも、--strictNullChecksはコード中のnullやundefinedを極力なくすことができるので良いです。

let strA: string = "str";
// error TS2322: Type 'null' is not assignable to type 'string'.
strA = null;

let strB: string | null = "str";

strB = null;

let objA: {x: string,y?: number} = {x: "str"};

// error TS2532: Object is possibly 'undefined'.
objA.y.toString();

if(objA.y) {
  objA.y.toString();
}

nullを代入するには、nullを許容する型にする必要あり。
オブジェクトでオプショナルなパラメータを定義した場合など、undefinedが許容される可能性がある場合に そのままパラメータにアクセスしようとすると、エラーになる。
if文で存在チェックをすると、エラーが解消される。

便利だし、安全です。

VSCode上でもいい感じに可視化してくれます。
f:id:hi1280:20170723234156p:plain

設定方法

下記コマンドでtsconfig.jsonを新規作成すると楽です。

tsc --init

strictが有効な設定でtsconfig.jsonが作られます。

tslintとvscode-tslintを使う

tslintはTypeScript用の静的解析ツールです。
vscode-tslintはtslintのVSCode拡張機能です。tslintの結果をVSCode上にいい感じに出力してくれます。
f:id:hi1280:20170723214438p:plain

設定方法

tslintのインストール方法

npm install -g tslint

vscode-tslintのインストール先
https://marketplace.visualstudio.com/items?itemName=eg2.tslint

tslintの設定

下記コマンドでtslint.jsonを新規作成すると楽です。

tslint --init

デフォルトのLintの設定が下記になるので、必要に応じて、ルールを個別に設定すれば良いと思います。
https://github.com/palantir/tslint/blob/master/src/configs/recommended.ts

tslintのルール一覧
https://palantir.github.io/tslint/rules/

正しく直してくれる

VSCodeのフォーマット機能を使う

VSCodeではTypeScriptを標準でサポートしていて、コードのフォーマット機能があります。 f:id:hi1280:20170723222825g:plain

設定方法

フォーマットの設定はVSCodeの設定から変更することができます。
f:id:hi1280:20170723224436g:plain

誤りの追跡がしやすい

Debugger for Chromeを使う

Debugger for ChromeVSCode拡張機能です。Chrome上での実行に対して、VSCodeデバッグ機能が使えるようになります。
f:id:hi1280:20170723231934g:plain

設定方法

Debugger for Chromeのインストール先
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

launch.jsonの設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome to local file",
      "file": "${workspaceRoot}/index.html"
    }
  ]
}

localにあるファイルを開く場合とurlにアクセスする場合の設定があります。


最後はTypeScript関係ないですが(汗
とりあえずVSCodeは機能が充実していて良いって話です。

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ

Angular Form Validation @reactive forms

hi1280.hatenablog.com

の続き

Reactive Formsで同様の対応をしてみた。

ほぼ流用できた。

メッセージに渡すパラメータの定義形式をわかりやすさ重視に変えた。バリデータ毎にパラメータを定義するようにした。

ng-japan 2017のコンテンツまとめ

自分のメモ用にng-japan 2017のコンテンツへのリンクをまとめます。

ngjapan.org

動画

Track A

www.youtube.com

Track B

www.youtube.com

資料

Track A

Keynote

docs.google.com

RxJS Real World

speakerdeck.com

紹介されたCQRS実践のための参考書籍

amzn.asia

Web Components の期待と実情、未来 — 2年のライブラリ開発経験から

speakerdeck.com

Testing Angular App

speakerdeck.com

Web Payments + Credential Management API

docs.google.com

Angular, Firebase, Cloud Functions for Firebase

docs.google.com

Advanced Component styling with Angular (v4+)

slides.com

Best practices for modules in Angular

slides.com

Angular Animations

Angular Animations

Angular Material

docs.google.com

Track B

Angularとionicで挑戦したモバイルアプリ開発

www.slideshare.net

You need to know SSR

speakerdeck.com

Visual Studio Code で快適開発生活 -拡張を作って公開しよう-

www.slideshare.net

あのモジュールこのコンポーネントそのブロック

speakerdeck.com

【座談会】Angular開発の生々しい話

資料未公開

ReactiveFormsModuleへの移行

docs.google.com

webrtc + Firebase + Angular でのリアクティブweb app開発

資料未公開

Angular Form Validation @template-driven forms

Angular公式のForm Validationのコードサンプルがよろしくないと思ったので、
エラーメッセージの冗長部分の排除とバリデーションの汎用化を意識して書き直してみた。

なお、template-driven formsの例を対象としている。

エラーメッセージはバリデーションの内容によって定型化すると思われるので、
定型エラーメッセージの中で個別に変えたい部分だけをパラメータで変えられるようにした。
Javaっぽい感じ。

次回はReactive formsのValidationを検討してみたい。

Angular Update作業 ~Angular4 and Angular CLI~

GWでいそいそAngularのUpdate作業をした。

Angularの環境構築で苦労した

Angular2が正式リリースされてから、ちょこちょこ触っている。
その時に作ったAngular環境は、Angular2+webpackで構成してた。

ちなみにwebpackでの構成は、Angularの公式ドキュメントにも紹介されている。
Webpack: an introduction - ts - GUIDE

ただwebpackが1系だったり、コードカバレッジのための設定を追加していたり、e2eテストを追加していたり、環境のメンテが大変。
このあたりの問題を解消するために、Angular CLIが使えるっぽい。
Angular CLI

既存のアプリをAngular CLI化してみる!


既存のアプリをAngular CLIに移行、さらにAngular4にもUpdateしちゃう

Angular CLIへの移行方法は、公式のドキュメントに書かれている。それを参考に実施した。
stories moving into the cli · angular/angular-cli Wiki · GitHub

Angular CLI内部ではwebpackが使われているようなので、webpack前提の既存アプリがすんなりと起動できた。
公式のドキュメントでも言及されているが、SystemJS前提だとコードの修正が必要になるはず。

v1.0.0のAngular CLIからデフォルトでAngular4のアプリになる。ついでにAngular4にUpdateできちゃう。

ng new awesome-app

アプリ作成段階で、ユニットテスト環境やe2eテスト環境も用意される。
今まで自力で用意したテスト環境がコマンド一発で用意される。簡単。素晴らしい。

コードカバレッジは以下のコマンドで出力可能。

ng test --watch=false --code-coverage

まとめ

Angular CLI優秀だった。
今までwebpack構成を自力でメンテしてきたけど、同じようなことがAngular CLIでコマンド一発でできてしまう。
これは乗り換えない理由はないと思った。

Agile Japan 2017 セッション感想と気付き

Agile Japan 2017に参加しました。

色々なセッションに参加しましたが、印象に残ったセッションを紹介したいと思います。


【心】見える化カイゼン・カンバンが全社に広がった

~口コミで広がった会社見学ツアーへの想い・ボクが仲間を信じれば会社は変わる~

約5年で、社員がいきいきと仕事をする文化を作ることができた。
その結果、社外の人向けの会社見学ツアーが行われるようになったという話です。

まるでジョイ・インクの日本版、サクセスストーリーです。

ジョイ・インク 役職も部署もない全員主役のマネジメント

ジョイ・インク 役職も部署もない全員主役のマネジメント

情熱を持って取り組む姿勢に胸熱でした。
こういう風にしたいを実践している事例だと感じました。

タイミングをみて、推進委員会を作ったり、外部の有識者を呼んだりして、 社内の熱を冷まさないように行動する。

こういったファシリテーションを参考にしていきたい。

Fearless Changeのパターンにも通じるところがあります。

Fearless Change アジャイルに効く アイデアを組織に広めるための48のパターン

Fearless Change アジャイルに効く アイデアを組織に広めるための48のパターン

著名人を招く、メンター、正式な推進担当者、そして、みんなを巻き込むのパターンを使っていこう。


【基調講演】 “モダンアジャイル

モダンアジャイルに関しては、以下の4章が参考になります。

「安全を必須条件にする」にも、文化的な側面と、技術的な側面がある。
文化的な側面では、Googleのチームに対する研究成果を例にして、ミーティングにおけるチーム内での効果的な行動指針が紹介された。

説明としては「非難しないこと」になるんだけど、一つの具体例としては、チームメンバーが平等に発言している状態にあることかなと理解した。

What Google Learned From Its Quest to Build the Perfect Team

技術的な側面は、テスト自動化とか、CI/CDなどのプラクティスがある。
間違ってもすぐに気付けるので安全ということ。

心理的安全性という言葉が流行っているけど、ITの世界だと、文化と技術の両方のアプローチが必要なんだということに気付かされました。