아주아주 오랜만의 포스팅!
더 이상 포스팅을 미루면 블로그를 접은 느낌이 들 거 같아서, 아직 살아있다는 생존 신고 포스팅.
이번 포스팅은, 저번에 serverless-nextjs 프로젝트를 임시로 스테이지 별로 배포하는 방법에서
커맨드를 사용한 조금이나마 더 나은 방법을 적어보려 합니다.

참고) 이전 글.
/serverless-nextjs/

1. 환경변수

기본적으로 serverless-nextjs 에서는 serverless.yml 파일에 ${env.XXX} 이렇게 환경 변수를 선언할 수 있는데요. 커맨드를 입력할때 'env XXX=test next' 이렇게 입력하면 위 ${env.XXX} 부분이 'test'로 동작한답니다.

// serverless.yml
falsyExempleServerlessNext:
  component: "@sls-next/serverless-component@3.6.0"
  inputs:
    roleArn: "arn:aws:iam::123456789012:role/falsy-exemple-role"
    bucketName: "falsy-exemple-s3"
    cloudfront:
      distributionId: ABCDEFG..
    name:
      defaultLambda: "falsy-exemple-default-lambda"
      apiLambda: "falsy-exemple-api-lambda"

만약 기존에 위와 같이 있다면, dev와 prod로 나뉘어야 하는 부분을 환경 변수로 변경해줍니다.

// serverless.yml
falsyExempleServerlessNext:
  component: "@sls-next/serverless-component@3.6.0"
  inputs:
    roleArn: "arn:aws:iam::123456789012:role/falsy-exemple-role"
    bucketName: "${env.BUCKET_NAME}"
    cloudfront:
      distributionId: ${env.CROUDFRONT_ID}
    name:
      defaultLambda: "${env.DEFAULT_LAMBDA}"
      apiLambda: "${env.API_LAMBDA}"

위와 같이 레이어에 따라 변경되어야 하는 부분을 변수로 만들어줍니다.

사실 위와 같은 변수 선언이 예쁘게?? 익숙하게?? 보이지 않는데요.
예를 들면 bucketName을 'falsy-exemple-s3-${env.STAGE}' 이렇게 작성하면 더 좋을 거 같은데.
글을 작성하는 시점(v3.6.0)까지는 위와 같이 입력하면 앞에 스트링은 무시되고 ${env.STAGE}만 입력되는 거 같아요.

// ex.
bucketName: "falsy-exemple-s3-${env.STAGE}" // $ env STAGE=dev ...
=> bucketName: "dev"

2. 커맨드

이제 배포 커맨드를 입력할때 환경 변수로 선언한 애들을 모두 입력해주면 된답니다.

$ env BUCKET_NAME=falsy-exemple-s3-dev CROUDFRONT_ID=aaaaa ... npx serverless

3. 간단히 하기

그런데 이렇게 하면 너무 커맨드가 길어져서 불편한데요. 많은 방법들이 있겠지만,
한 예로 'env-cmd' 라이브러리를 쓰면 조금 편하게 설정할 수 있답니다.
https://www.npmjs.com/package/env-cmd

// env-cmd 설치
$ npm install env-cmd

// .env-cmdrc 파일 생성
{
  "dev": {
    "BUCKET": "falsy-exemple-s3-dev",
    "CROUDFRONT_ID": "aaaaa",
    "DEFAULT_LAMBDA": "falsy-exemple-default-lambda-dev",
    "API_LAMBDA": "falsy-exemple-api-lambda-dev"
  },
  "prod": {
    "BUCKET": "falsy-exemple-s3-prod",
    "CROUDFRONT_ID": "bbbbb",
    "DEFAULT_LAMBDA": "falsy-exemple-default-lambda-prod",
    "API_LAMBDA": "falsy-exemple-api-lambda-prod"
  }
}

4. 커맨드

// dev 배포
$ env-cmd -e dev npx serverless
// prod 배포
$ env-cmd -e prod npx serverless

5. 끝으로

이전 글에도 적었던 내용이긴 한데, 만약 한번 배포를 해서 .serverless, .serverless_nextjs 디렉토리가 생선된 상태면 수정된 serverless.yml 파일로 배포가 되지 않을 수 있어요.
그래서 다른 스테이지로 배포할 땐 .serverless, .serverless_nextjs 를 지워주고 다시 배포해야 합니다.
package.json 파일을 예로 들면

// package.json
{
  ...

  "scripts": {
    "start": "next",
    "clear": "rm -r .serverless && rm -r .serverless_nextjs",
    "deploy-dev": "env-cmd -e dev npx serverless",
    "reDeploy-dev": "npm run clear && npm run deploy-dev",
    "deploy-prod": "env-cmd -e prod npx serverless",
    "reDeploy-prod": "npm run clear && npm run deploy-prod"
  }

  ...
}

위와 같이 설정하였다면, 처음 배포할 때는 '$ npm run deploy-dev'로 하고 다음부터는 '$ npm run reDeploy-dev' 로 하면 되겠죠?

끝