AngularドキュメントサイトのソースをGitHubからクローンしてDockerで動かしてみる。2017

[Angularドキュメントサイト](https://angular.io)のソースコードは現在、GitHubの[angular/angularリポジトリ](https://github.com/angular/angular)で管理されているようです。

これらのファイルをクローンし、Dockerを使って[http://localhost:4200](http://localhost:4200)で表示させる実験をしてみました。

# 検証環境

* macOS Sierra 10.12.4
* Docker Community Edition Version 17.03.1-ce-mac5 (16048)

# ファイルの設置

最初に作業用のディレクトリを作成し、その中で[angular/angularリポジトリ](https://github.com/angular/angular)をクローンします。

```
mkdir docker-aio
cd docker-aio
git clone https://github.com/angular/angular.git
```

次に、同一階層に下記の5ファイルを配置します。

```Dockerfile:Dockerfile
FROM amazonlinux:latest

RUN yum update -y && yum install -y git wget

RUN wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo 
RUN curl --silent --location https://rpm.nodesource.com/setup_6.x | bash - 
RUN yum install -y  yarn

WORKDIR /usr/src/app
```

```yaml:docker-compose.yml
version: "2"
services:
  serve:
    build: .
    volumes:
      - .:/usr/src/app
    ports:
      - "4200:4200"
    working_dir: /usr/src/app
    command: bash serve.sh
```

```bash:setup.sh
cd /usr/src/app/angular
yarn install

cd /usr/src/app/angular/aio
yarn
```

```bash:serve.sh
cd /usr/src/app/angular/aio

yarn docs
yarn start -- --host 0.0.0.0
```

```bash:watch.sh
cd /usr/src/app/angular/aio
yarn docs-watch
```

ここまでの作業で`docker-aio`ディレクトリ直下は下記のような状態となります。

```
angular
Dockerfile
docker-compose.yml
setup.sh
serve.sh
watch.sh
```
# 使用方法

## 最初にセットアップを行う
`docker-aio`ディレクトリでターミナルを開き、下記コマンドを実行します。

```
docker-compose run serve bash setup.sh
```

## サービスを起動する

`docker-aio`ディレクトリでターミナルを開き、下記コマンドを実行します。

```
docker-compose up
```

処理が終わって下記のようなテキストがターミナルに出力されたら、ブラウザで[http://localhost:4200](http://localhost:4200)にアクセスできます。

```
serve_1  | webpack: Compiled successfully.
```

現在公開中のサイトと、今回GitHubからクローンしたサイトではデザインが変わっていました。


|https://angular.io (公開中)|http://localhost:4200|
|:-:|:-:|
|![angular.io-docs-ts-latest-tutorial-.png](https://qiita-image-store.s3.amazonaws.com/0/177734/c481133a-3f69-67d8-1dc0-d63e967f5eeb.png)|![localhost-4200-tutorial.png](https://qiita-image-store.s3.amazonaws.com/0/177734/722d9e1a-83e9-4bc1-0750-a4039e194171.png)|


## ファイル変更時にドキュメントを自動で再生成する

サービスを起動したターミナルウィンドウとは別に、新しくターミナルウィンドウを開き、`docker-aio`ディレクトリで下記のコマンドを実行すると、ファイル変更に反応してドキュメントを再生成させるよう監視できます。

```
docker-compose run serve bash watch.sh
```

各コンテンツは`angular/aio/content`配下の`*.md`ファイルにマークダウン形式で記述されています。

https://github.com/angular/angular/tree/master/aio/content

これらのファイルが変更されたら、自動でドキュメントが再生成されます。

ただし、[README.md](https://github.com/angular/angular/blob/master/aio/README.md)に記述のある通り、リンクやコードサンプルなど、再生成時に一部正しく表示されないこがあるようです。

> but it won't produce full fidelity content. For example, links to other docs and code examples may not render correctly.
> しかし、完全に正確なコンテンツは生成されません。 たとえば、他のドキュメントやコード例へのリンクが正しく表示されないことがあります。

# サービスを停止する
既存のターミナルウィンドウとは別にのターミナルウィンドウを新しく開き、`docker-aio`ディレクトリで下記のコマンドを実行すると、サービスを終了できます。

```
docker-compose stop
```

# メッセージについて


以下のようなメッセージが表示されますが、これは、バージョンを指定せずにNode.jsやnpmやyarnをインストールしているため、推奨バージョンよりも新しいバージョンがインストールされるために出力されています。

問題が出る場合は、Dockerfileを書き換えてバージョンを指定してください。

```
serve_1  | !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
serve_1  | !!!  Your environment is not in a good shape. Following issues were found:
serve_1  | !!!   - You are running unsupported yarn version. Found: 0.23.4 Expected: >=0.21.3 <0.22.0. This is required if you want to work on certain areas, such as `aio/` and `integration/`. See: https://yarnpkg.com/lang/en/docs/install/
serve_1  | !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

```