搭建Angular + Storybook + Docker Compose 开发环境

1 年 ago

清, 宇

2 minutes

首先

为了尝试 Storybook，我想要构建一个 Angular 开发环境…我记得以前是怎么做的来着…？我停下手来，所以我将它留作备忘录。

环境

Remote – Containers extension

启动devontainer

最初的文件夹结构

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

docker-compose.yml 的本地化简称为中文。

版本：指定Compose文件的版本。参数请参阅下文。

撰写文件版本和升级 – Docker-docs-ja 20.10 文档

Dockerfile的释义是：一个用于定义和构建Docker容器的文本文件。

# 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集成的配置文件。

version: '3'

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

创建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

故事书/代码/框架Angular的下一个版本·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和插件。