서재(書齋)

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를 활용하여 배포하는 과정을 알아보았다.

끝.

GitHub에서 소스를 관리하다 보면, 내 개인 프로젝트임에도 불구하고 Public으로 공개되어야 얻을 수 있는 각종 지원 기능들로 인해 Public Repository로 생성하게 되는 경우가 발생한다.

이 때, 소스상에 연동에 필요한 각종 Key들이 그대로 들어가 있고 해당 소스들이 모두 공개 리파지토리에 올라가는 것이 싫다면 환경 변수에 각종 Key들을 생성하여 한 단계 숨기고, 해당 Key가 포함된 env 파일은 git에 업로드 되지 않도록 하는 방법을 적용할 수 있다.

단, 결과적으로 배포 시 App을 Build하면 어차피 해당 Key들은 환경변수 값을 참조하여 컴파일을 하게 된다.

보안 측면에서 영영 숨기는 방법은 아니라는 것이다. 단순히 GitHub에 소스 레벨로 이러한 키들이 공개되는 것을 원치 않는 경우에는 해당 방법을 적용하면 된다.

(Nomad Coder - 트위터 클론코딩 강좌 수강 중 내용을 참고하였습니다.)

.env 파일 생성 & 환경변수 등록

우선 프로젝트 폴더 아래에 .env 파일이 없다면 해당 파일을 생성한다.

그 후, 각종 환경변수를 생성하고 기존에 있던 key를 해당 변수값으로 할당해 준다.

이 때, React App의 경우에는 환경변수가 반드시 REACT_APP으로 시작해야 한다는 점을 명심하자.

아래는 Firebase 개발 시 등록한 환경변수의 예제이다.

기존 소스 수정

기존 소스에서 Key가 그대로 입력된 부분들은 모두 아래와 같이 환경변수로 대체한다.

GitHub에는 해당 파일은 업로드가 될 것이지만, 다른 사용자들은 환경변수명만 알 수 있게 된다.

.gitignore 파일 수정

하지만 이렇게 숨겨놓은 env 파일이 git에 업로드된다면 말짱 꽝이므로, 해당 파일이 Repository에 업로드되지 않도록 설정해 주어야 한다.

아래와 같이 .env 파일을 .gitignore 파일 내에 등록해 주면, 해당 파일은 GitHub으로 업로드되지 않게 된다.

확인을 해 보면, 아래와 같이 gitignore 파일에 env를 등록하기 전에는 env 파일도 Changes로 감지하나(좌), gitignore 파일에 .env를 등록한 후 저장하면 Changes 목록에 .env 파일이 사라진 것을 볼 수 있다.

(230211 추가)

해당 방법으로 관리하는 경우, 치명적인 오류가 하나 발생한다.

아마 로컬 환경에서 빌드 시 순서에 따른 문제인 것 같은데, apiKey나 authDomain 같은 환경변수 값들이 필요한 경우 해당 값들을 제대로 참조하지 못하는 경우가 발생한다.

(Ex. API Key가 비정상적이라거나, Firebase Auth 사용 시 Domain을 등록하고 사용하라거나 등의 오류 발생)

실제 배포시에는 해당 문제가 발생하지 않는다 하더라도, 개발 과정에서 위와 같은 불편함을 감수하기는 힘드므로 그냥 key를 업로드해야 할 수밖에 없을수도....

끝.

이 전 글들에서는 Visual Studio Code에 Git을 설치하고, GitHub에 존재하는 Repository를 불러와서 내 로컬에서 작업하고 이를 다시 GitHub Repository로 Push하는 방법을 알아보았다.

이번에는 반대로 흔히 실습을 하다 보면 각종 프레임워크/라이브러리 등을 로컬에 설치하고 이를 이용해 로컬에 파일을 우선 만들게 되는데, 이렇게 만들어진 로컬 파일을 GitHub 내 Branch를 신규 생성하고 형상관리하는 방법에 대해서 알아보고자 한다.

신규 Repository 및 Branch 생성

기존에 GitHub 계정과 연동을 한 상태라면, VSCode 내에서 Source Control 메뉴에 진입했을 때 아래와 같이 'Publish Branch' 버튼이 보이게 된다.

이를 클릭하면 상단에 Private Repository를 생성할지, Public Repository를 생성할지 선택하는 부분이 표시된다.

목적에 맞는 것을 선택하자.

그러면 아래와 같이 VSCode 우측 하단 창에 생성 상태바가 표시된 후 성공적으로 publising까지 완료되었다는 메시지를 볼 수 있다.

Open on GitHub 버튼을 클릭하여 사이트로 들어가 보면, 아래와 같이 새로운 Repository가 자동으로 생성되어 master branch에 정상적으로 소스가 업로드되어 있음을 확인할 수 있다.

공부하면서 많이 느끼는 부분인데, 정말 새삼 모든 것이 한층 더 좋아지고 편리해졌다는 생각이 든다.

한창 Google Cloud Summit등에 참석해서 열의를 가지고 이런저런 것들을 학습했을 때보다 더 많은 것들이 진보했다는 느낌이다. 그게 이 IT 업계라서 더더욱 빠르게 느껴지고.

내 업무 환경이 레거시 SI라서, 회사가 온프레미스에 폐쇄망만 고집해서 등의 이유로 이런 신기술들을 활용하지 못한다면 더더욱, 개인적으로라도 끊임없이 학습하고 본인의 생산성을 향상시키기 위해 노력해야만 시간이라는 귀중한 자원을 가장 효율적으로 쓸 수 있지 않을까 싶다.

비록 여러가지 이유로 업무에 적용할 수 없는 상황일지라도 '나'는 항상 갖춰져 있어야 한다는 생각이다. 그게 기술적인 부분이건 업무에 임하는 자세건 내가 갖춰져 있어야만 기회가 왔을 때 잡을 수 있다.

그렇지 않으면 본인 머릿속에 있는 시스템이나 서비스의 히스토리로만 먹고 사는, 그저 그런 관리자나 개발자가 되어 밀려나고 도태될 뿐이다.

끝.

최근 많이 보고 있는 노마드 코더의 니꼬님이 그렇게나 좋아하는 Visual Studio Code를 활용하여 개발 환경을 셋팅하기로 했다.

Visual Studio Code 설치

Visual Studio Code는 글을 작성하는 시점에 이미 설치를 다 해버린 상태라 상세한 가이드는 작성을 못 하겠다.

다만 구글링을 해 보면 VSCode 설치 관련 글은 엄청나게 많고, 대부분은 기본 설정으로 설치를 진행하면 되는지라 특별한 가이드가 필요하지는 않다.

다만 Installer에 두 가지 타입이 있는데, 특정 User만을 위한 User Installer가 있고, 해당 Windows의 모든 사용자를 위한 System Installer가 있다.

공용 PC 등을 사용해서 특정 사용자만 사용해야 하는 경우가 아니고, 개인 PC를 사용하는 경우라면 일반적으로 System Installer를 설치해서 사용한다고 하니 참고하자.

Git 설치

설치가 완료된 후 VSCode를 구동시켜 보면, 생산성을 향상시키기 위한 방법 중 하나로 Git을 설치할 것을 권유하고 있다.

Install Git 버튼을 눌러 사이트에 들어간 후, 다운로드 파일을 찾아 다운받는다.

2023년 1월 21일 현재 최신 버전은 2.39.1 버전이다.

이후 대부분을 기본 설정으로 넘어간 뒤, 기본 에디터를 선택하는 부분에서 우리는 VSCode와 Git을 연동할 것이므로 'Use Visual Studio Code as Git's Default Editor' 옵션으로 변경한 후 넘어가자.

이후에는 저장소의 메인 브랜치 이름을 Git 기본값인 master로 할 것인지, main등으로 변경할 것인지를 비롯한 각종 셋팅들이 나오나 구동에 큰 영향을 주지 않는 옵션들로 대부분 기본값을 선택했다.

아, 마지막 즈음에 PATH environment와 관련된 설정을 하는 부분이 있다.

Git을 Command Line에서 사용할 때 Git Bash만을 사용할 것인지(1번), 또는 윈도우 PowerShell을 비롯한 각종 써드 파티 소프트웨어들을 사용해서 Git을 사용할 것인지(2번) 등을 묻는 부분인데, 대부분 윈도우 사용자들은 2번을 선택할 것을 추천하고 있으므로 기본 선택값인 두번째 옵션을 선택하여 설치한다.

다시 한번 찬찬히 읽어 보니, 환경변수의 PATH 값을 전혀 수정하지 않고 Git Bash만을 사용하려면 1번, VSCode와 같은 써드 파티 툴들을 이용해서 Git을 이용하려면 PATH에 일부 Git Wrapper와 관련된 환경변수 값이 추가되는 2번을 선택하면 되는 듯하다.

설치가 완료되면, 윈도우 메뉴에서도 Git을 확인할 수 있으며 일반적인 cmd 창에서도 'git --version' 명령어로 Git의 설치 여부와 설치된 버전을 확인할 수 있다.

GitHub 연동

설치가 완료된 후 VSCode로 돌아와 좌측의 세번째 아이콘(Source Control)을 클릭하면, 아직 아래와 같이 설치된 Git을 인식하지 못하는 것을 볼 수 있다.

reload를 클릭해 VSCode를 다시 로딩해 주자.

그러면 아래와 같이 Git이 인식된다.

이제 'Oepn Folder'를 클릭해 기존에 내가 로컬에서 작업하고 있던 폴더를 선택하여 불러올 수도, 'Clone Repository'를 클릭하여 GitHub에 이미 등록되어 있는 리파지토리를 복제해서 가져올 수도 있다.

자세한 GitHub 연동 및 소스 관리 방법은 나중에 추가로 작성하도록 하고, 우선 설치 방법까지의 가이드는 이것으로 마친다.

끝.