<div id="readability-page-1" class="page"><div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          less than 1 minute read
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        <h2 id="환경">환경</h2>
<ul>
  <li>vite v3.6.0</li>
  <li>bun v1.0.26</li>
</ul>

<h2 id="현상">현상</h2>
<p>bun을 runtime으로 하여 vite build 명령을 실행하면 환경변수 문제가 발생한다. 보통 <code>.env</code>를 사용하여 환경별로 여러 개의 <code>.env</code> 파일을 만든다.</p>

<p>예를 들면 이렇다.</p>

<div><pre><code>.env.local
.env.development
.env.production
</code></pre></div>

<p>하지만 bun을 runtime으로 vite build를 돌릴 경우, 항상 <code>.env.development</code> 의 환경변수로만 설정되는 오류가 발생한다.</p>

<h2 id="원인">원인</h2>
<p>bun과 vite는 각각 .env 파일을 읽어서 환경변수를 설정하는 기능을 제공한다. 하지만 bun cli로 vite를 실행할 경우, 위 기능이 충돌한다</p>

<h2 id="해결책">해결책</h2>
<p>실은 해결책이 아니라 우회책이다.</p>

<p>위 기능이 충돌할 경우, vite의 mode 설정 파라미터는 정상 동작하지만, 항상 .env.development의 환경변수를 읽어오거나, 루트 경로에 유일하게 존재하는 .env 파일의 환경변수를 읽는다.</p>

<p>bun과 vite의 환경변수 설정 기능 충돌을 방지하기 위해, 루트 경로에는 빌드시 단 1개의 .env 파일만 존재하도록 한다</p>

<div><pre><code><span>//</span><span> </span><span>package.json</span><span>
</span><span>{</span><span>
    </span><span>//</span><span> </span><span>...</span><span>
    </span><span>scripts:</span><span> </span><span>{</span><span>
        </span><span>"build:stage"</span><span>:</span><span> </span><span>"cp ./.env/.env.development . &amp;&amp; tsc &amp;&amp; bunx --bun vite build --mode development"</span><span>,</span><span>
        </span><span>"build:production"</span><span>:</span><span> </span><span>"cp ./.env/.env.production . &amp;&amp; tsc &amp;&amp; bunx --bun vite build --mode production"</span><span>,</span><span>
    </span><span>}</span><span>
    </span><span>//</span><span> </span><span>...</span><span>
</span><span>}</span><span>
</span></code></pre></div>

<p>빌드 스크립트가 다소 지저분해지지만 의도대로 동작한다.</p>

<h2 id="그-외">그 외</h2>
<ul>
  <li>package.json의 각 script에 환경변수를 일일히 설정해줘도 문제는 해결된다. 다만 스크립트가 더욱 지저분해질 뿐이다.</li>
  <li>bun은 그냥 아무 응답이 없다(<a href="https://github.com/oven-sh/bun/issues/6338_">issue link</a>)</li>
  <li>vite에서는 bun의 문제라며 <a href="https://github.com/vitejs/vite/issues/14912">외면 중</a>이다</li>
  <li>bun의 이 문제에 대한 해결책을 제시하는 사람이 아무도 없어서… 그냥 내가 <a href="https://github.com/oven-sh/bun/issues/6338#issuecomment-1980085235">우회책을 달아놓았다.</a></li>
</ul>

<p>20240306</p>

        
      </section>

      

      


      
  

    </div></div>

Never test

환경
vite v3.6.0
bun v1.0.26
현상
bun을 runtime으로 하여 vite build 명령을 실행하면 환경변수 문제가 발생한다. 보통 .env를 사용하여 환경별로 여러 개의 .env 파일을 만든다.
예를 들면 이렇다.
.env.local
.env.development
.env.production
하지만 bun을 runtime으로 vite build를 돌릴 경우, 항상 .env.development 의 환경변수로만 설정되는 오류가 발생한다.
원인
bun과 vite는 각각 .env 파일을 읽어서 환경변수를 설정하는 기능을 제공한다. 하지만 bun cli로 vite를 실행할 경우, 위 기능이 충돌한다
해결책
실은 해결책이 아니라 우회책이다.
위 기능이 충돌할 경우, vite의 mode 설정 파라미터는 정상 동작하지만, 항상 .env.development의 환경변수를 읽어오거나, 루트 경로에 유일하게 존재하는 .env 파일의 환경변수를 읽는다.
bun과 vite의 환경변수 설정 기능 충돌을 방지하기 위해, 루트 경로에는 빌드시 단 1개의 .env 파일만 존재하도록 한다
// package.json
{
    // ...
    scripts: {
        "build:stage": "cp ./.env/.env.development . && tsc && bunx --bun vite build --mode development",
        "build:production": "cp ./.env/.env.production . && tsc && bunx --bun vite build --mode production",
    }
    // ...
}
빌드 스크립트가 다소 지저분해지지만 의도대로 동작한다.
그 외
package.json의 각 script에 환경변수를 일일히 설정해줘도 문제는 해결된다. 다만 스크립트가 더욱 지저분해질 뿐이다.
bun은 그냥 아무 응답이 없다(issue link)
vite에서는 bun의 문제라며 외면 중이다
bun의 이 문제에 대한 해결책을 제시하는 사람이 아무도 없어서… 그냥 내가 우회책을 달아놓았다.
20240306

bun + vite build 에서 환경변수 설정이 되지 않는 오류 해결

댓글