Netlify 구축 각도 MFE 소개 사용

이 시리즈는 Nx와 Netlify를 이용하여 마이크로 전단 체계 구조를 구축하고 배치하는 과정을 보여주는 데 목적을 둔다.
이 시리즈 문장

Netlify 구축 MFE 소개

Netlify에 원격 어플리케이션 구축 및 배포(출시 예정)

원격 어플리케이션과 대시보드 통합(출시 예정)

저희가 뭘 만들까요?
다음은 이 글들을 소개하고 우리가 구축하고자 하는 내용을 보여주는 짧은 영상이다.
이것은 매우 간단한 시스템으로 세 개의 독립적으로 배치된 응용 프로그램으로 구성되어 있는데 그 중 한 응용 프로그램은 다른 두 응용 프로그램을 하나의 완전한 시스템으로 구성하여 Module Federation의 장점을 충분히 이용했다.
우리는 다음과 같이 건설할 것이다.

로그인 애플리케이션

보류 중인 애플리케이션

대시보드 어플리케이션(위의 MFE와 결합됩니다!)

우리는 그것을 어떻게 건설할 것인가:

Nx의 MFE 생성기를 사용하여 각도

구조 구축

각 어플리케이션

을 구축할 때 Nx를 사용하여 개발자의 경험을 향상시킵니다.

대시보드 웹 페이지 구성에 연결된 응용 프로그램
Netlify

에 배포
마이크로 프런트엔드(MFE)가 무엇인지, Netlify가 무엇인지, 그리고 이런 상황에서 어떻게 사용하는지, 마지막으로 체계 구조를 완성할 응용 프로그램을 구축할 것입니다.우리 뛰어들어가자!

MFE란?
간단히 말해, 마이크로프런트엔드 아키텍처는 여러 개의 독립적으로 배포된 프런트엔드 애플리케이션을 하나의 애플리케이션으로 결합하는 것입니다.
이것은 여러 개발팀 조직이 자신의 응용 프로그램에 전념할 수 있도록 하는 장면에서 이 점을 설명하고 응용 프로그램의 방향과 발표 시간표에 더욱 많은 자율권을 가지도록 하는 데 도움이 된다.그리고 나서 다른 팀들은 이 프로그램을 쉽게 사용할 수 있다.
그것은 마치 슈퍼 충전의 iFrame과 같지만, 여행 중에 더욱 많은 안전성과 장점이 있다.
주: 더 전면적인 정의를 알고 싶으면 micro-frontends.org를 방문하여 더 많은 내용을 읽을 수 있습니다.

Netlify 란 무엇입니까?
그들 자신의 말로는 Netlify는 생산성을 높일 수 있는 웹 개발 플랫폼이다.그것은 자동화 현대 네트워크 프로젝트에 사용되는 일체화 플랫폼이다.그것은 위탁 관리 인프라 시설, CI, CD 파이프를 하나의 작업 흐름으로 교체함으로써 이 점을 실현한다.새 항목을 등록하고 GitHub 저장소로 가리키면 Netlify에서build 명령과 파일을 생성하는 출력 위치를 알려주기 쉽습니다.나머지는 Netlify 에서 처리합니다.
문외한이라면, JAMstack 사이트를 네트워크에 더욱 효율적으로 배치할 수 있습니다.그것이 가져온 많은 이점은 본문의 범위를 넘어섰다.예를 들어 고급 CDN의 테두리 네트워크를 사용하면 전 세계 캐시를 효력을 상실함으로써 사이트의 정확한 버전과 최신 버전을 확보하고 같은 플랫폼에서 응용 프로그램과 함께 서버 기능이 없고 강력한 통합을 배치할 수 있다.그들의 site를 보면 그들이 제공한 서비스에 대해 더 많은 것을 알 수 있다.
우리는 그들의 플랫폼을 사용하여 우리의 마이크로 전방 응용 프로그램을 배치할 것이다. 왜냐하면 그들은 본질적으로 배치를 매우 간단하게 하기 때문이다.

Nx MFE 작업공간 설정
모듈과 결합된 웹 패키지 의존 관계를 더욱 잘 해결할 수 있기 때문에, 우리가 시작하기 전에, 당신이 설치되어 있는지 확인하십시오. Yarn
먼저 빈 Nx 작업공간을 만듭니다.

npx create-nx-workspace@latest mfe-netlify --preset=empty --no-nxCloud --packageManager=yarn

이렇게 하면 이름이 mfe-netlify인 새 폴더에 새 Nx 작업공간이 생성됩니다.실행 cd mfe-netlify 이 폴더에 들어가면 Git 저장소가 만들어진 것을 볼 수 있습니다.
다음에 우리는 Official Angular Plugin for Nx를 우리의 작업 구역에 추가할 것이다.

yarn add @nrwl/angular 

저장소에 제출합니다.

git commit -am “chore: add nrwl angular dep” 

그런 다음 로컬 저장소를 GitHub 계정으로 푸시해야 합니다.
주의: 당신은 여기서 어떻게 이 점을 할 수 있는지 읽을 수 있습니다: https://docs.github.com/en/github/importing-your-projects-to-github/importing-source-code-to-github/adding-an-existing-project-to-github-using-the-command-line
이 문서의 마지막 단계는 Netlify 계정을 준비하는 것입니다.
You can view a gif here(직접 업로드를 차단하는 개발 인증)
이것은 우리에게 해결 방안을 구축하고 배치하기에 좋은 곳을 제공할 것이다.Netlify 계정이 없는 경우 다음 지침을 따르십시오.

이동 https://app.netlify.com/

GitHub로 로그인

화면의 지침에 따라 시작 양식

을 작성합니다.

양식을 제출하고 아래Skip this step for now를 클릭하세요.

준비 다 됐어!

다음은요?
우리는 현재 마이크로 프런트엔드 구조에서 모든 응용 프로그램을 구축하고 배치하기에 매우 적합하다.우리는 Nx 작업 구역, GitHub 메모리 라이브러리, Netlify 계정이 있는데, 이 모든 것들이 신기한 일들을 일으킬 준비가 되어 있다.
이 시리즈의 다음 글은 MFE 준비된 계기판 프로그램을 구축하고 Netlify에 배치하는 방법을 중점적으로 소개할 것이다.게시할 때 알림을 받을 수 있도록 저희 블로그와 트위터 페이지를 주의 깊게 살펴보십시오.너는 아래에서 이 링크들을 찾을 수 있다.
블로그: https://blog.nrwl.io/
NxDevTools의 Twitter:
Nrwl의 Twitter:
콜럼버스 페리의 트위터: