서재(書齋)

React 교육 수강 중에 만든 간단한 React App을 배포해보고자 한다.

사실 나중을 생각하면 GitHub Pages에 배포하는 것이 아니라 실제 어플리케이션 서버에 배포하는 것을 작성해야 하나, 과정 중에 배울 만한 점들이 있어 별도로 기록해 둔다.

gh-pages 패키지 설치

GitHub 계정은 이미 생성하여 보유하고 있다고 가정한다.

프로젝트 폴더 내에서 아래와 같이 npm install 명령어를 통해 GitHub Pages에 배포하는 것을 도와줄 gh-pages 패키지를 설치한다.

npm install gh-pages

package.json 수정

package.json 파일에 두가지 정도를 수정해야 한다.

하나는 deploy와 관련된 script를 추가하는 것이고, 다른 하나는 해당 App이 배포될 Homepage를 명시해주는 것이다.

1.  Script 수정

파일 내 scripts 부분에 아래와 같이 predeploy와 deploy를 추가한다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

이렇게 하면, 배포를 위해 npm run deploy 명령어 수행 시 Node.js에서 자동으로 predeploy 명령어를 실행 후 deploy를 수행하게 된다.

1. 'npm run deploy' 입력 -> predeploy가 있으므로 predeploy 명령어인 'npm run build' 수행
2. npm run build 명령어인 'react-scripts build'를 통해 build 폴더에 배포 파일 생성
3. 실제 npm run deploy 명령어인 'gh-pages -d build' 명령어를 통해 GitHub Pages에 build 폴더의 파일 배포

GitHub Pages 사용 설정

우선 GitHub의 호스팅 기능을 사용하기 위해서는 해당 Repository가 Public으로 공개되어 있어야 한다.

만약 공개되어 있지 않다면 Settings > General의 맨 하단에서 공개 여부를 설정할 수 있으므로 참고하자.

내가 배포하고자 하는 Repo.의 Settings > Pages 메뉴로 들어가면 아래와 같은 메뉴를 볼 수 있다.

첫번째 빨간 네모는 해당 Repository의 GitHub Pages 주소를 나타내며, 두번째 빨간 네모는 그래서 내 App Source가 어디 있냐? 나는 Deploy from a branch를 선택했으므로 그러면 어느 브랜치에 있냐? 를 묻는 부분이 되겠다.

gh-pages 패키지를 사용하면 자동으로 gh-pages 브랜치를 생성하고 해당 브랜치에 파일을 배포하므로 gh-pages & root를 선택해 주면 되겠다.

배포 실행

Visual Studio 등 작업하던 툴의 Terminal에서 이 전 단계에서 사전 셋팅한 npm run deploy 명령어를 실행한다.

그러면 자동으로 배포용 파일을 생성하고, 내 레파지토리의 gh-pages 브랜치에 파일들을 배포해 주게 된다.

약 10분 정도의 대기시간이 필요했던 것 같다.

조금의 대기 후에 아까 보았던 Pages 화면의 빨간색 네모 표시해 두었던 github.io 주소로 들어가 보면 페이지가 정상적으로 표시되는 것을 볼 수 있다.

추가) Firebase Authentication 도메인 승인

해당 앱은 Firebase 기반으로 만들었으므로 Firebase Authentication 기능을 이용해 가입 및 로그인을 진행하는데, 배포한 깃헙 도메인이 승인되어 있지 않아 처음에는 로그인이 되지 않는 현상이 발생한다.

Firebase > Authentication > Settings > 도메인 > 승인된 도메인 메뉴에서 '도메인 추가' 버튼을 클릭하여 계정명.github.io 도메인을 추가해 주자.

이상으로 간단하게 GitHub Pages를 활용하여 배포하는 과정을 알아보았다.

끝.

간단한 앱이나, 구현하고자 하는 서비스의 프로토타입을 빠르고 간편하게 만들기 위해서 Google Firebase를 많이 사용하는 것 같다.

Firebase 내에는 많은 부가 서비스와 기능들이 제공되지만, 그 중 Google의 규모를 활용한 강력하고 단순하며 경제적인 객체 저장소 서비스인 Firebase용 Cloud Storage 서비스를 활용해 사진 파일을 업로드 할 수 있는 기능을 구현하고자 했다.

