Angular + Storybook + Docker Compose開発環境を構築する

# はじめに
Storybookを試すために、Angular開発環境構築したい…昔どうやってたんだっけ…？と手が止まったので、備忘録として残します。

## 環境
- MacOSバージョン: 12.6.2
- Docker version 20.10.17
- [VS Code](https://code.visualstudio.com/)
- [Docker Desktop for Windows/Mac](https://www.docker.com/products/docker-desktop/)
- [Remote - Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)

## devontainerを起動する

最初のフォルダ構成

```bash
.
└── docker-container
    ├── Dockerfile
    └── docker-compose.yml
```

### docker-compose.yml

version:Composeファイルのバージョンを指定します。パラメータは下記を参照。

[Compose ファイルのバージョンとアップグレード - Docker-docs-ja 20.10 ドキュメント](https://docs.docker.jp/compose/compose-file/compose-versioning.html)

### Dockerfile

```Dockerfile
# DockerImage
FROM node:16.14.0-stretch

# 操作するディレクトリの絶対パスを指定
WORKDIR /projects

# Dockerfile Owner
LABEL  maintainer "matcha <sample@gmail.com>"

# コンソールのstdout（標準出力）とstderr（標準エラー出力）のバッファーを強制的に解除します。
# 参考：https://docs.python.org/3.5/using/cmdline.html#envvar-PYTHONUNBUFFERED
ENV PYTHONUNBUFFERED 1

# パッケージのインストール
RUN npm install -g @angular/cli

# 使用するパッケージマネージャーツールの優先順位を指定
RUN ng config -g cli.packageManager npm
```

### docker-compose.yml

```docker-compose.yml
version: '3'

services: 
    node:
        build: .
        container_name: "MyStorybook"
        ports:
            - "6900:6900"
        environment:
          TZ: "Asia/Tokyo"
        volumes: 
            - "..:/projects"
        tty: true
```

`docker-compose.yml`右クリック > コンテキストメニューのCompose Upでdevcontainerを起動します。
![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985483/eb28e9ca-5525-d721-7996-5ace39bc2cc4.jpeg)

## Angularアプリを作成する

`ng new {アプリ名}`でアプリを作成します。スタイルなどはお好みで。

```bash
ng new my-storybook
? Would you like to add Angular routing? (y/N) y

? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ]

```

## storybookをインストールする
[storybook/code/frameworks/angular at next · storybookjs/storybook · GitHub](https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular)

```bash
npm install -g @storybook/angular
```

## storybookを初期化する
storybook初期化コマンド
```bash
npx storybook init
```

```bash
storybook init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓
 • Adding Storybook support to your "Angular" app

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry
```

成功するとstoriesのサンプルが追加されます。

```bash
.
└── my-storybook
    ├── .storybook // 追加
    ├── （...省略）
    └── src
        └── stories // 追加
```

下記コマンドでStorybookを起動

```markdown
npm run storybook
```

起動成功時のURLをブラウザで開きます。

```bash
╭─────────────────────────────────────────────────╮
│                                                 │
│   Storybook 7.0.10 for angular started          │
│   1.79 s for manager and 2.07 min for preview   │
│                                                 │
│    Local:            http://localhost:6006/     │
│    On your network:  http://localhost:6006/     │
│                                                 │
╰─────────────────────────────────────────────────╯

```


![image.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985483/90eaceb7-7f6d-3a70-e288-4d07933a2018.jpeg)

## まとめ
これでStorybookを動かせる環境ができました。
今度は少しずつStorybookとaddonのお勉強をしていきます。