명령줄에서 직접 Azure에 정적 웹 앱 배포

SWA CLI에 대한 이 두 번째 문서에서는 새로운 배포 옵션에 대해 설명합니다. 네, 이제 명령줄에서 바로 앱을 배포할 수 있습니다! 그것을 구현한 사람보다 그것에 대해 이야기하는 사람이 더 낫습니까? 내 친구가 당신에게 모든 것을 설명하게 할 것입니다.

와심 체검 팔로우

Senior Developer Advocate at Microsoft ★ GDE for Google ★ Ambassador for Auth0 ★ Angular and Node.js contributor

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 😉

Azure에 로그인

Azure Static Web Apps용 새 SWA CLI에는 명령줄에서 바로 Azure 계정에 로그인할 수 있는 새 명령swa login이 도입되었습니다. 이 명령은 자격 증명을 암호화하고 시스템의 키 체인에 저장하므로 다시 입력할 필요가 없습니다.

대부분의 일반적인 경우 swa login는 다음 위치에서 현재 활성 Azure 자격 증명을 선택합니다(이 순서대로).

다음 중 하나 또는 모두를 설정한 경우 환경 변수variables:

AZURE_TENANT_ID

AZURE_CLIENT_ID

AZURE_CLIENT_SECRET

VS Code를 사용 중이고 Azure에 연결된 경우 현재 Visual Studio Code입니다.

브라우저를 사용하는 대화형 프롬프트입니다.

마지막 폴백은 생성된 장치 코드를 사용하여 Azure 계정에 로그인하라는 메시지를 표시하는 장치 코드 흐름입니다.

그러나 필요한 경우 사용 가능한 플래그를 사용하여 명령줄에서 이러한 자격 증명을 제공할 수도 있습니다.

Usage: swa login [options]

login into Azure

Options:
  -S, --subscription-id <subscriptionId>    Azure subscription ID used by this project
                                            (default: "process.env.AZURE_SUBSCRIPTION_ID")
  -R, --resource-group <resourceGroupName>  Azure resource group used by this project
  -T, --tenant-id <tenantId>                Azure tenant ID (default: "process.env.AZURE_TENANT_ID")
  -C, --client-id <clientId>                Azure client ID
  -CS, --client-secret <clientSecret>       Azure client secret
  -n, --app-name <appName>                  Azure Static Web App application name
  -cc, --clear-credentials                  clear persisted credentials before login (default: false)
  -u, --use-keychain                        enable using the operating system native keychain
                                            for persistent credentials (default: true)
  -nu, --no-use-keychain                    disable using the operating system native keychain

로그인하면 SWA CLI는 프로젝트의 루트에 있는 .env라는 로컬 파일에 활성 Azure 구독 ID와 테넌트 ID를 저장합니다.

➜ swa login

Welcome to Azure Static Web Apps CLI (1.0.0)

Checking Azure session...
✔ Successfully logged into Azure!
✔ Saved project credentials in .env file.
✔ Successfully setup project!

이 파일은 swa deploy 명령을 사용하여 Azure에 프로젝트를 배포할 때 사용됩니다.

앱 배포

새로운 SWA CLI를 사용하면 Azure에 앱을 훨씬 더 쉽게 배포할 수 있습니다. 이제 단일swa deploy 명령을 사용하여 명령줄에서 직접 앱을 배포할 수 있습니다.
swa deploy 명령은 사용 가능한 Azure Static Web Apps 인스턴스가 이미 있는지 파악하고 있는 경우 이를 사용할 만큼 충분히 똑똑합니다. 그렇지 않으면 즉시 새 항목을 생성하거나 이미 사용 가능한 목록에서 하나를 선택하라는 메시지를 표시합니다.

➜ swa deploy

Welcome to Azure Static Web Apps CLI (1.0.0)

Using configuration "thundr" from file:
  /home/wassimchegham/oss/@thundr-dev/thundr/swa-cli.config.json

Deploying front-end files from folder:
  /home/wassimchegham/oss/@thundr-dev/thundr/app/dist/thundr-ui

Deploying API from folder:
  /home/wassimchegham/oss/@thundr-dev/thundr/api

Checking Azure session...
✔ Successfully logged into Azure!

Checking project settings...
? Choose your Static Web App › - Use arrow-keys. Return to submit.
❯   >> Create a new application
    swa_samples/angular-web-bluetooth
    swa_samples/catsify
    swa_samples/hexa
    swa_samples/ngxtools
    swa_samples/nitrooo
  ↓ swa_samples/photobooth-teams

swa deploy 명령은 또한 기존 Static Web Apps 인스턴스가 이미 CI/CD 파이프라인에서 배포되었는지 감지하고 이에 대해 알릴 수 있습니다!

CI/CD 파이프라인에서 배포

CI/CD 파이프라인에서 배포하는 것은 많은 프로젝트에서 일반적입니다. swa deploy 명령을 사용하여 CI/CD 파이프라인에서 Azure에 앱을 배포할 수 있습니다. 배포 토큰을 설정하여 이를 수행할 수 있습니다.

➜ swa deploy --print-token --app-name thundr --resource-group swa_samples

Welcome to Azure Static Web Apps CLI (1.0.0)

Checking project "thundr" settings...
✔ Successfully setup project!

Deploying to environment: preview

Deployment token:
7c3fc44b858164b677-truncated-8c80ace9-39a8-416c-ae22-864745c0470b003

swa deploy --deployment-token=7c3fc44b858164b677-truncated-8c80ace9-39a8-416c-ae22-864745c0470b003b003

배포 토큰을 environment variable으로 설정할 수도 있습니다.

export SWA_CLI_DEPLOYMENT_TOKEN=7c3fc44b858164b677-truncated-8c80ace9-39a8-416c-ae22-864745c0470b003b003
swa deploy

환경 변수

새로운 SWA CLI는 환경을 보다 쉽게 ​​구성할 수 있도록 새로운 환경 변수 세트를 도입했습니다. 다음 환경 변수를 설정하여 SWA CLI의 동작을 사용자 정의할 수 있습니다.

일반 설정

에뮬레이터 설정

배포 설정

런타임 설정

로그인 환경

새 설명서 웹 사이트의 Environment Variables section에서 이러한 환경 변수에 대한 자세한 내용을 읽을 수 있습니다.

다음 단계

프로젝트 시작부터 Azure로의 배포까지, 중간에 필요한 모든 로컬 테스트를 통해 이제 명령줄에서 전체 개발 프로세스를 처리할 수 있어야 합니다. 이제 남은 주요 과제는 앱을 배포하고 성장시키는 것입니다 😉.

앱을 개발할 때 사용할 수 있는 몇 가지 팁을 알아보려면 Static Web Apps - Tips & Tricks 비디오 시리즈를 확인하십시오.

또한 new docs website 에서 SWA CLI의 모든 새 기능과 사용 방법에 대해 자세히 알아볼 수 있습니다.

피드백을 보내주세요!

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

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