storybook 자동 빌드 후 vercel로 배포하기

Storybook vercel deploy

<nav class="toc"><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h1"><a class="toc-link toc-link-h1" href="#storybook-빌드-및-vercel로-배포하기">storybook 빌드 및 vercel로 배포하기</a><ol class="toc-level toc-level-2"><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2" href="#static-파일-만들기">static 파일 만들기</a></li><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2" href="#output-directory-설정-추가">OUTPUT DIRECTORY 설정 추가</a></li></ol></li></ol></nav>
<h1 id="storybook-빌드-및-vercel로-배포하기"><a aria-hidden="true" tabindex="-1" href="#storybook-빌드-및-vercel로-배포하기"><span class="icon icon-link"></span></a>storybook 빌드 및 vercel로 배포하기</h1>
<p>
  <img src="/images/post/storybook-static-delploy.png" alt="Build &#x26; Development Settings">
</p>
<h2 id="static-파일-만들기"><a aria-hidden="true" tabindex="-1" href="#static-파일-만들기"><span class="icon icon-link"></span></a>static 파일 만들기</h2>
<p>storybook 빌드로 static 파일을 만든다.</p>
<pre><code class="hljs language-javascript">yarn build-storybook
</code></pre>
<h2 id="output-directory-설정-추가"><a aria-hidden="true" tabindex="-1" href="#output-directory-설정-추가"><span class="icon icon-link"></span></a>OUTPUT DIRECTORY 설정 추가</h2>
<p>기본 주소인 <code>./storybook-static</code> 파일 경로를 vercel의 <code>OUTPUT DIRECTORY</code> 설정에 추가한다.</p>


Storybook vercel deploy

storybook 빌드 및 vercel로 배포하기

static 파일 만들기

OUTPUT DIRECTORY 설정 추가

JSC

새로운 기술 익히는게 재밌는 사람 😊