[VScode] .env 파일 사용하기(feat. launch.json 사용하는 방법)

앱 개발을 할 때 네이버나 구글 등에서 제공하는 외부 API 를 사용하는데 보통 api key 가 필요한 경우가 많다. api key 를 발급받아서 사용하는 방법은 여러가지가 있다. 요청 url 에 하드코딩하거나 key 값을 변수로 등록하여 파라미터 값으로 전달할 수 있고 환경변수 파일에 등록하여 key 값을 받아오는 방법 등이 있다. api key 를 직접 하드코딩하는 게 가장 편하고 쉬운 방법이지만, 코드가 외부에 공개됐을 때 보안에 취약하고 악의적인 사용이 감지된다면 API 접근이 어려워지거나 최악의 경우 비용이 청구될 수도 있다. 

 

url 에 하드코딩하는 예시

 

api key 를 변수로 등록

 

이번 프로젝트에서는 환경변수 파일(.env) 파일을 생성하여 api key 를 관리하고 git 에는 파일을 올리지 않도록하여 키값이 유출되지 않도록 개발하는 방법을 사용할 것이다.

 

.env 파일로 api key 관리하는 방법

1. .env 파일 생성

 

2. .gitignore 파일에 .env 파일 무시하도록 추가

참고사항: .gitignore 프로젝트 git init 을 해야 생성되는 파일임

 

3. 프로젝트 실행할 때 .env 파일 define 하도록 설정

// launch.json
{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "flutter_env",
        "request": "launch",
        "type": "dart",
        "toolArgs": [
          "--dart-define-from-file", 
          "./.env"
        ]
      }
    ]
}

 

4. String.fromEnvironment 사용하여 key 값 가져오기

유의 사항: String.fromEnvironment() 메서드를 사용할 경우 const 키워드를 사용하여 호출할 때만 정상적인 동작을 한다.

This constructor is only guaranteed to work when invoked as `const`.

 

문제 발생

설정을 잘 해두고 실행을 하여 확인할 차례이다. API_KEY 를 print 하는데 .env 에 지정한 값으로 들어오지 않고... 'default Value'(내가 임의로 지정한) 기본 값을 출력한다. 설정이 잘 안된건가 싶어 vscode 를 재실행해보기도 하고 모든 탭을 닫고 main.dart 파일만 켜서 run 을 돌려보기도 했으나 모두 api key 를 정상적으로 가져오지 못했다. 

 

해결 방법

Run and Debug 탭에서 launch.json 에 작성한 configurations 를 선택하여 실행하면 된다.

 

main 에서만 나타나는 Run 아이콘의 경우 vscode extasions 에서 설치한 dart/flutter 확장팩으로 실행하는 것이다. Run and Debug 에서 실행하는 것은 .vscode/launch.json 에 저장한 디버깅 구성을 기반으로 실행하는 것이기 때문에 실행하는데에 있어 차이가 발생한다. 따라서 launch.json 에 구성한 빌드 옵션을 사용하기 위해서는 Run and Debug 탭의 configuration 을 확인하여 실행해야한다.