ServerAzure

DevOps Azure Static Web App 파이프라인 CI/CD 구성

,

1. Azure 정적 Web Apps 에 대한 빌드 구성

[DevOps CI] - azure-pipelines.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
  - task: NodeTool@0
  inputs:
    versionSpec: '16.x'
  displayName: 'Install Node.js'

  - script: |
    npm install
    npm run build:local
  displayName: 'npm install and build'

  - bash: |
    echo "--------------------"
    pwd
    ls -al
    echo "--------------------"
  displayName: 'Bash Script'

  - task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '.'
    includeRootFolder: false
    verbose: true
  displayName: 'Archive Files'

  - task: PublishBuildArtifacts@1
  displayName: 'Publish Artifacts'
  
  #- task: AzureStaticWebApp@0
  # inputs:
  # app_location: '/build'
  # #output_location: '/dist'
  # #api_location: 'api'
  # azure_static_web_apps_api_token: $(deploy_token)

[DevOps CD] - [TEST] StaticWebApp-Test

Azure Static Web Apps CD 파이프라인

2. 폴백 라우터 설정

SPA 브라우저 라우터 사용 시 hash 기반이 아닌 history 기반으로 설정하고 페이지 이동 후 새로고침을 하게되면 404 Not Found 페이지를 반환하게 된다.

빌드되는 산출물에 Azure Static Web Apps 에서 정의되어 있는 staticwebapp.config.json 파일 생성 후 설정하는 코드를 추가한 후 배포해야 함.

staticwebapp.config.json

1
2
3
4
5
{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

3. 빌드 산출물 사이즈 확인

Azure Web Apps 은 관리자 사이트가 있는 반면에 Azure Static Web Apps 는 별도로 관리자 사이트 같은 부분은 제공하지는 않는거 같음. (로컬환경이나 데브옵스 로그에서 확인가능하긴 함.)

4.Rest API 연동 테스트

  • Azure Static Web Apps -> Function App (MS 권고 방법 backend)
  • Azure Static Web Apps -> VM (현재 사용중인 backend 방법)
1
2
// CORS 설정
http://localhost:3202,http://localhost:8080,http://*.winjoygame.com,https://*.winjoygame.com,vue-azure-static-web-app
공유하기