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

はじめに

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

環境

• MacOSバージョン: 12.6.2
• Docker version 20.10.17
• VS Code
• Docker Desktop for Windows/Mac
• Remote - Containers extension

devontainerを起動する

最初のフォルダ構成

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

docker-compose.yml

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

Compose ファイルのバージョンとアップグレード - Docker-docs-ja 20.10 ドキュメント

Dockerfile

# DockerImage
FROM node:16.14.0-stretch

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

# Dockerfile Owner
LABEL  maintainer "matcha <[e-mail]>"

# コンソールの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を起動します。

Angularアプリを作成する

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

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

npm install -g @storybook/angular

storybookを初期化する

storybook初期化コマンド

npx storybook init

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のサンプルが追加されます。

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

下記コマンドでStorybookを起動

npm run storybook

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

╭─────────────────────────────────────────────────╮
│                                                 │
│   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/     │
│                                                 │
╰─────────────────────────────────────────────────╯

まとめ

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