이 문서에서는 Azure Static Web Apps에 Hugo 웹 애플리케이션을 만들고 배포하는 방법을 보여 줍니다. 최종 결과는 연결된 GitHub Actions가 포함된 새 Azure Static Web App으로, 앱이 빌드되고 게시되는 방식을 제어할 수 있습니다.
이 튜토리얼에서는 다음을 배우게 됩니다:
- Hugo 앱 만들기
- Azure Static Web Apps 환경 설정하기
- Azure에 Hugo 앱 배포
Azure 계정이 없는 경우 시작하기 전에 체험 계정을 만듭니다.
필수 조건
- 활성 구독이 있는 Azure 계정. 계정이 없는 경우 체험 계정을 만들 수 있습니다.
- GitHub 계정. 계정이 없는 경우 체험 계정을 만들 수 있습니다.
- Git가 설치가 설치되었습니다. 없는 경우 Git를 설치할 수 있습니다.
Hugo 앱 만들기
Hugo CLI(명령줄 인터페이스)를 사용하여 Hugo 앱을 만듭니다.
OS에서 Hugo 설치 가이드를 따르세요.
터미널 열기
Hugo CLI를 실행하여 새 앱을 만듭니다.
hugo new site static-app새로 만든 앱으로 이동합니다.
cd static-appGit 리포지토리를 초기화합니다.
git init브랜치 이름이
main로 지정되었는지 확인하세요.git branch -M main다음으로, 테마를 git 하위 구성으로 설치한 다음 Hugo 구성 파일에 지정하여 사이트에 테마를 추가합니다.
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke echo 'theme = "ananke"' >> config.toml변경 내용을 커밋합니다.
git add -A git commit -m "initial commit"
GitHub에 애플리케이션 푸시
Azure Static Web Apps에 연결하려면 GitHub의 리포지토리가 필요합니다. 다음 단계에서는 사이트에 대한 리포지토리를 만드는 방법을 보여 줍니다.
빈 GitHub 리포지토리 https://github.com/new를 만들고, hugo-static-app라고 명명합니다. README를 만들지 마세요.
GitHub 리포지토리를 로컬 리포지토리에 원격으로 추가합니다. 다음 명령에서
<YOUR_USER_NAME>자리 표시자 대신 GitHub 사용자 이름을 추가해야 합니다.git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app로컬 리포지토리를 GitHub로 푸시합니다.
git push --set-upstream origin main
웹앱 배포
다음 단계에서는 새 정적 사이트 앱을 만들어 프로덕션 환경에 배포하는 방법을 보여줍니다.
애플리케이션 만들기
Azure Portal로 이동
리소스 만들기 선택
Static Web Apps를 검색합니다.
Static Web Apps를 선택합니다.
만들기를 선택하세요
기본 탭에서 다음 값을 입력합니다.
재산 가치 구독 Azure 구독 이름. 리소스 그룹 my-hugo-group 이름 hugo-static-app 계획 유형 무료 Azure Functions API 및 스테이징 환경을 위한 영역 가장 가까운 지역을 선택합니다. 출처 깃허브 GitHub로 로그인을 선택하고 GitHub로 인증합니다.
다음 GitHub 값을 입력합니다.
재산 가치 조직 원하는 GitHub 조직을 선택합니다. 리포지토리 hugo-static-app을 선택합니다. 지점 기본을 선택합니다. 비고
리포지토리가 표시되지 않는 경우 GitHub에서 Azure Static Web Apps에 권한을 부여해야 할 수 있습니다. GitHub 리포지토리로 이동하여 설정 > 애플리케이션 > 권한 부여된 OAuth 앱으로 이동하고 Azure Static Web Apps를 선택한 다음, 권한 부여를 선택합니다. 조직 리포지토리의 경우 사용 권한을 부여하려면 조직의 소유자여야 합니다.
빌드 세부 정보 섹션의 빌드 사전 설정 드롭다운에서 Hugo를 선택하고 기본값을 유지합니다.
검토 후 만들기
검토 + 만들기를 선택하여 세부 정보가 모두 올바른지 확인합니다.
만들기를 선택하여 App Service Static Web App 만들기를 시작하고 배포를 위한 GitHub Actions를 프로비전합니다.
배포가 완료되면 리소스로 이동을 선택합니다.
리소스 화면에서 URL 링크를 선택하여 배포된 애플리케이션을 엽니다. GitHub Actions가 완료되려면 1~2분 정도 기다려야 할 수 있습니다.
사용자 지정 휴고 버전
정적 웹앱을 생성하면 애플리케이션에 대한 게시 구성 설정이 포함된 워크플로 파일이 생성됩니다. 워크플로 파일의 HUGO_VERSION 섹션에서 env 값을 제공하여 특정 Hugo 버전을 지정할 수 있습니다. 다음 예제 구성에서는 Hugo를 특정 버전으로 설정하는 방법을 보여 줍니다.
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@v3
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 }}
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 you 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" # Api source code path - optional
output_location: "public" # Built app content directory - optional
###### End of Repository/Build Configurations ######
env:
HUGO_VERSION: 0.58.0
Hugo 애플리케이션에서 Git 정보 기능 사용
Hugo 애플리케이션이 Git 정보 기능을 사용하는 경우 정적 웹앱에 대해 만든 기본 워크플로 파일은 체크 아웃 GitHub 작업을 사용하여 기본 깊이가 1인 얕은 버전의 Git 리포지토리를 가져옵니다. 이 시나리오에서 Hugo는 모든 콘텐츠 파일이 단일 커밋에서 오는 것으로 간주하므로 동일한 작성자, 마지막 수정 타임스탬프 및 기타 .GitInfo 변수를 갖습니다.
단계 아래에 새 매개 변수를 추가하여 actions/checkout도록 워크플로 파일을 업데이트합니다 fetch-depth0 (제한 없음).
- uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
전체 기록을 가져오면 GitHub Actions 워크플로의 빌드 시간이 늘어나지만 사용자 .Lastmod 및 .GitInfo 변수는 정확하며 각 콘텐츠 파일에 사용할 수 있습니다.
자원을 정리하세요
이 애플리케이션을 계속 사용하지 않을 경우 다음 단계를 통해 Azure Static Web App 리소스를 삭제할 수 있습니다.
- Azure Portal을 엽니다.
- 위쪽 검색 창에서 이전에 제공한 이름으로 애플리케이션을 검색합니다.
- 앱을 클릭합니다.
- 삭제 단추를 클릭합니다.
- 예를 클릭하여 작업을 확인합니다.