모바일 애플리케이션 웹뷰에 사용되는 웹 콘텐츠의 터치 이벤트 사용과 소소한 팁
2019-03-09
serverless-nextjs 프로젝트 스테이지 별로 나누어 설정, 배포하기
2021-12-12
Explanation
아주아주 오랜만의 포스팅!
더 이상 포스팅을 미루면 블로그를 접은 느낌이 들 거 같아서, 아직 살아있다는 생존 신고 포스팅.
이번 포스팅은, 저번에 serverless-nextjs 프로젝트를 임시로 스테이지 별로 배포하는 방법에서
커맨드를 사용한 조금이나마 더 나은 방법을 적어보려 합니다.
참고) 이전 글.
https://falsy.me/serverless-nextjs/
기본적으로 serverless-nextjs 에서는 serverless.yml 파일에 ${env.XXX} 이렇게 환경 변수를 선언할 수 있는데요. 커맨드를 입력할때 ‘env XXX=test next’ 이렇게 입력하면 위 ${env.XXX} 부분이 ‘test’로 동작한답니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
// 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로 나뉘어야 하는 부분을 환경 변수로 변경해줍니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
// 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}만 입력되는 거 같아요.
|
1 2 3 |
// ex. bucketName: "falsy-exemple-s3-${env.STAGE}" // $ env STAGE=dev ... => bucketName: "dev" |
이제 배포 커맨드를 입력할때 환경 변수로 선언한 애들을 모두 입력해주면 된답니다.
|
1 |
$ env BUCKET_NAME=falsy-exemple-s3-dev CROUDFRONT_ID=aaaaa ... npx serverless |
그런데 이렇게 하면 너무 커맨드가 길어져서 불편한데요. 많은 방법들이 있겠지만,
한 예로 ‘env-cmd’ 라이브러리를 쓰면 조금 편하게 설정할 수 있답니다.
https://www.npmjs.com/package/env-cmd
|
1 2 |
// env-cmd 설치 $ npm install env-cmd |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// .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" } } |
|
1 2 3 4 |
// dev 배포 $ env-cmd -e dev npx serverless // prod 배포 $ env-cmd -e prod npx serverless |
이전 글에도 적었던 내용이긴 한데, 만약 한번 배포를 해서 .serverless, .serverless_nextjs 디렉토리가 생선된 상태면 수정된 serverless.yml 파일로 배포가 되지 않을 수 있어요.
그래서 다른 스테이지로 배포할 땐 .serverless, .serverless_nextjs 를 지워주고 다시 배포해야 합니다.
package.json 파일을 예로 들면
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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’ 로 하면 되겠죠?
