WindowsでAngularの開発をしてLinuxのnginxで動かすまでの手順

2018/07/16

googlebotがangularの動的なページを検出しているかを検証する必要があったため、一般公開しているlinuxサーバにangularのサンプル資材を配置しました。自分でangular開発をするのが初めてであったため、いろいろ調べながら学んだ開発環境の構築やlinuxに配置するまでの手順を参考までに記載します。

開発はWindows端末、配置先はLinuxサーバであったため以下の図のような構成としています。

Windowsにangular-cliをインストールして開発環境を整える

angularの開発をするためには、雛形プロジェクトを作ったり、ビルドをしたりテスト用のサーバを起動したりするためのangular-cliをいうコマンドベースのツールが必要となります。

angular-cliをWindowsにインストールして、開発してビルドした資材をLinuxのnginxサーバに配置するということをやりたかったため、その流れを記載します。

1. windowsのpowershellを管理者モードで起動

windows7,8,10などに標準搭載されているpowershellを起動します。コマンドプロンプトのリッチ版のようなものになります。

以降はpowershellを使ってコマンドを実行していきます。

2. 実行ポリシーを変更する

最初に今後のソフトインストールをスムーズにするために、Windowsの実行ポリシーを変更しておきます。

> Get-ExecutionPolicy
Restricted
> Set-ExecutionPolicy Bypass
Y

3. chocolateyをインストールする

chocolateyはwindows用のパッケージマネージャーでLinuxで言うとapt-getのようなものになります。angularの開発環境を整えるためのnodeやnpmをインストールする際に便利なため、これを以下のコマンドでインストールします。

> iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

4. nodistをインストールする

nodistはnode.jsのバージョン管理ツールで、node.jsやnpmのバージョン指定とインストールを簡単に行うことができます。これをchocolateyを使ってインストールします。（cinstはchocolateyのコマンド）

> cinst nodist -y

5. node.jsとnpmをインストールする

nodistを使ってnode.jsとnpmをインストールします。執筆段階だとangular-cliを動かすためにnodeは8.9.0以上であることが推奨でした。

以下のコマンドでインスールできるnodeのバージョンを確認できます。

> nodist dist

以下のコマンドでnode.jsとnpmをバージョンを指定してインストールします。

> nodist 10.6.0
> nodist npm 5.0.3

6. angular-cli用のパッケージをインストールする

angular-cliを動かすためにPython2系とMSBuildが必要となります。以下のコマンドでまとめてインストールすることができます。処理が終わるまで結構待った気がします。

> npm install --global windows-build-tools

7. angular-cliをインストールする

以下のコマンドでangular-cliをインストールします。

> npm --global cache clean
> npm install --global @angular/cli

以下のコマンドが正常に実行されればインストール成功です。

> ng -v

以上でangular-cliのインストールは完了です。次はAngularのプロジェクトを作ってビルドしてLinuxサーバに配置するまでの流れを記載します。

Angular資材を作ってビルドするまでの流れ

1. Angularプロジェクトを作成する

ng newコマンドでプロジェクトのひな形を作ることができます。ここではtest-appという名前のプロジェクト名にしています。

> ng new test-app

2. 開発用のサーバを起動する

ng serveコマンドで開発用のWebサーバを起動することができます。

> cd test-app
> ng serve --open

デフォルトは4200番ポートで、ブラウザからlocalhost:4200で開発している画面を表示できるようになります。（–openオプションで自動的にブラウザを開いてくれます）

ファイルが変更されると自動的にビルドされて画面が更新されます。

3. ビルドする

以下のコマンドでビルドするとプロジェクトフォルダの直下にdistフォルダが作成され、そこにビルド後のjsやhtmlファイルが出力されます。このビルド後のファイルをLinuxサーバに持っていきます。

> ng build

4. Linuxサーバに配置する

ビルドで出力されたファイルをLinuxのHTTPサーバ（nginxなど）のドキュメントルート（/var/www/html）などに配置すればブラウザから閲覧することができます。

普通のHTMLファイルを置いてみるような感覚で配置できますが、１点注意があるとすればビルド前資材のindex.htmlに「」というタグがあり、これを実際にブラウザからアクセスする際のURLと同じにする必要があります。

最低限の流れは以上になりますが、あとはエディタとangular-cliコマンドでいろいろ開発を行い、ビルドしてLinuxに配置といったことを繰り返していくことになるかと思います。

ぬまろぐ