Written by nodejs-style
on 

FullStack 앱에 Netlify 사용

FullStack 앱에 Netlify 사용

반응형

Netlify를 사용하는 것은 모든 개발자에게 고유한 경험입니다. 거의 안내가 필요 없어요. 클릭 몇 번으로 GitHub, GitLab 또는 BitBucket 저장소를 연결하고 한 번에 CI/CD 및 호스팅 기능을 구성할 수 있습니다.

또한 트래픽이 적은 웹 사이트에 충분한 넉넉한 무료 계층을 제공합니다.

Netlify는 고유합니다.

Netlify를 사용할 때 백엔드를 어떻게 연결할 수 있는지 궁금하신 분들도 계실 것입니다. Netlify는 Serverless 백엔드도 지원합니다.

이제 Netlify를 사용하여 전체 스택 애플리케이션을 호스팅하는 방법을 살펴보겠습니다.

시작

우선 다음과 같은 것들이 있어야 시험해 볼 수 있습니다.

Git 저장소에 게시할 수 있는 간단한 프런트엔드 애플리케이션입니다. 필요한 경우 이 GitHub 저장소를 사용할 수 있습니다.

Netlify 계정.

프런트 엔드가 Git 저장소에서 준비되면 Netlify 계정으로 이동하여 배포를 시작할 수 있습니다.

참고: 백엔드 및 프런트 엔드 모두에 Monrepo를 사용하는 경우 빌드 경로를 사용하여 CI/CD를 적절히 구성하십시오.

1단계: Git에서 새 사이트 추가

Netlify 계정에 로그인한 후 "New site from Git" 버튼을 클릭합니다.

리포지토리 선택

그런 다음 GitHub, Bitbucket 또는 GitLab 계정에 액세스하고 목록에서 프런트엔드 응용 프로그램 저장소를 선택할 수 있습니다.

리포지토리와 Netlify를 연결하는 브리지가 완료되면 기본 설정이 거의 완료됩니다.

분기 선택

그런 다음 배포할 분기를 선택할 수 있습니다. 일반적으로 주 가지가 선택됩니다.

2단계: 프런트 엔드 배포를 구성합니다.

애플리케이션의 프런트 엔드를 배포하기 전에 빌드 명령을 구성해야 합니다. 예를 들어 프로젝트가 JavaScript 기반인 경우 build 명령은 npm run build와 유사합니다.

그런 다음 사이트 배포 버튼을 클릭하여 배포를 완료할 수 있습니다. 그리고 배포된 응용 프로그램의 URL은 개요 탭에서 찾을 수 있습니다.

3단계: API 배포

단순 노드를 만들었습니다.데모용 JS API. 이제 Netlify를 사용하여 어떻게 구현할 수 있는지 알아보겠습니다.

이 GitHub 저장소의 백엔드 프로젝트를 보면 netlify.toml이라는 파일이 있습니다.

또한 serverless-http 라이브러리와 netlif-cli를 사용하여 이 애플리케이션을 생성했으며 Netlifify dev 명령을 사용하여 실행할 수 있습니다.

// Installing serverless http library npm install serverless-http // Installing netlify cli npm install netlify-cli -g

그리고 프런트엔드와 동일한 절차를 따라 넷라이파이에 백엔드를 배치했습니다.

4단계: 프록시 구성

이제 Netlify에서 제공하는 URL로 이동하여 응용 프로그램 작업을 볼 수 있습니다.

그러나 자세히 모니터링하면 응용 프로그램의 백엔드 URL이 여전히 프로젝트 폴더 내의 디렉터리를 가리키고 있음을 알 수 있습니다.

이를 위해 다음 줄을 사용하여 netlify.toml 파일을 수정해야 합니다.

js [[redirects]] to=”/.netlify/functions/api:splat” from=”/*” status=200

이 설정은 모든 API 요청을 지정된 URL로 리디렉션합니다. ![](https://miro.medium.com/max/1248/1*7VrhFypNSOPl2jhOV6jotw.png) # 5단계: 환경 변수 구성 마지막 단계로 Netlify를 사용하여 애플리케이션의 모든 환경 변수를 구성하여 보안을 강화할 것을 권장합니다. 사이트 설정 > 빌드로 이동하여 사이트 설정 환경 변수를 편집할 수 있습니다. ![](https://miro.medium.com/max/1248/1*sEuJ_wlLtN7sOtDSd8iaxA.png) 팀 설정 > 사이트 > 글로벌 사이트 설정 > 공유 환경 변수로 이동하여 팀 레벨 환경 변수를 찾을 수 있습니다. ![](https://miro.medium.com/max/1248/1*zfz740gfc37CmWvKdm4xyw.png) 바로 그거야. 이 기사에서 Netlify를 사용하여 풀 스택 애플리케이션을 호스팅하는 방법에 대해 잘 이해하셨기를 바랍니다. 읽어줘서 고마워!!! # 건설하세요. 비트는 독립적으로 작성, 버전 변경 및 유지 관리되는 구성 요소를 사용하여 진정한 모듈식 응용 프로그램을 만들 수 있는 확장 가능한 도구입니다. 모듈식 앱을 구축하는 데 사용 # 더 배우기

from http://issue-disk.tistory.com/517 by ccl(A) rewrite - 2021-07-28 04:26:22