초코스프레드 위키 설치과정

September 9, 2024

1. 초코스프레드 리포지토리 포크

초코스프레드 리포지토리를 포크 합니다. Repository name에 원하는 이름을 입력하세요. 만약 페이지를 처음 사용하시는 경우 (username).github.io 로 설정하시는 것도 좋은 방법입니다.

2. .env 파일 작성

포크된 리포지토리의 루트 디렉토리에 있는 .env 파일을 수정합니다.

# General Wiki Setting:
WIKI_TITLE = 위키 제목
FRONT_PAGE = 대문 페이지. 기본값은 '대문' 입니다.
WIKI_URL = 위키의 기본 도메인

# From your google spreadsheet URL:
SPREADSHEET = 구글 스프레드시트 ID

# From OAuth Client:
CLIENT_ID = OAuth 2.0 client ID

# From service account JSON file:
PRIVATE_KEY_ID = 서비스 계정 Private Key ID
CLIENT_EMAIL = 서비스 계정 이메일

# You need to put your PRIVATE_KEY from JSON file in Github secret.

구글 스프레드시트 아이디를 따는 방법은 3절에서, OAuth 2.0 클라이언트 아이디를 만드는 방법은 4절에서, 서비스 계정 JSON 파일을 내려받는 방법은 5절에서 다룹니다.

그 전에, 첫번째 문단인 General Wiki Setting의 내용을 채워주세요. 따옴표 없이 그냥 값만 입력해 주시면 됩니다.

3. 구글 스프레드시트 생성

구글 스프레드시트를 생성합니다. 이 링크는 브라우저에서 구글에 첫번째로 로그인된 유저의 계정으로 시트를 생성하니 참조해주세요.
파일의 제목을 수정해 주세요. 리포지토리 이름과 같은 제목이면 나중에 알아보기 편합니다.
이제 주소창에는 다음과 같은 형식의 주소가 찍혀 있습니다.

https://docs.google.com/spreadsheets/d/{sheetId}/edit?gid=0#gid=0

{sheetId} 부분을 복사해서 SPREADSHEET 에 저장합니다.

4. OAuth 2.0 클라이언트 아이디 생성

구글 클라우드 콘솔 에 접속합니다. 계정이 없는 경우 계정을 만드셔야 합니다.
API 대시보드 에 접속합니다.
왼쪽 메뉴에서 Credentials 를 클릭합니다. 혹은 본 링크로 바로 들어가도 상관은 없습니다.
Configure consent screen 을 눌러주세요.

전부 만들어졌으면 이런 화면이 보일 것입니다. Publish App 을 누릅니다.

다시 Credentials 페이지로 돌아갑니다. 위쪽에서 CREARTE CREDENTIAL 을 누르시고, OAuth Client ID 를 눌러주세요.
아래와 같이 설정합니다. redirect URI 에서 /signin/ 을 잊지 마세요.

저장하면 클라이언트 ID가 생성되어 있습니다. 복사해서 CLIENT_ID 에 저장합니다.

6. 서비스 계정 JSON 파일 생성

Credentials 페이지로 돌아갑니다. 위쪽에서 CREARTE CREDENTIAL 을 누르시고, Service account 를 누른 다음, 서비스 계정을 하나 만들어 줍니다.
이름을 제외하곤 별다른 설정을 하지 않아도 괜찮습니다.
만들어진 계정에 들어가서, 세번째 탭인 'KEY' 를 누른 다음 키를 하나 생성해 줍니다. ADD KEY – Create New Key

그러면 JSON 파일이 하나 자동으로 다운로드 될 것입니다. 이 파일을 열어서 private_key_id 와 client_email 을 복사하여 PRIVATE_KEY_ID CLIENT_EMAIL 에 붙여넣습니다. 이제 이 .env 파일은 그대로 커밋(저장)하셔도 됩니다.
private_key 는 깃허브 시크릿으로 리포지토리에 안전하게 보관할 것입니다. 리포지토리에서 Settings – (왼쪽 메뉴의) Secrets and Variables – Actions 를 눌러줍니다.
New Repository Secret 을 눌러준 다음, Name에 PRIVATE_KEY, Secret에 JSON 파일의 private_key 를 복사하여 그대로 붙여넣습니다. 이때 따옴표가 섞이지 않도록 조심해 주시고, 따옴표를 제외하고는 모든 문자를 그대로 붙여주셔야 합니다.
아까 생성했던 구글 스프레드시트에 들어가셔서, Share/공유 버튼을 누릅니다. 그리고 People with access 에 방금 생성한 client_email 을 붙여넣고 서비스 계정의 접속을 허용해 주세요.

5. 기타 파일 수정, 그리고 배포

리포지토리의 static/css/main.css 에서 테마 컬러를 수정할 수 있습니다. (물론 다른 것두요!)

:root {
    --accent: (여기!!!);
    --bg: #f8f8f8;
    line-height: 1.6rem;
}

이제 배포를 해 볼 겁니다.

리포지토리에서 Actions 탭에 들어갑니다. Workflows aren’t being run on this forked repository 알림이 뜰 텐데요, 초록색 버튼을 눌러 워크플로우를 활성화 시킵니다.
Deploy Nuxt site to Pages에 들어가 보면 disable 되어 있습니다. 이것도 Enable Workflow 버튼을 눌러 활성화 시킵니다.
Run Workflow – 초록 버튼을 눌러 워크플로우를 실행시킵니다.
리포지토리의 Settings – 왼쪽 메뉴의 Pages에서 Build and deployment – Source – Github Actions 를 눌러주세요.
Custom domain에서 도메인을 연결할 수 있습니다.
도메인에 접속했을 때 아래와 같은 페이지가 출력되면 성공입니다. 이제 로그인하고 대문 문서를 생성하면 되는데요, 페이지에 실제로 반영되기까지는 10분 정도가 걸리니 이 점 참조해 주세요. (방금 테스트해 보았는데, 캐시까지 지워야 합니다...)