Windows で Angular の開発環境を構築して IIS にデプロイするところまで

はじめに

Windows 10 で Angular の開発環境を構築します。Angular CLI を使ってアプリケーションを作成し、ビルドした生成物を Windows 10 の IIS Express にデプロイするところまでやってみます。作業は PowerShell から実施します。

事前準備

まずは必要なツールをインストールしていきます。

node.js インストール

node.js をダウンロードしてインストールします。記事執筆時点の推奨版である v6.10.1 をダウンロードしています。最新は nodejs.org から確認してください。

> Invoke-WebRequest -Uri https://nodejs.org/dist/v6.10.1/node-v6.10.1-x64.msi -OutFile ~\Downloads\node-v6.10.1-x64.msi
> cd ~\Downloads\
> .\node-v6.10.1-x64.msi /passive

node および npm コマンドを使ってバージョン確認します。環境変数 Path の再読み込みのため、PowerShell を再起動してから実行します。

> node --version
v6.10.1
> npm --version
3.10.10

Git for Windows インストール

Git for Windows をダウンロードしてインストールします。記事執筆時点の最新版である v2.12.2 をダウンロードしています。最新は git-for-windows.github.io から確認してください。

> Invoke-WebRequest -Uri https://github.com/git-for-windows/git/releases/download/v2.12.2.windows.1/Git-2.12.2-64-bit.exe -OutFile ~\Donwloads\Git-2.12.2-64-bit.exe
> cd ~\Downloads\
> .\Git-2.12.2-64-bit.exe /SILENT

git コマンドを使ってバージョン確認します。環境変数 Path の再読み込みのため、PowerShell を再起動してから実行します。

> git --version
git version 2.12.2.windows.1

既定では改行コードが自動変換されますが、挙動がいまいちなので無効にしておきます。

> git config --global core.autocrlf false
> git config --global core.autocrlf
false

Angular CLI インストール

Angular CLI は npm を使ってインストールします。公式サイトそのままです。

> npm install -g @angular/cli

バージョン確認

> ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 6.10.1
os: win32 x64

IIS Express 有効化

IIS Express を有効化します。PowerShell を管理者として実行する必要があります。

> Enable-WindowsOptionalFeature -Online -FeatureName IIS-WebServerRole
Path          :
Online        : True
RestartNeeded : False

事前準備はここまで。

アプリケーションの作成

Angular CLI を使ってアプリケーションを作成します。アプリケーション用のフォルダーとして C:\AngularApps を作成します。アプリケーション名は apptest とします。

> mkdir C:\AngularApps
> cd C:\AngularApps
> ng new apptest

テスト実行してみます。

> cd apptest
> ng serve

初回はファイアウォールの警告が出るのでアクセス許可します。

ブラウザから http://localhost:4200 にアクセス。「app works!」と表示されれば OK です。確認できたら Ctrl+C で停止します。

アプリケーションのビルド

ng build でビルド成果物を生成します。-prod をつけて（デバッグ用ではなく）本番環境用成果物を生成します。

> ng build -prod

成果物は dist フォルダー配下に生成されます。IIS Express で動作確認するため dist フォルダーの中身をデプロイします。（管理者として実行）

> Remove-Item -Path  C:\inetpub\wwwroot\* #既存のファイルを削除
> Copy-Item -Path C:\AngularApps\apptest\dist\* -Destination C:\inetpub\wwwroot\

ブラウザから http://localhost にアクセス。「app works!」と表示されれば OK です。

蛇足

node.js, Git for Windows のインストールには chocolatey を使うべきな気もしますが、MS公式じゃないのがどうしても気になっちゃう。OneGet 用の公式リポジトリは出ないのかなー。