자습서: Azure Static Web Apps에 VuePress 사이트 게시

아티클
02/12/2024

이 문서에서는 Azure Static Web Apps에 VuePress 웹 애플리케이션을 만들고 배포하는 방법을 보여 줍니다. 최종 결과는 앱이 빌드되고 게시되는 방식을 제어하는 관련 GitHub Actions를 포함하는 새로운 Azure Static Web Apps 애플리케이션입니다.

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

VuePress 앱 만들기
Azure Static Web Apps 설정
Azure에 VuePress 앱 배포

필수 조건

활성 구독이 있는 Azure 계정. 계정이 없는 경우 체험 계정을 만들 수 있습니다.
GitHub 계정. 계정이 없는 경우 체험 계정을 만들 수 있습니다.
Git 설치가 설치되었습니다. 없는 경우 Git을 설치할 수 있습니다.
Node.js 설치되었습니다.

VuePress 앱 만들기

CLI(명령줄 인터페이스)에서 VuePress 앱을 만듭니다.

VuePress 앱에 대한 새 폴더를 만듭니다.
```
mkdir static-site
```
폴더에 README.md 파일을 추가합니다.
```
echo '# Hello From VuePress' > README.md
```
package.json 파일을 초기화합니다.
```
npm init -y
```
VuePress를 .로 추가합니다 devDependency.
```
npm install --save-dev vuepress
```
텍스트 편집기 에서 package.json 파일을 열고 섹션에 빌드 명령을 scripts 추가합니다.
```
...
"scripts": {
    "build": "vuepress build"
}
...
```
.gitignore 파일을 만들어 node_modules 폴더를 제외합니다.
```
echo 'node_modules' > .gitignore
```

Git 리포지토리를 초기화합니다.

 git init
 git add -A
 git commit -m "initial commit"

GitHub에 애플리케이션 푸시

Azure Static Web Apps에 연결하려면 GitHub의 리포지토리가 필요합니다. 다음 단계에서는 사이트에 대한 리포지토리를 만드는 방법을 보여 줍니다.

명명된 vuepress-static-app에서 https://github.com/new 빈 GitHub 리포지토리(추가 정보 만들기 안 함)를 만듭니다.
로컬 리포지토리에 GitHub 리포지토리를 원격으로 추가합니다. 다음 명령에서 자리 표시자 대신 <YOUR_USER_NAME> GitHub 사용자 이름을 추가해야 합니다.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
```
로컬 리포지토리를 GitHub로 푸시합니다.
```
git push --set-upstream origin main
```

웹앱 배포

다음 단계에서는 새 정적 사이트 앱을 만들고 프로덕션 환경에 배포하는 방법을 보여 줍니다.

애플리케이션 만들기

Azure Portal로 이동
리소스 만들기 선택
Static Web Apps를 검색합니다.
Static Web Apps 선택
만들기를 선택합니다.

기본 탭에서 다음 값을 입력합니다.

속성	값
구독	Azure 구독 이름입니다.
리소스 그룹	my-vuepress-group
이름	vuepress-static-app
플랜 유형	무료
Azure Functions API 및 스테이징 환경을 위한 영역	가장 가까운 지역을 선택합니다.
Source	GitHub

GitHub로 로그인을 선택하고 GitHub로 인증합니다.
다음 GitHub 값을 입력합니다.

속성 값

조직 원하는 GitHub 조직을 선택합니다.

리포지토리 vuepress-static-app을 선택합니다.

Branch 기본을 선택합니다.

참고 항목

리포지토리가 표시되지 않는 경우 GitHub에서 Azure Static Web Apps에 권한을 부여해야 할 수 있습니다. GitHub 리포지토리로 이동하고 설정 애플리케이션 권한 OAuth 앱 이동하여 Azure Static Web Apps를 선택한 다음, 권한 부여를 선택합니다.>> 조직 리포지토리의 경우 사용 권한을 부여하려면 조직의 소유자여야 합니다.
빌드 세부 정보 섹션의 빌드 사전 설정 드롭다운에서 VuePress를 선택하고 기본값을 유지합니다.

속성	값
조직	원하는 GitHub 조직을 선택합니다.
리포지토리	vuepress-static-app을 선택합니다.
Branch	기본을 선택합니다.

검토 후 만들기

검토 + 만들기를 선택하여 세부 정보가 모두 올바른지 확인합니다.
만들기를 선택하여 App Service 정적 웹앱 만들기를 시작하고 배포를 위한 GitHub Actions를 프로비전합니다.
배포가 완료되면 리소스로 이동을 선택합니다.
리소스 화면에서 URL 링크를 선택하여 배포된 애플리케이션을 엽니다. GitHub Actions가 완료되기까지 1~2분 정도 기다려야 할 수 있습니다.

리소스 정리

이 애플리케이션을 계속 사용하지 않을 경우 다음 단계를 통해 Azure Static Web App 리소스를 삭제할 수 있습니다.

Azure Portal을 엽니다.
위쪽 검색 창에서 이전에 제공한 이름으로 애플리케이션을 검색합니다.
앱 클릭
삭제 단추를 클릭합니다.
[예]를 클릭하여 삭제 작업을 확인합니다.

다음 단계

사용자 지정 도메인 추가