[Github] git-page에 secret key 적용하기 (Actions)

 

---

서론

2024.01.25 - [Study/ETC] - github page로 웹 사이트 만들기

github page로 웹 사이트 만들기

이전에 github repo를 페이지로 만들어 배포했다.

 

Setting에서 branch를 None에서 master로 바꾸면, master 브랜치가 자동으로 배포된다.

해당 설정을 완료하면 Actions에 자동으로 workflow가 생성되는 것을 확인했다.

 

이 레포지토리에서 apikey를 안전하게 사용하고 빌드까지 수행하려고 한다.

---

API KEY 숨기기

API KEY는 개인정보 유출 위험이 있기 때문에 그대로 노출하면 안 된다.
API KEY를 안전하게 숨겨서 github에 파일을 업로드하자.

 

1. apikey.js 파일을 생성한다. 

    - HTML과 JS 파일을 사용 중이기 때문에 해당 이름을 사용했다.

    - React나 NextJS의 경우 .env를 사용하기도 한다.

// apikey.js
const config = {
	apikey: "api키"
}

2. index.html 에 해당 파일을 연결한다.

3. 사용하려는 곳에 변수를 생성하고, 값을 대체한다.

const API_KEY = config.apikey;

4. .gitignore 파일을 생성하고 apikey.js 파일을 추적에서 제외시킨다.

// .gitignore
apikey.js

5. git push를 하면 apikey.js 파일을 제외한 파일들이 업로드된다.

---

문제발생

기존에 연결해 둔 page로 연결하면, apikey.js 파일이 없어서 오류가 발생한다.

이를 해결하려면, 저장소에 업로드 한 파일을 빌드하기 전에 apikey를 넣는 작업을 추가해야 한다.

---

Secrets key 설정

우선, 레포지토리에 API KEY를 안전하게 저장해야 한다.

 

Settings > Secrets and variables > Actions > Repository secrets로 들어온다.

New repository secret 버튼을 눌러 숨기고 싶은 키 값을 저장할 수 있다.

변수 이름과 값을 지정해서 저장한다.

나는 날씨 API를 사용하기 때문에 WEATHER_KEY라고 지정했다.

---

Workflow

Actions 탭으로 들어가면, 기존에 생성된 pages-build-deployment를 확인할 수 있다.

이 작업은 master에 저장된 파일들을 빌드하기 때문에, 업로드되지 않은 apikey.js 파일은 찾을 수 없다.

 

apikey.js 파일을 만들기 위해 Workflow를 수정해야 한다.

1. Settings > Pages > Build and deployment 설정을 GitHub Actions로 변경한다.

2. Actions > New workflow 버튼을 클릭한다.

3. set up a workflow yourself를 클릭해 아래 코드를 붙여 넣는다.

  github에 yml 파일이 만들어지고, commit 하면 actions가 실행된다.

# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll with GitHub Pages dependencies preinstalled

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["master"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Generate API key file
        run: |
          echo "const config = { apikey: '${{ secrets.WEATHER_KEY }}' };" > apikey.js
      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

 

여기서 
run: | echo "const config = { apikey: '${{ secrets.WEATHER_KEY }}' };" > apikey.js

echo 뒤 세미콜론 안은 apikey.js 파일 값이고, WEATHER_KEY는 secrets에서 생성한 변수 명이다.

4. Actions 동작 후 빌드된 페이지에서 API KEY를 정상적으로 가져오는 것을 확인할 수 있다.

---

workflow 해결 과정

기존에 설정되어 있던 Actions > page-build-deployment에서 git page를 jekyll로 빌드한다는 사실을 확인했다.

New workflow에서 jekyll을 검색해 나오는 GitHub Pages Jekyll을 수정했다.

 

Build job에서 페이지가 빌드되기 전에 apikey.js 파일을 생성해야 한다.

처음에는 Checkout과 Setup Pages 사이에 작성했다.

...
	steps:
		- name: Checkout
			uses: actions/checkout@v4
		- name: Generate API key file
			run: |
				echo "const config = { apikey: '${{ secrets.WEATHER_KEY }}' };" > apikey.js
		- name: Setup Pages
			uses: actions/configure-pages@v4
		- name: Build with Jekyll
			uses: actions/jekyll-build-pages@v1
...

 

처음에 테스트하기 위해 echo 명령으로 빈 apikey.js 파일을 만들었다.

빌드된 페이지에서 apikey.js 파일이 존재하는 것을 확인하고, echo 명령을 위와 같이 수정했다.

그러나 apikey.js 파일이 수정되지 않고, 빈 파일이 계속 유지되었다.

 

어쨌든 Build 전에 apikey.js 파일을 생성해야 하므로, 한 칸 아래인 Setup Pages 다음에 작성했다.

...
	steps:
		- name: Checkout
			uses: actions/checkout@v4
		- name: Setup Pages
			uses: actions/configure-pages@v4
		- name: Generate API key file
			run: |
				echo "const config = { apikey: '${{ secrets.WEATHER_KEY }}' };" > apikey.js
		- name: Build with Jekyll
			uses: actions/jekyll-build-pages@v1
...

그랬더니 원하는 대로 apikey.js 파일이 수정되어 반영되었다.

해당 actions가 정확하게 어떤 동작을 하는지는 알아봐야겠다.

---