ν”Όλ“œλ‘œ λŒμ•„κ°€κΈ°
I built a visual .env manager for VS Code πŸ”
Dev.toDev.to
DevOps

VS Code λ‚΄ .env 관리 μžλ™ν™” 및 Secret Masking κ΅¬ν˜„μ„ ν†΅ν•œ μ„€μ • 였λ₯˜ λ°©μ§€

I built a visual .env manager for VS Code πŸ”

Gaurav Prajapati2026λ…„ 6μ›” 20일1λΆ„beginner

Context

raw file 기반의 .env 관리 λ°©μ‹μ—μ„œ λ°œμƒν•˜λŠ” API Key μ˜€μ»€λ°‹ μœ„ν—˜κ³Ό ν™˜κ²½ μ „ν™˜μ˜ λ²ˆκ±°λ‘œμ›€ 뢄석. μˆ˜λ™ νŽΈμ§‘μœΌλ‘œ μΈν•œ 휴먼 μ—λŸ¬ κ°€λŠ₯μ„±κ³Ό κ°€μ‹œμ„± 뢀쑱을 핡심 문제둜 μ •μ˜.

Technical Solution

  • Multi-profile support κ΅¬ν˜„μ„ ν†΅ν•œ .env.local, .env.production λ“± ν™˜κ²½ κ°„ μ‹ μ†ν•œ μ»¨ν…μŠ€νŠΈ μ „ν™˜ ꡬ쑰 섀계
  • Secret Masking 둜직 λ„μž…μœΌλ‘œ 민감 μ •λ³΄μ˜ κΈ°λ³Έ λΉ„λ…ΈμΆœ 처리 및 ν•„μš” μ‹œμ—λ§Œ reveal ν•˜λŠ” λ³΄μ•ˆ λ·°μ–΄ κ΅¬ν˜„
  • Inline Editing μΈν„°νŽ˜μ΄μŠ€ ꡬ좕을 톡해 raw file 직접 μˆ˜μ • 없이 λ©”λͺ¨λ¦¬ μƒμ˜ λ³€μˆ˜ λ³€κ²½ ν›„ 파일둜 Write-back ν•˜λŠ” 동기화 λ©”μ»€λ‹ˆμ¦˜ 적용
  • .env.example μžλ™ 생성 κΈ°λŠ₯을 ν†΅ν•œ Value μ œμ™Έ Key-only ν…œν”Œλ¦Ώ μΆ”μΆœ 둜직 κ΅¬ν˜„
  • VS Code Extension APIλ₯Ό ν™œμš©ν•œ μ‚¬μ΄λ“œλ°” νŒ¨λ„ 기반의 GUI 관리 λ ˆμ΄μ–΄ ꡬ좕

- 민감 정보 유좜 λ°©μ§€λ₯Ό μœ„ν•œ Masking UI 적용 κ²€ν†  - ν™˜κ²½λ³„ μ„€μ • 파일의 일관성 μœ μ§€λ₯Ό μœ„ν•œ ν…œν”Œλ¦Ώ 생성 μžλ™ν™” λ„μž… - 개발자 κ²½ν—˜(DX) ν–₯상을 μœ„ν•œ μ„€μ • 파일의 μ‹œκ°μ  관리 도ꡬ ν™œμš©

원문 읽기