Azure static webapps 서비스

 

(개인적인 의견)

Azure static webapps 서비스가 저렴하다는 장점이 있으나

기존 웹앱 서비스 플랜이 있다면, static webapp 한개 더 추가하는게 더 나을 듯,

 

 

소개자료

https://azure.microsoft.com/ko-kr/blog/develop-production-scale-modern-web-apps-quickly-with-azure-static-web-apps/

 

실습자료

출처: <https://docs.microsoft.com/ko-kr/learn/paths/azure-static-web-apps/>

 

 

 

소스 코드에서 글로벌 고가용성에 이르는 간소화된 풀 스택 개발을 제공하는 최신 웹앱 서비스

• 로컬 개발에서 CI/CD용 GitHub 기본 워크플로우에 이르는 생산성
• 정적 컨텐츠에 대한 글로벌 가용성 관리
• 서버리스 API를 위한 동적 확장
• 사용자 지정 도메인 구성, 인증 및 권한 부여를 포함한 관리 간소화
• 원활한 개발자 환경 및 CI/CD
• Visual Studio Code 확장을 포함하는 맞춤형 개발자 환경

 

 

 

React	페이스북이 만든 사용자 인터페이스(UI) 개발을 위한 라이브러리 , 자바스크립트 기반   UI 컴포넌트를 만들어 캡슐화를 시켜주기 때문에 재사용성이 높고 한가지 작업만 하기 때문에 단순하고, 다양한 자바스크립트 프레임워크나 라이브러리와 함께 사용도 가능   DOM 요소 하나하나를 직접 관리하는 것은 복잡, 브라우저 연산 up, 효율 떨어짐 -> React Virtual DOM을 사용 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달 연산비용 down, 빠른 렌더링
npm	Node package manager node.js의 패키지 관리자. 사용하려면 node.js를 PC에 설치해야된다. (인스톨러 다운로드) npm : 전세계의 패키지들이 있는 곳, 생태계 전세계 개발자들이 유용한 자바스크립트 패키지들을 이미 만들어서 올려놓은 곳 사용명령어 npm install 패키지명 패키지명을 생략하면 전체가 설치되는건가? 아래와 같이 설치되었음
Node.js	Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 Chrome V8 자바스크립트 엔진 =  웹 브라우저를 만들기 위한 구글의 오픈 소스 자바스크립트 엔진(c++) 자바스크립트 런타임 = 자바스크립트을 실행하기 위한 프로그램 싱글스레드, 논블로킹 I/O, 이벤트기반

 

내 PC에 설치 후 버전확인

 

 

 

 

 

커스텀도메인 - TXT레코드로 검사 후 등록

 

함수 -> Azure Functions를 사용하여 Azure Static Web Apps에 API 추가

VS code에서 바로작업

출처: <https://docs.microsoft.com/ko-kr/azure/static-web-apps/add-api?tabs=vanilla-javascript>

 

 

 

 

백엔드는 Functions 에 구현?

 

 

https://docs.microsoft.com/ko-kr/learn/paths/azure-static-web-apps/

 

 

 

해당 경로에서 npm start 하면 웹호스팅이 시작됨. 로컬호스트 url이 생성됨

 

 

F1 누르고 아래 명령

 

 

구독 선택

 

 

구독선택

 

웹앱이름 입력

 

애플리케이션 코드 위치 react-app 으로

빌드되는 빌드출력 위치는 build

 

다음 다음