[Issue Tracker Project] 로그인 시 환경변수 이슈 발생

출처) 짤봇 - https://jjalbot.com/jjals/D1PYZTxcX

 

 

기록 이유

FE 담당인 Mille 가 프론트 개발을 끝냈다는 연락을 받고 API 연결을 위해 오랜만에 팀원 모두가 모여 머리를 맞대로 삽질을 하고 있다.

로그인부터 막혔는데 전혀 이유를 찾지못하다가 생각보다 간단하게 수정할 수 있었는데.. 잊어버리지 않기 위해 기록하려고 한다 !

기록 시작 ~

 

 

어떤 문제가 발생했나 ?

현재 우리 프로젝트에서는 GitHub Oauth2.0 을 사용한 로그인을 구현하고 있다.

아래 이미지에서 모자이크 한 Client_Id 를 프론트 쪽에서 환경변수로 등록하고 GitHub Server 에 접근한 뒤, 프로젝트 서버가 배포된 WAS 의 로그인 API 로 리다이렉트하는 방식으로 동작하는데 계속해서 Client_Id = undefined 로 동작하는 문제가 발생했다 😫

모자이크를 해놨지만 원래는 이렇게 우리 프로젝트의 Oauth API Clinent_Id 가 잘 들어가있는 상태여야 한다.

 

 

 

왜 발생했으며 어떻게 해결했나 ?

서버단에서는 도저히 원인을 알아낼 수가 없어서 프론드 쪽 환경변수 로직을 한번 살펴봤는데 ..

.env 파일은 최상위 루트에 위치해야 하는데 환경변수를 관리하는 common.js 내부에서 잘못된 경로를 가리키고 있는 것을 발견했다.

그래서 아래의 그림과 같이 경로를 올바르게 수정해주니 잘 동작하는걸 확인할 수 있었다. 😓

webpack/common.js 내부 로직

 

 

 

현재 GitHub-Action 을 사용해 자동배포를 하고있는데, /FE (최상위 루트 디렉토리) 를 기준으로 배포가 진행되기 때문에 Setting .env

부분이 진행될 때 최상위 디렉토리에 .env 파일이 생성된다. 따라서 common.js 에 설정한 잘못된 경로는 Clinet-Id 를 읽어낼 수 없었기 때문에 undefined 가 발생한 것 !

name: react workflow

on:
  push:
    branches: [dev-FE]
  pull_request:
    branches: [dev-FE]
jobs:
  build:
    runs-on: ubuntu-20.04
    defaults:
      run:
        working-directory: ./FE # 기본 워킹 디렉토리 설정
    steps:
      - name: Checkout source code.
        uses: actions/checkout@v2

      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-
      - name: Setting .env
        env:
          OAUTH_URL_GITHUB: ${{ secrets.OAUTH_URL_GITHUB }}
          CLIENT_ID_GITHUB: ${{ secrets.CLIENT_ID_GITHUB }}
          BASE_URL: ${{ secrets.BASE_URL }}

        run: |
          echo "OAUTH_URL_GITHUB=$OAUTH_URL_GITHUB" >> .env
          echo "CLIENT_ID_GITHUB=$CLIENT_ID_GITHUB" >> .env
          echo "BASE_URL=$BASE_URL" >> .env
          cat .env
      - name: Install Dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: aws s3 cp --recursive --region ap-northeast-2 dist s3://issue-tracker-fe

      - name: CloudFront Invalidation
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_CLOUDFRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID }}

        run: aws cloudfront create-invalidation --distribution-id $AWS_CLOUDFRONT_ID --paths "/*" --region ap-northeast-2

 

 

배운 점

리액트 환경변수 파일인 .env 사용할 때 최상위 디렉토리에 위치시켜야 한다는 것은 처음 알았는데, 프론트 쪽도 어느정도 알고 있어야

개발이 수월하게 진행되는 것 같다고 느꼈다. 배포는 해도해도 아직 익숙치 않아서 배포 공부를 제대로 하고 싶은 마음이 굴뚝같다.