그러나 아직 익숙치 않아서인지 파일 업로드와 관련된 부분을 구현하는 중에 발생한 오류(Uncaught (in promise) FirebaseError: Firebase Storage: User does not have permission to access '...'. (storage/unauthorized))를 수정하는 데 시간을 조금 허비하여 관련 내용을 기록해 둔다.

아래는 파일 업로드 시 실행되는, 내가 구현한 onSubmit 함수의 일부분이다.

        event.preventDefault(); 
        const fileRef = fbStorage.ref().child(`${userObj.uid}/${uuidv4()}`);
        console.log(fileRef);
        const response = await fileRef.putString(fileState, "data_url");
        console.log(response);

첫번째 시도 결과, fileRef(ReferenceCompat)는 콘솔에 정상적으로 출력되나 response는 정상적으로 출력되지 않고 bucket의 특정 경로에 접근할 permission이 없다는 경고가 표시된다.

약간의 구글링 끝에, Firebase Storage 내 'Rules' 메뉴에서 읽기/쓰기 시 적용될 각종 Rule을 편집할 수 있다는 것을 알게 되었다.

해당 메뉴에서는 읽기/쓰기와 관련된 권한 체크, 쓰기 시 각종 Validation Rule 추가 등 유용한 기능등을 전용 문법으로 작성할 수 있는 기능을 제공하고 있었다.

위 캡쳐를 보면 알 수 있듯이, read와 write 모두 if false로 아무도 읽고 쓰지 못하게 초기 설정이 되어 있었다.

해당 부분을 아래와 같이 Firebase의 Auth를 통해 로그인하고 권한을 부여받았다면 읽기/쓰기가 가능하도록 수정해 주었다.

이후 재시도하면 아래와 같이 업로드 관련 로직 수정 후 Console.log가 정상적으로 출력됨을 볼 수 있다.

Firebase Storage 콘솔 내에서 'Files' 탭을 확인해 보면, 파일이 정상적으로 생성된 모습을 볼 수 있다.

끝.

기존에 생성했던 AWS 계정은 생성한지 1년이 초과되어 Free Tier 혜택을 받지 못한다.

그렇다고 해당 계정을 삭제하자니 내가 사용하는 Gmail 주소라 삭제할 수도 없어, 프로젝트용 신규 AWS 계정을 생성하기로 했다.

Google 계정 신규 생성

별다른 설명이 필요 없을 것 같다.

참고로 AWS Free Tier의 기간 한도는 1년이므로, 1년 주기로 계정을 재 생성하여 Free Tier 혜택을 반복적으로 누리기 위한 사용자라면 기존 이메일 계정을 사용하지 말고 신규 Google 계정을 추가로 만들 것을 추천한다.

AWS 계정 신규 생성

Google 계정을 새로 생성했다면, AWS 사이트(https://aws.amazon.com/)로 들어가자. 우측 상단을 보면 AWS 계정 생성 버튼이 보인다.

클릭하여 절차를 차례대로 따르면서 가입을 진행한다.

두번째 단계쯤 보면 국가 또는 리전을 선택하는 단계가 나타나는데, Google의 GCP 경우에는 프리 티어 혜택을 받기 위해서는 특정 리전에 인스턴스를 생성해야 하는 등의 제약이 있었던 것으로 기억하지만 AWS는 제약이 없다고 한다.

빠른 속도를 위해 대한민국 리전으로 선택하여 가입하도록 하자.

신용카드 정보 등을 입력하고 마지막 단계쯤에 다다르면 Support 플랜을 선택하는 부분이 나타나는데, '기본 지원 - 무료' 항목을 선택하면 된다.

무엇을 선택하건 AWS 기능을 사용하는 데는 차이가 없고, 무슨 일이 생겼을 때 AWS에 지원 요청을 하게 되는데 이 때 느린 서비스를 받느냐, 돈을 더 주고 빠른 서비스를 받느냐의 차이가 있는 것이므로 일반 개인 개발자들은 무료 항목을 선택하고 가입을 진행하면 된다.

플랜을 선택하고 나면 가입이 완료된다.

계정을 활성화하는 데 몇 분이 걸린다고 나와 있으니 조금 기다려 보자.

잠시 후 로그인했을 때, 아래와 같이 AWS Console이 정상적으로 표시되면 가입이 완료된 것이다.

끝.