[미니 프로젝트] 25JS Ideas - 프로젝트 배포기 with Netlify

Seungrok Yoon (Lethe)·2023년 7월 10일

Frontend 배포 environment variable netlify netlify-serverless function

[FE] 프로젝트 기록과 회고

목록 보기

5/7

프로젝트 배포하기.

현재 개발중인 25 JS project ideas 프로젝트를 Netlify 로 배포 해보기로 결정했습니다. Netlify를 배포 플랫폼으로 선택한 이유는 다음과 같습니다.

Netlify에 등록한 환경변수를 빌드 시 주입하는 방법을 통해 프론트단에서 API 키를 숨기기 위해
AWS보다 배포 과정에 대한 기술적 진입장벽이 낮아서 사이드 프로젝트용으로 적당하기 때문
과금 정책이 관대해서 무료 계정으로도 필수적인 기능을 사용 가능하기 때문에

처음 Netlify서비스에 진입하면, Git에서 프로젝트를 가져와 배포할 수 있는 메뉴가 있습니다. Import from Git을 선택해줍니다.

저는 깃헙에 있는 레포지토리를 배포할 예정이니, Deploy with GitHub 버튼을 클릭합니다.

Netlify 가 처음이라면, 깃헙과 Netlify를 연결하게 됩니다. 어떤 계정에 Netlify를 설치할 지 선택해 줍니다. 저는 제 개인계정에 Netlify 를 설치하겠습니다.

연결할 깃헙 계정을 선택했다면, 이후에는 배포할 프로젝트 레포지토리를 선택하게 됩니다. 저는 맨 위에 있는 25-vanilla-javascript-projects를 선택했습니다.

배포를 하고 나서부터는, pull request 를 생성할 때마다, 배포 테스트를 진행해줍니다.

배포 후 빌드 환경변수를 추가하여 API 키를 안전하게 관리하기

배포 시에 Netlify 서비스에서 설정해 주었던 API Key를 사용하도록 코드를 변경하지 않고, 그대로 랜덤 명언 생성기 프로젝트를 머지했습니다.

그 결과는 아래와 같습니다. 배포 사이트에서 API Key를 찾지 못해서 에러가 난 것이지요.

해결법은 간단합니다. 코드가 Netlify 에서 설정한 API Key 환경변수를 찾을 수 있도록 코드를 변경해주면 되지요.

Netlify의 환경변수 활용은 기록할 만한 사안이기에, 이슈를 생성 후에 관련 작업을 진행하도록 하지요.

이슈를 생성하는 것은 귀찮지만 도움이 된다

빌드 환경변수 추가하기

환경 변수 생성 관련 Netlify 문서
https://docs.netlify.com/environment-variables/get-started/#create-environment-variables

Site configuration ->Environment variables 메뉴로 이동을 하면 환경 변수를 추가할 수 있습니다.

Netlify에서는 환경변수에 Scope를 설정할 수 있습니다. 이는 우리가 자바스크립트에서 알고 있는 변수 스코프와 거의 동일한 개념으로, 등록한 환경변수에 접근할 수 있는 범위를 한정짓는 옵션입니다. 우리는 이에 대해 딱히 계획이 없었으니, 모든 스코프에서 접근 가능한 환경변수를 생성해봅시다.

Scopes enable you to limit environment variables so that they can only be accessed by builds, functions, other runtime features, and/or post processing.

출처: https://www.netlify.com/blog/scopes-and-contextual-values-for-environment-variables-ga/

이와 더불어, Different value for each deploy context 옵션을 살펴봅시다. 이것은 동일한 환경변수명에 배포 단계별로 다른 값을 대입할 수 있는 옵션입니다.

가령 dev , stage, prod 세 단계로 배포를 진행하는 경우, 각 단계에서 사용하는 API가 다른 경우에 유용할 듯 싶습니다. 하지만 지금의 우리에게는 필요없는 기능이니, 모든 배포과정에서 동일한 값을 사용하도록 옵션을 선택해주죠.

자 이제 환경변수 등록이 완료되었습니다. 하지만 주의해야 해요. 이 환경변수는 어디서나 process.evn.환경변수명 으로 접근할 수 있는 값이 아니거든요. 저는 이것을 깨닫기 전까지 매우 헤맸었습니다 ㅎㅎ...

우리는 API키를 환경변수로 등록을 했었죠. 우리가 코드를 실행할 때 활용하기 위해서는 serverless function이라는 것을 별도로 작성해서 사용해야 해요.

Netlify로 로컬 개발환경 구축하기

로컬 개발환경에서도 Netlify 환경변수에 접근해 API 호출을 하고 싶다!

이전에 사용하던 Live server Extension은, 편리하지만 우리가 애써 설정해놓은 Netlify 환경변수를 로컬 개발환경에서 사용할 수 없기에 불편함이 있습니다.

그래서 Netlify CLI를 통해 설정한 dev 환경에서 로컬개발을 진행해보려 합니다.

Netlify CLI 설치

yarn add netlify-cli

package.json에서

yarn netlify init
yarn netlify link

저 기 저 밑에 Injected .env file env var: API_NINJAS_KEY가 보이시나요? 저게 바로 우리가 Netlify 대시보드에서 등록했던 API 키잖아요! 우리 코드가 이제 저 환경 변수에 접근할 수 있도록 serverless function을 작성해봅시다.

Netlify Serverless function 활용해보기

dependencies 설치
dotenv

netlify.toml 추가

[functions]
  directory = "netlify/functions"

본격적으로 환경변수를 서버단에서 접근하여...

https://docs.netlify.com/functions/environment-variables/#access-environment-variables

https://www.freecodecamp.org/news/how-to-use-environment-variables-in-vanillajs/

https://www.freecodecamp.org/news/hide-api-keys-in-frontend-apps-using-netlify-functions/

https://stackoverflow.com/questions/66229878/fetch-api-giving-404-not-found-error-in-netlify

https://medium.com/better-practices/serverless-functions-the-fast-way-43d6128ff8d5

상대경로 관련 이슈

문제상황: 상대경로 지정된 파일을 찾지 못함

yarn netlify dev 명령어를 사용하여, dev환경에서 로컬 개발을 시도했습니다.

그런데 projects 하위디렉토리에 위치한 각각의 프로젝트 디렉토리에서 js, css 파일이 404 에러를 뿜으며 로드되지 못하고 있는 모습을 발견했습니다.

확인을 해보니, localhost:8888/projects/colors/style.css가 아니라, localhost:8888/projects/style.css 로 리소스를 요청하고 있더라구요. JS파일도 마찬가지로, index.html이 존재하는 프로젝트 디렉토리가 아닌 상위 디렉토리에서 파일을 계속 요청하고 있었습니다.

프로젝트 디렉토리 구조

Live Server에서도, 배포된 사이트에서도 문제가 없이 잘 동작했는데, 대체 왜이러는 걸까요?

원인파악

문제 발생의 원인은 루트 디렉토리의 html파일에서 사용한 <a> 의 경로지정 방식 때문이었습니다. 아래 첨부한 코드에서 확인할 수 있듯이 ,저는 <a href="projects/colors">와 같이, 디렉토리를 이동경로로 지정해줬거든요.

<a href="projects/colors/index.html"> 명확하게 index 파일을 지정해서 이동을 해주면 CSS파일도 정상적으로 요청해오는 모습을 확인했기에, 이 부분이 어딘가 잘못되었다는 것을 알 수 있었습니다.

//윗 부분은 생략
  <body>
    <main class="App">
      <h1>25 Vannilla JS Projects</h1>
      <h2>click an image card to navigate our page</h2>
      <hr />
      <div class="card-list">
        <a href="projects/colors">
          <div class="project-card">Colors</div>
        </a>
        <a href="./projects/hexcolors">
          <div class="project-card">CSS Gradient Generator</div>
        </a>
        <a href="./projects/random-quotes">
          <div class="project-card">Random Quotes</div>
        </a>
      </div>
    </main>
    <script src="./main.js" type="module"></script>
  </body>
</html>

netlify dev 이용 시에 trailing slash가 없는 경우엔 상대경로 CSS파일 경로를 제대로 파악하지 못한다

하지만 trailing slash를 추가하니 귀신같이 제대로 상대경로 CSS파일 경로를 파악한다

결국 netlify 커뮤니티에 질문을 남기다

https://answers.netlify.com/t/i-think-netlify-dev-has-a-different-path-parse-policy/96415

배포 결과

이제 live server와는 결별할 수 있습니다. 고생해서 https방식을 적용하긴 했지만, 확실히 `netlify dev 강력하고 편리합니다
API Key에 대한 걱정을 아예 놓을 수 있게 되었습니다. 확인해보니 배포된 프로젝트도 serverless function과 환경변수를 통해 데이터를 잘 받아오고 있었습니다.

느낀 점

공식 문서는 항상 옳다

어떤 기술이든 공식 문서를 찬찬히 읽어 보는 일은 필수입니다. 개발을 처음 공부할 때는 공식 문서에 쓰여 있는 말이 해석은 되어도 이해가 가지 않는 경우가 많거든요. 그래서 공식문서를 보는 것에 두려움이 있었어요. 그런데 실무도 한 차례 겪어보고 꾸준히 공부하니 개발 용어들과 개념이 알게 모르게 쌓였나 봅니다. 이제는 공식문서를 보는 것이 어렵긴 해도 두렵지는 않아요 ㅎㅎ.

다음 프로젝트는 AWS를 활용하여 배포해보자

참고