카드 뒤집기 게임에 보안 챙기기

01 커서에게 다음과 같이 요청합니다. 그러면 관련 내용을 인지하고 중요한 설정 정보를 환경변수라는 것으로 분리하겠다고 할 겁니다. 이렇게 환경변수로 분리하면 중요한 정보는 로컬에만 남고, 깃허브와 같은 온라인 저장소에는 업로드하지 않게 됩니다.

보안에 유출되지 않도록 수파베이스 접근 키 관련 내용을 분리해줘.

 

프로젝트 폴더에서 다음과 같이 파일이 분리된 것을 확인했다면 보안을 챙긴 카드 뒤집기 게임 프로젝트가 거의 완성된 것입니다.

 

02 이제 분리된 상태로 깃허브에 올려 이력을 덮으면 됩니다. 현재 폴더의 파일 목록을 보면 .gitignore라는 파일이 있습니다. 이 파일은 깃허브에 올리면 안 되는 파일을 기록해두는 곳입니다.

 

03 확인을 완료했다면 이제 깃허브에도 반영해야겠죠? 커서에게 반영된 내용을 깃허브에 add, commit, push룰 해달라고 합니다.

이제 다시 add, commit, push를 해줘.

 

04 완료 후에 깃허브로 이동하여 해당 파일을 열어보면 노출되었던 수파베이스 키 정보가 없어진 것을 확인할 수 있습니다.

 

05 마지막으로 보안을 강화한 프로젝트로 다시 배포하기 위해 버셀에 적용한 깃허브 이력도 수정해야 합니다. 깃허브에 접근 키 정보를 제거했으므로, 이 깃허브를 바탕으로 배포하는 버셀 입장에서는 더 이상 수파베이스에 접근할 수 없습니다. 따라서 카드 게임이 제대로 동작하지 않을 것입니다. 배포된 웹사이트에서 F12를 눌러 오류 메시지를 보면 'Supabase 연결 실패' 또는 supabaseUrl이 없다고 할 것입니다.

 

06 이제 이것을 바로 잡아봅시다. 보안상 깃허브에 올릴 수 없었던 키 값을 입력하려면 어떻게 해야 할까요? 커서에 물어보면 친절히 알려줄 겁니다.

보안 관련 값을 깃허브에 업로드하지 않으니까 vercel에서 오류가 발생했을데 어떻게 해야 이 값을 추가할 수 있어?

 

커서가 알려줄 방법이 굉장히 복잡해보이지만 사실은 간단합니다. 버셀 사이트 자체에 보안 관련하여 빠졌던 키를 입력하고, 배포 시에 이 키를 스크립트를 추가하여 적용하라는 것입니다.

 

07 배포 시에 키를 적용할 수 있도록 스크립트를 추가하라고 하니 그렇게 해보습니다. 우선은 커서에게 '빌드 시 supabase-config.js 자동 생성 스크립트 추가'를 시켜봅시다.

빌드 시 supabase-config.js 자동 생성 스크립트 추가를 해줘.

 

08 커서가 코드를 생성해주고 적용 방법을 알려줍니다. 이대로 실행해봅시다. 버셀에 등록한 코드 뒤집기 게임 프로젝트에 들어가면 [Settings -> Environments Variables]가 있습니다. 여기에서 환경변수를 등록할 수 있습니다. supabase-config.js에 있는 값의 이름과 따옴표 사이에 있는 복사해서 넣으세요. 절대로 따옴표까지 입력하면 안 됩니다. 작성한 다음 다음 [Save]를 누르면 환경변수로 보안 관련 값이 등록됩니다.

 

09 그다음 이 환경변수 값을 버셀에세 배포해서 게임으로 제공할 때 내부적으로 입력하게 해야 합니다. 커서에게 안내한 대로 [Settings -> Build and Development]에 Build Command를 npm run vercel-build로 등록하고 Output Directory를 card_game_supabase로 적용합니다. 갑을 입력할 때는 [Override] 옵션을 켠 상태로 입력해야 합니다.

 

10 이제 이 설정이 적용되도록 배포를 다시 해야 합니다. 생성한 내용을 깃허브에 적용합니다. 커서로 돌아가서 깃허브에 업데이트한 적용하도록 다음과 같이 요청합니다.

깃허브에 add, commit, push 해줘.

 

11 깃허브 업로드 과정이 끝나면 이제 버셀에 업데이트한 깃허브 이력을 가져와 배포할 수 있도록 새 배포를 하면 됩니다. [Deployment]에서 오른쪽위의 [...]을 누르고 [+Create Deployement]를 선택합니다. Create Depolyment 창이 뜨면 Commit on Branch Reference에 깃허브 주소를 그대로 입력하고 [Create Deployment]를 누릅니다.

 

12 설정값을 바꾸는 건 코드를 작성하는 것과는 별개로 어려운 일입니다. 하지만 파일을 별도로 관리함으로써 보안까지 챙긴 완성도 높은 카드 뒤집기 게임을 만들었습니다.