이 기사에 대하여

주식회사 Re:Build 어드벤트 캘린더 Advent Calendar 2020 의 8일째의 기사입니다.

개인적으로 앞으로 해 나가고 싶은 내용이므로, 기재하고 있는 내용은 프로젝트에서 이용하고 있는 것은 아니지만, 좀더 이러한 편이 좋다 등 어드바이스 코멘트 받을 수 있으면 다행입니다.

하고 싶은 일

디자이너가 구성 요소별로 확인하고 싶기 때문에 Storybook을 사용하고 싶습니다

개발 중에는 프로젝트 멤버 만 볼 수있는 형태로 만들고 싶습니다

첫 번째는 Storybook을 사용하기 때문에 문제없이 할 수 있습니다.
두 번째는 Github Pages를 처음 검토하고 있었지만 프로젝트 멤버만의 열람 권한을 넣는 곳이 해결되지 않아 곤란했다. Gitlab Pages는 액세스 제어 가능 라고 알았으므로 시험해 본다.

Storybook 환경 구축

아래의 명령으로 바로 구축 완료입니다.

$ npx create-react-app sample-storybook
$ cd sample-storybook
$ npx sb init
$ yarn run storybook

GitLab Pages에 배달 설정

.gitlab-ci.yml

image: node:12-alpine

pages:
  stage: deploy
  script:
    - yarn install
    - yarn build-storybook
    - rm -rf public && mkdir -p public
    - mv storybook-static/* public
  artifacts:
    paths:
      - public
  only:
    - master

액세스 제어가 가능한지 액세스 해보십시오

시크릿 창을 시작하고 액세스해 보면 GitLab의 Sign In 페이지로 건너 뛰는 것을 확인할 수있었습니다. 설정에서 액세스할 수 있는 사람 모두 or 프로젝트 멤버만을 선택할 수 있었기 때문에 둘 다 기능했습니다 (반영에는 조금 시간이 걸렸다).

하고 싶은 일을 달성할 수 있었습니다. 그러나 게재된 사이트는 그리는 데 시간이 걸렸습니다.
확인하면 2.5MB 와 큰 사이즈의 js 가 존재하고 있습니다.
조사해 본 느낌이라면 아래 PR이 병합되면 작아질 가능성은 있을 것 같았습니다.
htps : // 기주 b. m / s와 ryboo kjs / s와 ryboo k / pul / 12406

gzip 대응하기

스스로 할 수 있는 대응은 해 두는 편이 좋다고 생각하므로 압축해 갑니다.

PageSpeed ​​Insights 참조 압축 사용 를 참고하면 최신 브라우저는 모두 대응하고 있으므로 갑니다.

모든 최신 브라우저는 gzip 압축을 지원하며 모든 HTTP 요청에서 자동으로 압축 협상을 수행합니다. gzip 압축을 사용하면 전송되는 응답의 크기가 최대 90%까지 줄어들어 리소스 다운로드 시간이 크게 줄어들고 클라이언트 데이터 사용이 줄어들고 첫 페이지 렌더링 시간이 향상됩니다. 있습니다.

GitLab Pages에서 Pages에 배포 할 때 gzip을 사용하면 지원되는 issue를 찾았으므로 시도합니다.
htps : // 기트 b. 코 m/기 tぁb-오 rg/기 tぁb 퍼게 s/-/이스에 s/12

.gitlab-ci.yml

image: node:12-alpine

pages:
  stage: deploy
  script:
    - yarn install
    - yarn build-storybook
    - rm -rf public && mkdir -p public
    - mv storybook-static/* public
+   - find public -type f \( -name \*.html -or -name \*.css -or -name \*.js \) | xargs -I {} sh -c "gzip -k {}"
  artifacts:
    paths:
      - public
  only:
    - master

2.5MB와 큰 사이즈의 js가 5.9kB로 압축되어 있는 것을 알 수 있다.
(svg도 텍스트이므로 압축하는 것이 좋았을지도 모른다)

사이고에게

하고 싶은 일로 올린 아래의 2점을 어떻게 실현할 수 있을까 시험해 보았습니다.

디자이너가 구성 요소별로 확인하고 싶기 때문에 Storybook을 사용하고 싶습니다

개발 중에는 프로젝트 멤버 만 볼 수있는 형태로 만들고 싶습니다

이번 확인에 이용한 코드는 아래에서 공개하고 있습니다.
htps : // 기트 b. 코 m / 토가 나 / 사 mp ぇ s와 ry 보오 k

GitLab Pages는 다음과 같습니다.
h tps : //와가나. 기 t b. 이오 / 사 mp ぇ s와 ry 보오 k

다음은 Storybook을 형체화시키지 않기 위해 스냅샷 테스트를 포함하는 등을 시도해 갈까 생각합니다.

참고

htps : // / cs. 기 t b. 코 m / 네 / 우세 r / p 로지 ct / 펑크 s / 헹굼 s_ 아세트 s_ 헛 tl. HTML
htps : // 그럼. Rea ctjs. 오 rg / 두 cs / c 레테 - 아-네 w- 리 아 c- p p. HTML
htps : //s와 ry 보오 k. js. 오 rg / cs / rea ct / 게 ts r d / in s ta l
htps : // 기트 b. 코 m / 기 t ぁ b 오 rg / 기 t ぁ b 파게 s / - / 이스에 s / 12