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

7705 ワード
Angular2 docker-compose angular.io Angular Angular テキストリンク

Angularドキュメントサイトのソースコードは現在、GitHubのangular/angularリポジトリで管理されているようです。

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

検証環境

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

ファイルの設置

最初に作業用のディレクトリを作成し、その中でangular/angularリポジトリをクローンします。

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

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

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
docker-compose.yml
version: "2"
services:
  serve:
    build: .
    volumes:
      - .:/usr/src/app
    ports:
      - "4200:4200"
    working_dir: /usr/src/app
    command: bash serve.sh
setup.sh
cd /usr/src/app/angular
yarn install

cd /usr/src/app/angular/aio
yarn
serve.sh
cd /usr/src/app/angular/aio

yarn docs
yarn start -- --host 0.0.0.0
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にアクセスできます。

serve_1  | webpack: Compiled successfully.

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

https://angular.io (公開中) http://localhost:4200

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

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

docker-compose run serve bash watch.sh

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

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

ただし、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  | !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!