새로운 Azure Static Web Apps CLI 시작하기

놓쳤을 수도 있지만 이제 new Azure Static Web Apps CLI을(를) 사용할 수 있습니다!

모든 변경 사항과 새로운 기능을 설명하려면 전체 게시물이 필요하지만 여기에 몇 가지 주요 사항이 있습니다. 새로운 init , build , start 및 deploy 명령을 사용하면 이제 명령줄에서 직접 단일 도구로 앱의 전체 개발 주기를 사용할 수 있습니다. 시작하려면 최신Node.js 버전이 설치되어 있는지(>14) 확인하고 터미널에 다음 명령을 입력하십시오.

npm i -g @azure/static-web-apps-cli

이제 새로운 명령과 가장 중요한 기능을 살펴보겠습니다.

If you've never heard of Static Web Apps (or SWA for short), it's a web app hosting service provided by Azure, offering streamlined full-stack development with many built-in features like authentication, customizable routing, serverless functions and more. It also has a great free tier 😉

스와

새로운 CLI가 무수히 많은 새로운 옵션을 도입함에 따라 시작하려면 상당히 가파른 학습 곡선이 필요합니까? 정반대!

모든 명령은 swa 로 시작하며 이제 이 명령만 필요할 수도 있습니다.

# yes, that's all you need to type
swa

이 명령은 swa init , swa build , swa login 및 swa deploy 에 대한 매크로 바로 가기입니다. 이 모든 명령에 대한 세부 정보는 잠시 후 살펴보겠습니다. 여기서 가장 중요한 점은 swa가 Static Web Apps와 함께 사용할 새 프로젝트를 구성하고 빌드하고 배포하기 위해 알아야 하는 유일한 명령이라는 것입니다. . 옵션이나 플래그에 대해 걱정할 필요 없이 swa를 입력하기만 하면 됩니다.

구성 만들기

첫 번째 새 명령은 swa init 입니다. 이 명령은 프로젝트 구성과 구성을 제안하기 위해 사용 중인 프레임워크를 감지하므로 필요한 옵션을 파악하기 위해 the shiny new docs을 읽을 필요가 없습니다.



프로젝트 구성의 이름을 요청한 후 감지된 프로젝트 설정을 검증하거나 편집할 수 있습니다. 완료되면 설정으로 현재 폴더에 swa-cli.config.json 파일이 생성됩니다. 팀의 모든 사람이 사용할 수 있도록 프로젝트 리포지토리에서 이 파일을 커밋할 수 있습니다.

프로젝트 빌드

구성이 생성되면 옵션이나 플래그를 신경 쓸 필요 없이 다른 명령을 사용할 수 있습니다.

프런트 엔드 앱, API 또는 둘 다를 빌드해야 하는지 여부에 관계없이 swa build 명령이 작업을 수행합니다. 또한 프로젝트에서 npm, Yarn 또는 PNPM을 사용하는지 감지하여 NPM 종속성 설치(필요한 경우)를 처리합니다.

로컬에서 앱 실행

역사적으로 앱을 로컬에서 실행할 수 있는 기능은 SWA CLI의 첫 번째 기능이었습니다. 물론 여전히 존재하며 swa start 라우팅, 인증 기능 및 API와 함께 SWA 런타임 환경을 에뮬레이션할 수 있습니다. 개발자 경험을 개선하기 위해 몇 가지 변경 사항이 적용되었으며 물론 버그는 실제 SWA 런타임에 더 가깝게 일치하도록 수정되었습니다.

이전에는 API를 사용하는 경우 설치Functions Core Tools하고 도구 버전이 사용 중인 Node.js 버전과 일치하는지 확인해야 했지만 지금은 전체 프로세스가 자동화되어 있습니다. 도구가 설치되어 있지 않거나 잘못된 버전이 설치되어 있어도 걱정할 필요가 없습니다. 필요할 때 자동으로 설치됩니다.

다음 단계

이러한 새 명령을 사용하면 이미 프로젝트를 설정하고 빌드하고 로컬에서 테스트할 수 있습니다. swa start를 사용하면 라이브 실행 환경에서 앱과 API를 디버깅하는 데에도 유용합니다. 결과에 만족하면 Azure에 배포할 수 있으며 다음 게시물에서 살펴보겠습니다.

그동안 the new docs website에서 새 기능과 사용 방법에 대해 자세히 알아볼 수도 있습니다.

피드백을 보내주세요!

우리는 또한 우리가 할 수 있는 한 많이 듣고 돕기 위해 여기 dev.to에 있습니다! 🙂

귀하의 경험, 어려움, 질문 및 SWA CLI의 다음 버전에서 보고 싶은 기능을 알려주십시오.