Nx .env 설정 (feat.github actions)

github actions로 Nx 프로젝트를 build하고, Docker 이미지 push까지 다 했는데 문제가 발생했다.
개발용 env파일이랑 상용 env파일을 구별하지 못하는것이었다!

이전 블로그 보러가기

---

Nx 에서 Next.js의 앱을 각각의 env에 맞게 세팅하는법을 하루종일 검색 & 테스트 해본 결과 알아냈다! 😭

일단 지금 레포지토리 구조는,
맨 위의 root에 .env.development 와 .env.production 파일이 있다.
원래는 .env 와 .env.local 이었는데 local 이 무조건 우선시된다는 어떤 글을 보고.. 저렇게 바꿨다.

step1

현재의 nx프로젝트는 맨위 root의 nx.json 으로 실행이 된다.
프로젝트를 nx dev 앱이름 으로 실행하면 아래의 코드중 buildTargetName이 실행이 된다!

{
      "plugin": "@nx/next/plugin",
      "options": {
        "startTargetName": "start",
        "buildTargetName": "build",
        "devTargetName": "dev",
        "serveStaticTargetName": "serve-static"
      }
    },

그리고 nx에는 --configuration 으로 각 명령어 실행 시 config를 줄 수 있다.
configuration은 development 와 production 으로 정했다.

그러면 이제 각 apps 하위의 각각의 앱들의 project.json 에 해당 명령어가 실행될때의 configurations를 정의해줘야한다.

step2

각 앱들의 project.json에 아래와 같이 작성한다.

"targets": {
    "dev": {
      "configurations": {
        "development": {
          "envFiles": ["../../.env.development"]
        }
      },
      "defaultConfiguration": "development"
    },
    "start": {
      "configurations": {
        "production": {
          "envFiles": ["../../.env.production"]
        }
      },
      "defaultConfiguration": "production"
    },
    "build": {
      "configurations": {
        "development": {
          "envFiles": ["../../.env.development"]
        },
        "production": {
          "envFiles": ["../../.env.production"]
        }
      },
      "defaultConfiguration": "production"
    },

각 명령어를 실행할 때 configuration이 없으면 defaultConfiguration이 실행된다.

실제로 테스트해볼려면 nx build 앱이름 --configuration production 이런식으로 쓰면 된다!

step3

이제 github actions에도 변수로 해당 configuration 을 정의를 해줘야한다.
기존에 있던 이 항목에 --configuraion을 추가한다! 그리고 BUILD_ENV도 바꾼다.

env:
  BUILD_ENV: ${{ github.REF_NAME == 'prod' && 'production' || 'development' }}
  
  - name: Build affected projects
        run: |
          BASE_BRANCH=$(git rev-parse HEAD^)
          pnpm nx affected --target=build --base=$BASE_BRANCH --head=HEAD --parallel=3 --configuration=$BUILD_ENV
        env:
          NX_NO_CLOUD: true

그러면 현재 git branch가 dev면 development env가 보이고, branch가 prod면 production env가 보이게 된다!

하루동안 공부를 많이한것같아서 기분이 좋다~~~