env 설정

API 요청을 보낼 시 사용되는 Axios의 baseUrl을 예로 들면서 환경변수의 설정 방법을 보도록 하자.

우리 서비스에서는 Nuxt 플러그인에서 axios.interceptors를 통해 API 요청을 할 baseUrl을 미리 설정해 둔다. 이 때의 baseUrl은 로컬에서는 .env에서 세팅한다.

# .env
API_BASE_URL=https://api-base-url.exam.ple

이를 nuxt.config.js에서 process.env를 통해 접근하여 Nuxt 어플리케이션 내에서 공개적으로 사용할 수 있도록 publicRuntimeConfig 속성을 통해 환경 변수로 설정한다.

// nuxt.config.ts
export default {
	publicRuntimeConfig: {
    API_BASE_URL: process.env.API_BASE_URL,
  },
}

// plugin/api.ts

export default function ({ $config }: Context, inject: any): void {
	const apiInstance = axios.create({
		baseURL: $config.API_BASE_URL
	})

	inject('apiInstance', apiInstance)
}

로컬이 아닌 배포 환경에서는 .env 파일이 .gitignore에 설정되어 있으므로 쿠버네티스에서도 환경변수에 접근할 수 있도록 yaml 파일에 설정해 준다.

# deploy/config.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: example-config
  namespace: default
data:
  API_BASE_URL: <https://api-base-url.exam.ple>

Cypress 테스트 코드에서 사용할 env

예를 들어 직접 API 요청을 테스트하고 싶은 경우를 보자. API 요청을 보내고 싶을 때는 요청할 API의 baseUrl을 설정해 주어야 한다. 이는 다음과 같이 cypress.config.ts의 setupNodeEvents() 함수를 사용하여 테스트 코드 내에서 직접 사용할 수 있다.

// cypress.config.ts
import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      config.env.API_BASE_URL = '<https://api-base-url.exam.ple>'
			
			return config
		}
})

// cypress/e2e/login.cy.ts

describe('[로그인] 사용자는 로그인 페이지에서 로그인할 수 있습니다.', () => {
	it('[로그인] API 테스트', () => {
	  cy.visit('/login')
	  cy.request('POST', `${Cypress.env('API_BASE_URL')}/login`, {
	    email: '[email protected]',
	    password: 'example123!',
	  })
	})
})

통합 UI 테스트에서 사용할 env

하지만 늘 테스트 코드에서 미리 설정한 환경 변수를 사용할 수 없는 경우도 있다. 사용자 동작을 테스트하는 코드의 경우가 그 사례이다.

예를 들어보자. 버튼을 클릭하였을 때 API를 요청하고, 만약 요청이 성공하였으면 다른 페이지로 이동하는 테스트가 있다고 하자.

// cypress/e2e/login.cy.ts
describe('[로그인] 사용자는 로그인 페이지에서 로그인할 수 있습니다.', () => {
	it('[로그인] 로그인을 시도하여 성공하면 메인 페이지로 넘어갑니다.', () => {
    cy.visit('/login')
    cy.get('[data-cy="email"]').type('[email protected]')
    cy.get('[data-cy="password"]').type('example123!')
    cy.get('[data-cy="submit"]').click()
    cy.url().should('include', '/main')
  })
})

이 테스트 코드에는 Cypress config 파일에서 설정된 env를 사용하는 코드가 없다. 단지 직접 해당 어플리케이션에 접속하여 로그인 제출 버튼을 클릭하는 동작만 있을 뿐이다. 그러므로 이 땐 Cypress에서 설정된 환경변수가 아닌 어플리케이션 자체에 설정된 baseUrl 환경변수를 가져와 사용하게 된다.