개요
테트리스, 내기 모음, 축덕 퀴즈 세 프로젝트에 환경변수 관리를 적용하고 Netlify 배포 세팅을 하면서 겪은 삽질을 정리했다.
1. GA ID, AdSense ID를 .env로 분리한 이유
GA ID와 AdSense ID는 사실 빌드 후 HTML에 그대로 들어가서 누구나 볼 수 있는 값이다. 진짜 비밀 키가 아니다.
그럼에도 .env로 관리하는 이유는 두 가지다.
첫째, 코드에서 값을 분리해서 환경별로 다르게 쓸 수 있다. 둘째, .gitignore에 추가하면 실수로 민감한 키를 커밋하는 나쁜 습관을 처음부터 막을 수 있다.
2. Vite에서 index.html에 환경변수 주입하기
Vite는 index.html에서 %VITE_변수명% 문법으로 빌드 시 자동으로 값을 치환해준다.
<!-- index.html -->
<script async src="https://www.googletagmanager.com/gtag/js?id=%VITE_GA_ID%"></script>
<script>
gtag('config', '%VITE_GA_ID%');
</script>
<meta name="google-adsense-account" content="ca-pub-%VITE_ADSENSE_ID%">.env 파일은 이렇게 만든다.
VITE_GA_ID=G-XXXXXXXXXX
VITE_ADSENSE_ID=XXXXXXXXXXXXXXXXX⚠️ 흔한 실수: %VITE_ADSENSE_ID" 처럼 닫는 %를 빠트리면 값이 치환되지 않는다.
3. ads.txt를 환경변수로 관리하기
ads.txt는 공개 파일이라 보안상 숨길 필요는 없다. 하지만 publisher ID를 git에 하드코딩하지 않고 환경변수로 분리하고 싶었다.
문제: Vite의 public/ 폴더는 JS 파이프라인을 거치지 않고 그대로 복사되기 때문에 VITE_ 환경변수를 직접 주입할 수 없다.
해결: 빌드 전 Node.js 스크립트로 파일을 생성하는 방식을 택했다.
// scripts/generate-ads-txt.js
import { writeFileSync } from 'fs'
import { config } from 'dotenv'
config()
const adsenseId = process.env.VITE_ADSENSE_ID
if (!adsenseId) {
console.warn('VITE_ADSENSE_ID not set, skipping')
process.exit(0)
}
writeFileSync('./public/ads.txt',
`google.com, pub-${adsenseId}, DIRECT, f08c47fec0942fa0\n`
)package.json에 prebuild 훅으로 연결한다.
{
"scripts": {
"prebuild": "node scripts/generate-ads-txt.js",
"build": "vite build"
}
}로컬은 .env 파일, Netlify는 대시보드 환경변수에서 VITE_ADSENSE_ID를 읽는다.
4. git rm --cached
.gitignore에 추가해도 이미 추적 중인 파일은 자동으로 untrack되지 않는다. 이미 git에 올라간 public/ads.txt를 제거하려면 아래 명령어를 써야 한다.
git rm --cached public/ads.txt인덱스에서만 제거하고 로컬 파일은 유지된다. 이후 커밋하면 git에서 완전히 제거된다.
5. Vercel 환경변수 등록
.env는 .gitignore에 추가했으니 GitHub에 올라가지 않는다. 그러면 Vercel 배포 시 값이 없어서 %VITE_GA_ID%가 그대로 나온다.
순서가 중요하다.
- 먼저 index.html 변경사항 커밋/푸시
- Vercel 대시보드 → 해당 프로젝트 → Settings → Environment Variables에서 등록
- Vercel 자동 재배포 시 환경변수 적용
커밋되지 않은 상태에서 환경변수를 먼저 등록해봤자 소용없다.
6. Netlify 배포 브랜치 불일치 (진짜 삽질)
lucky-games-web에서 prebuild가 계속 실행되지 않았다. 원인을 찾으려 여러 시도를 했다.
| prebuild npm 훅 | 로그 없음 |
| build 스크립트에 직접 && 연결 | 로그 없음 |
| Vite 플러그인 buildStart | 로그 없음 |
| Vite 플러그인 closeBundle | 로그 없음 |
| vite.config.js 최상단 console.log | 로그 없음 |
모든 시도가 실패한 뒤 Netlify 설정을 확인했더니 배포 브랜치가 dev 였고, 계속 main에만 푸시하고 있었다.
Site configuration → Build & deploy → Build settings
→ Production branch: dev → main 으로 변경삽질 시간이 꽤 걸렸는데 원인은 허무하게 브랜치 설정 하나였다.
배운 것
환경변수 관련해서 이번에 정리된 것들이다.
public/ 폴더는 Vite 파이프라인 밖이라 %VITE_% 치환이 안 된다. 동적으로 생성해야 하는 파일은 prebuild 스크립트를 활용하자.
배포 환경에서 환경변수는 각 플랫폼 대시보드에서 별도로 등록해야 한다. .env 파일은 로컬 전용이다.
삽질할 때는 코드보다 설정을 먼저 의심하자. 아무리 코드를 고쳐도 Netlify 배포 브랜치가 틀리면 소용없다.