CLI를 사용하여 정적 웹 애플리케이션 업그레이드

Azure Static Web AppsGA가 생겨서 내 동료는 음흉한 작은 프로젝트를 포기했다Static Web Apps CLI.
SWA CLI는 로컬 개발을 더욱 쉽게 하기 위해 개발한 도구입니다. 특히 인증 체험을 하려면.Windows 및 Blazor/에서 작동하는지 확인하는 데 도움을 주고 있습니다.네트워크 응용.
웹과 API 구성 요소 앞에서 프록시 서버로 실행되며, Azure에 배치되었을 때처럼 단일한 포트를 제공합니다.인증된 체험을 만들려면 아날로그 인증 영패를 주입하고 staticwebapp.config.json 파일에 정의된 루트 규칙을 강제로 실행합니다.기본적으로 폴더에서 정적 내용을 제공하기를 원하지만, 제 첫 번째 선택은 create-react-app 프록시 dev 서버입니다. 그러면 다시 불러오고 작업을 할 수 있습니다.우리가 이 점을 어떻게 하는지 봅시다.

VS 코드와 함께 cli 사용

VS Code는 내가 선택한 편집기이기 때문에, 나는 이 편집기와 SWA CLI를 사용하는 가장 좋은 방법을 찾고 싶다. 그러면 나는 작업을 실행하고 그것을 시작할 수 있을 것이다.그러나 에이전트로 사용하는 것을 더 좋아하기 때문에 웹 응용 프로그램, API, CLI 등 세 가지 작업을 실행해야 한다.
그러면 tasks.json 파일을 만듭니다.

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "label": "npm: start",
            "detail": "react-scripts start",
            "isBackground": true
        },
        {
            "type": "npm",
            "script": "start",
            "path": "api/",
            "label": "npm: start - api",
            "detail": "npm-run-all --parallel start:host watch",
            "isBackground": true
        },
        {
            "type": "shell",
            "command": "swa start http://localhost:3000 --api http://localhost:7071",
            "dependsOn": ["npm: start", "npm: start - api"],
            "label": "swa start",
            "problemMatcher": [],
            "dependsOrder": "parallel"
        }
    ]
}

앞의 두 작업은 프로그램의 각 부분에 대해 실행될 것입니다. npm start 필드에서 무엇을 실행하고 있는지 볼 수 있습니다.이 두 명령은 모두 셸의 백엔드에서 실행될 것입니다. (프론트 데스크톱으로 튀어나올 필요는 없습니다.) 그러나 문제가 있습니다. 이 명령들은 오래 지속되는 명령입니다. 이 명령들은 끝나지 않습니다. 문제가 있습니다.
우리가 실행하려고 할 때 detail 는 다른 두 개의 작업을 시작하지만, VS 코드에서 의존 작업을 사용하면 swa start 의 작업이 완성되기를 기다린다는 것을 의미합니다.현재, 만약 당신이 끝난 작업 (예: dependsOn 을 실행한다면, 이것은 가능하지만, 시계가 실행 ((tsc) 있다면, 그것은 끝나지 않고, 아버지 작업은 시작할 수 없습니다.

프로세스 차단 해제

두 개의 차단 프로세스를 실행해야 하지만 VS 코드를 조작하여 CLI를 실행할 수 있도록 해야 합니다.사실은 우리가 tsc -w section 맞춤형 임무의 problemMatcher 부분을 사용하여 이 점을 실현할 수 있음을 증명한다.여기서 중요한 부분은 background 정규 표현식을 정의하는 것입니다. 웹 응용 프로그램부터 시작하겠습니다. 이 예에서 endPattern 서버가 시작되고 실행되면 인쇄할 마지막 메시지는 다음과 같습니다.

To create a production build, use npm run build.

다행입니다. 출력에서 그것을 찾을 것입니다. 찾으면 명령이 완료된 것으로 간주하십시오.
그러나 API는 두 명령create-react-app과 func start를 병행하고 있기 때문에 출력 흐름이 혼란스럽다.우리가 가장 관심 있는 것은 Azure 함수가 언제 시작되는지입니다. 출력을 보면 regex의 가장 간단한 소식은 다음과 같습니다.

For detailed output, run func with –verbose flag.

그것은 마지막 출력이 아니지만, 함수가 실행된 후에 나타나기 때문에 된다.
이제 우리는 무엇을 찾아야 할지 알았으니, 문제 일치기를 설정하자.

질문 일치기 업데이트

우리가 해야 할 일을 완성하기 위해서 우리는 임무에 tsc -w 부분을 추가해야 한다. 그것은 완전한 problemMatcher를 실현해야 한다.다음은 웹 응용 프로그램 업데이트 작업입니다.

{
    "type": "npm",
    "script": "start",
    "problemMatcher": {
        "owner": "custom",
        "pattern": {
            "regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
            "file": 1,
            "location": 2,
            "severity": 3,
            "code": 4,
            "message": 5
        },
        "fileLocation": "relative",
        "background": {
            "activeOnStart": true,
            "beginsPattern": "^\\.*",
            "endsPattern": "^\\.*To create a production build, use npm run build\\."
        }
    },
    "label": "npm: start",
    "detail": "react-scripts start",
    "isBackground": true
}

problemMatcher VS 코드에 표준이 없기 때문create-react-app(내가 알기로), 우리는 problemMatcher를 owner로 설정하고 타자 스크립트custom를 사용했다(부끄러운 줄 모르고 문서에서 훔쳤다)🤣). VS 코드 문제 목록이 정상적으로 작동하도록 정규 표현식을 조정해야 할 수도 있지만, 지금은 가능합니다.basicpattern를 정의한 후에 우리는 problemMatcher 부분을 추가하고 우리가 찾으려는 문자열과 일치하도록 background를 지정할 수 있습니다.너는 또 하나를 제공해야 한다. endsPattern 나는 게으르고 무엇이든 일치한다.
API 작업에 대해 다음과 같은 작업을 수행합니다.

{
    "type": "npm",
    "script": "start",
    "path": "api/",
    "problemMatcher": {
        "owner": "typescript",
        "pattern": {
            "regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
            "file": 1,
            "location": 2,
            "severity": 3,
            "code": 4,
            "message": 5
        },
        "background": {
            "activeOnStart": true,
            "beginsPattern": "^\\.*",
            "endsPattern": ".*For detailed output, run func with --verbose flag\\..*"
        }
    },
    "label": "npm: start - api",
    "detail": "npm-run-all --parallel start:host watch",
    "isBackground": true
}

지금 우리는 beginsPattern 임무를 실행할 수 있습니다. 모든 것이 우리를 위해 시작됩니다!

결론

Azure 정적 웹 애플리케이션은 갈수록 향상되고 있습니다.CLI 를 사용하면 로컬 환경을 실행하기가 매우 쉬워지므로 CORS와 같은 문제를 걱정할 필요가 없으며 배포된 애플리케이션의 작동 방식에 더욱 가깝습니다.이것들을 VS 코드 작업과 결합시키는 것은 몇 번의 버튼만 누르면 그것을 시작하고 실행할 수 있다는 것을 의미한다.
나는 이미 나의 Auth0 demo appGitHub repo에 이 임무들을 추가했다. 이 글은 사용에 관한 것이다