[소소한 개발 일지] serverless-nextjs를 통해 개발, 상용 스테이지로 나눠서 배포하기

Explanation

2021-12-12
오랜만에 보니… 뭔가 굉장히… 민망한 글이었네요..
serverless-nextjs 프로젝트를 조금 더 나은 방법으로 스테이지로 나누는 글을 새로 작성해서,
아래의 링크를 통해 참고해보시면 더 좋을 것 같습니다!
 
https://falsy.me/serverless-nextjs-%ed%94%84%eb%a1%9c%ec%a0%9d%ed%8a%b8-%ec%8a%a4%ed%85%8c%ec%9d%b4%ec%a7%80-%eb%b3%84%eb%a1%9c-%eb%82%98%eb%88%84%ec%96%b4-%ec%84%a4%ec%a0%95-%eb%b0%b0%ed%8f%ac%ed%95%98%ea%b8%b0/

어느새 2021년이 와버렸습니다..
코로나가 장기화되고 있는데 모두 건강 잘 챙기시고.. 새해 복 많이 받으세요!

오늘은 짧고 간단하게, serverless-nextjs을 통해 development, production과 같이 스테이지를 나누어서 배포하는 방법에 대해 적어 보려고 합니다.
(샅샅이 찾아보진 않았지만 serverless-nextjs에서는 아직 스테이지 관리에 대해 처리가 안되어 있는 거 같아요.)

1. 문제의 상황

간단하게 아래처럼,

위와 같이 작성하고 ‘$ npx serverless’ 커맨드를 입력하면 dev 스테이지로 배포가 되겠죠?? 그러고 나서!

만약에 이렇게 env 파일을 수정하고 다시 ‘$ npx serverless’ 커맨드를 입력하면!
dev 환경의 배포는 유지되고 prod 환경으로 새롭게 배포가 되길 기대했지만!
dev 환경이 삭제되고 prod 환경이 새로 배포가 된답니다.

2. 해결

사실 해결했다기 보단…. 임시 방편입니다.

.env 환경변수를 수정하고 다시 배포했을때 이전 배포가 사라지는 건 이전에 배포할때 .serverless 디렉토리와 .serverless_nextjs 디렉토리가 있어서 그렇거든요?
그래서 dev로 배포를 하고 prod를 배포할때는 .serverless, .serverless_nextjs 디렉토리를 삭제해주고 다시 배포해주면 정상적으로 두 개의 스테이지로 배포가 된답니다.

그래서 간단하게 package.json에 script로 추가하면 조금.. 더 편하게 사용할 수 있겠죠?

이렇게 해주면,
처음에 .serverless, .serverless_nextjs 디렉토리가 없을때는 ‘npx serverless’로 배포하고 그 다음부터는 env 파일을 수정하고 ‘npm run deploy’ 커맨드로 다시 배포할 수 있답니다.

Leave a Reply

  1. 구글지도원츄

    헉..댓글에 스크립트 주소를 넣으니깐 확 사라지네요.. 이거 뭐 댓글 수정도 안되고 삭제도 안되네요ㅠㅠㅠ
    댓글 폭탄이 될듯합니다.. 죄송합니다~

    일단 하단에 제가 남긴 댓글 참고부분입니다.. 구글 지도 API 사용관련 예제사이트입니다..
    https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=ko

    자바스크립트+HTML 부분을 누르시면 해당예제의 하단에 스크립트부분이 있습니다.
    API KEY는 아래와 같이 등록하면 되구요.. 예제사이트에서 callback=initMap 이부분이 initMap부분에
    Cheolguso님이 initialize를 등록해주심 됩니다..

    그다음… 마지막은 아래 댓글과 같습니다..

    • 안녕하세요. ‘구글지도원츄’님
      제가 게을러서 확인이 너무 늦었네요. 죄송합니다.
      이렇게 친절히 문제의 상황과 그에 따른 해결방법까지 적어주셔서 너무 감사드립니다!!
      말씀해주신 부분은 포스트에 추가 기입하도록 하겠습니다 :)

  2. 구글지도원츄

    아래 질문댓글을 달았는데. 하다보니 성공했네요^^.. 혹시나 찾는분들을 위해 댓글을 남깁니다.
    Cheolguso님이 만들어주신 예제 중에 대신 API KEY를 기입할 수 있는 스크립트로 변경합니다..

    YOUR_API_KEY에 발급받은 API 키를 기입하시면 되며 LOAD_MAP_FUNCTION 이 부분이 지도를 불러오는 부분입니다.
    여기에 해당함수를 기입하시면 됩니다.. 즉 initialize를 기입하시면됩니다..
    initialize는 Cheolguso님이 만들어주신 예제의 지도로드함수입니다…

    마지막으로 google.maps.event.addDomListener(window, ‘load’, initialize); 이부분을 주석처리 해주시면..
    API KEY를 이용하여 지도를 로드할 수 있습니다…

  3. 구글지도원츄

    안녕하세요. 혹시 api key는 어디에 기입하는지 아시나요? node js 기반으로 웹앱을 만들고있는데요.
    현재 이 예제와 같이 했더니 경고문구가 뜨네요.. 근데 지도 로드는 되네요.. ㅎㅎ;

  4. 열심히하는일학년

    안녕하세요 이번에 API 처음 배우는데 지도까지 불렀는데 마커를 추가를하면 데이터베이스엔 저장이되는데 페이지를 새로고침할경우 마커가 안뜨더라고요ㅠㅠㅠ이거 왜이럴까요?

    • 안녕하세요 일학년님,
      도움이 되어 드리고 싶지만.. 말씀하신 글 만으로는 어떠한 상황인지 알 수가 없네요 ㅠ

  5. featur

    지나가는 나그네 입니다.

    깔끔하게 정리된 글 잘 보았습니다.

    2. 구글맵 자바스크립트 API

    2-1. Javascript API

    예제의 맨 밑 jquery end 에서 ); 가 빠진것 같습니다.

    • 안녕하세요! 이런.. 한참을 모르고 있었네요.. 감사합니다 :D

  6. sh

    구글맵 API를 사용하고싶어서 찾아보다가 좋은 글이 있어서 해볼려고 하는데요
    그 서버에 API를 올리고 싶어서 그런데요
    sudo nano /var/www/ DOCTYPE.html 이렇게 해서 거기다가 소스를 쳐주면 되는건가요?
    sudo nano /var/www/ funtions.php

    구글맵 테그랑 자바스크립트는.. 어떤 파일에 코딩을 해줘야할까요??? API도 처음이고 라즈베리도 처음이라 모르는게 너무 많아서요… 죄송합니다 ㅠㅠ

    • 안녕하세요?! 처음에 글을 단순히 메모용으로 적다보니 너무 밑도 끝도 없네요…
      우선… nano나 vi로 추가하실 html 또는 php 파일에 접근하셔서
      ( 참고 – 본문 마지막 [댓글에는 태그가 적히지 않아서 본문 가장 아래에 추가하였습니다] )
      이런 구조로 작성하시면 됩니다 ~
      제가 댓글 남겨주신 부분을 잘 이해하고 맞게 답을 드린건지 잘 모르겠네요 ㅠ

  7. vomvoru

    id=”google-map” >> id=”google_map”
    댓글 수정이 안되네요? ㅠㅠ 댓그에 태그형식이 있으면 없어지구요 ㅠㅠ
    이거 이걸로 고쳐주세요. 사이트 디자인에 영감을 많이 얻고 갑니다.

    • 이런… 큰 실수가 있었네요. 이렇게 문제점도 남겨주시고,
      부족함이 많은 사이트임에도 좋게 봐주셔서 감사합니다 :D