GitHub 워크플로 내에서 배포된 Azure Static Web App URL에 대한 액세스 권한 얻기
21336 단어 githubplaywrightazure
Read the TLDR version on timdeschryver.dev
이봐.
당신이 여기 있다면 그것은 아마도 네 가지를 의미할 것입니다:
Azure/static-web-apps-deploy GitHub 작업이것이 당신이라면 내가 당신을 덮었기 때문에 더 이상 볼 필요가 없습니다!
Azure Portal 내에서 Azure Static Web App을 만들고 GitHub Actions와 함께 GitHub를 사용하도록 구성하면 자동으로 GitHub 워크플로가 생성됩니다. 워크플로 파일은 GitHub 리포지토리에도 추가되며 SWA를 빌드하고 배포하기 위해 미리 구성된 몇 가지 단계를 정의합니다.
내 블로그를 SWA로 마이그레이션했을 때 생성된 워크플로는 다음과 같습니다.
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SALMON_ROCK_0FB035B03 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SALMON_ROCK_0FB035B03 }}
action: "close"
워크플로는
Azure/static-web-apps-deploy GitHub 작업을 사용하여 응용 프로그램을 빌드하고 Azure 리소스에 배포합니다.워크플로는 풀 요청이 열리거나
main 분기에 대해 푸시가 이루어질 때 트리거됩니다.여기서 내가 놓친 것은 내가 변경할 때 내 블로그를 손상시키지 않도록 하는 방법입니다.
뭔가 고장났을 때 타이밍이 항상 나쁘다고 내가 말할 때 저를 믿으세요.
특히 안정적인 v1 릴리스를 위해 정기적으로 변경되는 SvelteKit 으로 내 블로그를 작성했기 때문에 이런 일이 과거에 여러 번 발생했습니다.
블로그를 수동으로 확인하고 싶지 않습니다. 변경하는 데 시간이 오래 걸리고 항상 잊어버린 것이 있기 때문입니다.
그래서 워크플로 내에 안전 확인을 추가하고 싶었습니다.
모든 것이 예상대로 작동하는지 확인하는 자동화된 테스트.
물론 이 작업을 위해 즉시 Playwright을 잡았습니다.
생성된 GitHub 워크플로와 마찬가지로 Playwright도 워크플로를 생성할 수 있습니다.
init 스크립트로 Playwright를 설치하고 단계 마법사를 통해 작업하십시오.npm init playwright
마법사를 완료하면 새 GitHub 워크플로 파일이 생성됩니다.
제 경우에는 다음 파일과 같았습니다.
name: Playwright Tests
on:
push:
branches: [ main, master ]
pull_request:
branches: [ main, master ]
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14.x'
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v2
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
워크플로는 Playwright를 설치하고
main 분기에 대한 푸시가 발생하거나 풀 요청이 열릴 때 테스트 스위트를 실행합니다.내 Azure 워크플로 내에서 이러한 테스트를 실행하기 위해 해당 콘텐츠를 SWA 워크플로 파일에 복사하여 붙여넣기만 하면 다음과 같은 결과가 나타납니다.
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SALMON_ROCK_0FB035B03 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######
smoke_test_job:
name: ☁️ Smoke test ${{ github.event.deployment_status.target_url }}
runs-on: ubuntu-latest
steps:
- name: 🛎️ Checkout
uses: actions/checkout@v3
- name: 🔢 Use Node.js 16
uses: actions/setup-node@v3
with:
node-version: 16
- name: 🔎 Install dependencies
run: npm install
- name: 🎭 Install Playwright
run: npx playwright install --with-deps
- name: 🧪 Run Playwright Tests
run: npm run test
- name: 📦 Upload Test Results Artifact
uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-test-results
path: playwright-report
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SALMON_ROCK_0FB035B03 }}
action: "close"
이 단계에서 이러한 테스트를 최대한 활용하려면 배포된 환경에 대해 테스트를 실행해야 합니다.
따라서 배포된 URL을 알아야 합니다.
docs에는
https://<SUBDOMAIN-PULL_REQUEST_ID>.<AZURE_REGION>.azurestaticapps.net와 같은 미리보기 URL을 빌드하는 규칙이 있다고 언급되어 있습니다. 그러나 이것은 main 로 추진할 때 라이브 환경도 있다는 점을 고려하지 않습니다. 이상적으로는이것이 계속 작동한다는 것입니다.
하지만 더 나은 방법이 있어야 합니다.
다행스럽게도 GitHub Action
static_web_app_url에 정의된 출력 변수Azure/static-web-apps-deploy가 있습니다.이 지식을 바탕으로 빌드 작업의 출력 변수에
static_web_app_url 변수를 포함하기만 하면 됩니다. 이렇게 하면 테스트 작업 내의 변수에 액세스하여 Playwright를 구성할 수 있습니다.미리보기 환경에 대해 Playwright 테스트를 실행하려면 출력 변수를 테스트 작업 내의
PLAYWRIGHT_TEST_BASE_URL 환경 변수에 할당하십시오.name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
+ outputs:
+ swa_url: ${{ steps.builddeploy.outputs.static_web_app_url }}
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SALMON_ROCK_0FB035B03 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: 'upload'
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: '/' # App source code path
api_location: '' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
production_branch: 'main'
###### End of Repository/Build Configurations ######
smoke_test_job:
name: ☁️ Smoke test ${{ github.event.deployment_status.target_url }}
+ needs: build_and_deploy
runs-on: ubuntu-latest
env:
+ PLAYWRIGHT_TEST_BASE_URL: ${{ needs.build_and_deploy.outputs.swa_url }}
steps:
- name: 🛎️ Checkout
uses: actions/checkout@v3
- name: 🔢 Use Node.js 16
uses: actions/setup-node@v3
with:
node-version: 16
- name: 🔎 Install dependencies
run: npm install
- name: 🎭 Install Playwright
run: npx playwright install --with-deps
- name: 🧪 Run Playwright Tests
run: npm run test
- name: 📦 Upload Test Results Artifact
uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-test-results
path: playwright-report
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SALMON_ROCK_0FB035B03 }}
action: 'close'
이제 이 변경으로 더 이상 가짜 패스가 내 블로그 🤞의 라이브 환경에 도달하지 않습니다.
그리고 만약 그렇다면, 나는 그것에 대해 통지를 받습니다.
Twitter에서 팔로우 | 구독하기 Newsletter | timdeschryver.dev에 원래 게시되었습니다.
Reference
이 문제에 관하여(GitHub 워크플로 내에서 배포된 Azure Static Web App URL에 대한 액세스 권한 얻기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/timdeschryver/get-access-to-the-deployed-azure-static-webb-app-url-within-your-github-workflow-3nh7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
