Create Next App

아우 참으로 곤란한 상황이로다...🤔

Github Page로 무료 호스팅을 할 수 있는 대신 해당 레퍼지토리를 Public으로 공개해야한다.
뭐... 나의 ~~하울의 움직이는 성 같은~~ 코드를 공개하는 것은 ~~조금 부끄럽고 않~~ 괜찮지만...

소셜로그인에 필요한 카카오 로그인 API 토큰은 올리면 보안상 취약하잖습니까. 그리고 나를 더 슬프게 하는 건 이걸 이미 푸시 하고 나서 깨달았다는 것...😱 (여러분은 부디 푸시 하기전에 이 글을 보고 적용하시길...)

그래서 정리할 방법은 다음과 같다.

레포지토리에 중요한 정보를 암호화하여 올리고 배포할 때 복호화하여 사용하는 방법.
이미 History(커밋 내역)에 올라가버린 중요한 정보를 삭제하는 방법.

시-작🔥

1. 중요한 정보를 암호화하여 올리고 배포할 때 복호화하여 사용하는 방법 (Feat. Git Secret) 🔐

나는 Git Workflow를 사용하여 CI/CD를 적용했기 때문에, 정보를 암호화 하는 것 뿐 아니라, 배포시 자동 복호화하여 사용할 수 있어야했다.

먼저 전체적인 흐름을 정리해보자.

원하는 정보를 GPG로 암호화한다.(복호화 키 생성)
레포지토리에 암호화한 파일을 올린다.
Github Secret에 복호화 키를 등록한다.
CI/CD 과정에서 Secret을 이용하여 파일을 복호화한다.

이렇게 정리하니 정말 간단하지 않나요!👍

1. 원하는 정보를 GPG로 암호화한다. (복호화 키 생성)

GPG(GNU Privacy Guard) 는 RSA 방식을 사용하는 무료 암호화 프로그램입니다. CI/CD 과정에서 git-secret을 사용할 예정인데 git-secret은 파일을 암호화할 때 gpg를 사용한다고 명시되어있습니다.
git-secret | https://git-secret.io/

찾아보다 보니 GPG는 깃허브에서 커밋에 대한 서명에도 사용되었습니다! 인증된 커밋을 하고싶다면 아래 링크를 통해 살펴보셔도 좋을 것 같습니다!
Git Docs - Managing Comit Signature Verification | https://docs.github.com/en/authentication/managing-commit-signature-verification/about-commit-signature-verification

먼저 GPG를 설치합니다. brew, apt 등을 통해 설치할 수 있는데 윈도우는 사이트에서 다운로드 합니다.
https://gnupg.org/download/ 에 접속해서 스크롤을 내리면 윈도우 버전인 Gpg4win 이 보입니다. 다운로드 후 설치해줍니다.

GPG Download Site Download Gpg4win

// 설치 확인
gpg --version
// AES256 파일 암호화
gpg --symmetric --cipher-algo AES256 .\src\api\oauth.ts

위는 oauth.ts 라는 파일을 암호화 하는 예시입니다. 위 명령어를 입력하면 아래와 같이 Passphrase를 입력하는 창이 나옵니다. 이 Passphrase를 후에 사용하게됩니다. 잘 기록해둡니다.

GPG Download Site passphrase

입력을 완료하면 파일이름.gpg (저의 경우 oauth.ts.gpg)라는 암호화된 파일이 생성됩니다!

2. 레포지토리에 암호화한 파일을 올린다.

암호화된 파일을 깃허브에 올려줍니다.

git add .\src\api\oauth.ts.gpg

만약 (저처럼) 이미 원본 파일이 원격 레포지토리에 올라간 상태라면 그 파일을 삭제하고 다시 올라가지 않도록 .gitignore 에 추가해주시면 되겠습니다.

// 캐시된 파일 삭제
git rm --cached .\src\api\oauth.ts

커밋하고 푸시해서 복호화된 파일이 잘 올라갔는지 확인해주세요!🙂

3. Github Secret에 복호화 키를 등록한다.

앞서 파일을 암호화 할 때 사용했던 비밀번호를 깃허브에서 Secret으로 등록합니다. 아래 화면(Settings > Secrets > Actions)에서 New Repository Secret 버튼을 눌러 비밀번호를 입력해주면 됩니다. 저는 비밀번호의 이름을 PASS_PHRASE로 지정했습니다.

Github Add Secret

4. CI/CD 과정에서 Secret을 이용하여 파일을 복호화한다.

이제 마지막으로 Git Workflow CI/CD 과정에 복호화 과정을 추가합니다! 아래의 예시는 PASS_PHRASE로 앞에서 생성한 비밀번호 secrets.PASS_PHRASE를 불러옵니다. 그리고 oauth.ts.gpg 파일을 복호화 하여 oauth.ts로 저장합니다.

- name: decrypt file
  run: gpg --quiet --batch --yes --decrypt --passphrase="$PASS_PHRASE" --output src/api/oauth.ts src/api/oauth.ts.gpg
  env:
    PASS_PHRASE: ${{ secrets.PASS_PHRASE }}

🔥주의! 보안상 workflow 실행시 prompt에 secret 및 복호화된 내용이 출력되지 않도록 확인해주세요!

이렇게 하면 CI 과정에서 해당 파일을 복호화 한 후 배포할 사이트를 빌드하게됩니다!

2. History(커밋 내역)에 올라간 정보를 삭제하는 방법 🔥

은 글이 길어져서 다음 포스트에서 정리하도록 하겠습니다!🙂

🐢 프로젝트 전체 코드 | https://github.com/roundshoulder/cs-letter-frontend