Skip to main content

자동으로 웹 사이트 배포

GitHub Actions 및 GitHub Pages로 코드 배포를 자동화하여 메인 브랜치에 푸시할 때마다 라이브 사이트에 업데이트를 게시할 수 있습니다.

기능이 병합되었으므로 이제 공유할 수 있습니다. 이 자습서에서는 main에 푸시할 때마다 소프트웨어 프로젝트가 라이브 웹사이트에 게시되도록 자동 배포를 설정합니다.

참고

사이트의 URL GitHub Pages 은 사용하는 버전 GitHub 에 따라 달라집니다. * GitHub.com에서 사이트가 YOUR-USERNAME.github.io/REPOSITORY에 게시됩니다. * GitHub에서 데이터 레지던시와 함께 GHE.com를 사용하는 경우 사이트는 pages.SUBDOMAIN.ghe.com/YOUR-USERNAME/REPOSITORY에 게시되며, 여기서 SUBDOMAIN는 엔터프라이즈의 하위 도메인입니다. * GitHub Enterprise Server에서 사이트는 pages.HOSTNAME/YOUR-USERNAME/REPOSITORY에 게시되며, 여기서 HOSTNAME는 GitHub Enterprise Server 인스턴스의 호스트 이름입니다.

사전 요구 사항

GitHub Pages 활성화

GitHub Pages를 설정하여 사이트를 호스팅하고, GitHub Actions를 사용하여 사이트를 빌드하고 게시합니다.

  1. GitHub에서 stargazers-log 리포지토리로 이동합니다.
  2. 리포지토리 이름 아래에서 설정을 클릭합니다.
  3. 사이드바의 "코드 및 자동화" 섹션에서 페이지를 클릭합니다.
  4. "빌드 및 배포"의 원본 드롭다운에서 .를 선택합니다 GitHub Actions.

다른 설정은 기본값으로 둡니다. 다음으로, 사이트를 자동으로 빌드하고 배포하는 고유한 워크플로 를 만듭니다.

배포 워크플로 만들기

워크플로는 자동으로 실행되는 일련의 단계 GitHub Actions 입니다. main에 푸시할 때마다 사이트를 빌드하고 배포하는 항목을 하나 추가하세요.

  1. 리포지토리에서 .github/workflows/deploy.yml이라는 이름의 파일을 만들어 보세요.

    1. 파일 목록 위에 있는 리포지토리의 stargazers-log 기본 페이지에서 다음을 클릭한 다음 새 파일 만들기를 클릭합니다.
    2. 파일 이름 필드에 .github/workflows/deploy.yml을 입력합니다.
  2. 다음 워크플로 콘텐츠를 추가합니다.

    YAML
    name: Deploy to GitHub Pages
    
    on:
      push:
        branches:
          - main
    
    permissions:
      contents: read
      pages: write
      id-token: write
    
    jobs:
      deploy:
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Checkout
            uses: actions/checkout@v6
          - name: Setup Pages
            uses: actions/configure-pages@v5
          - name: Upload artifact
            uses: actions/upload-pages-artifact@v4
            with:
              path: '.'
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4
    
  3. 파일을 main 브랜치에 직접 커밋하세요.

워크플로 이해

워크플로의 각 부분에는 수행할 작업이 있습니다.

  • **on**는 GitHub Actions에 main 푸시할 때마다 워크플로를 실행하도록 지시합니다.
  • permissions 워크플로에 게시하는 데 필요한 액세스 권한을 부여합니다 GitHub Pages.
  • **environment**는 작업을 GitHub Pages 사이트에 연결하고 게시된 URL을 ${{ steps.deployment.outputs.page_url }}로 표시합니다.
  • steps 코드를 체크아웃하고, GitHub Pages을(를) 준비하고, 파일을 아티팩트로 업로드하고, 라이브 사이트에 배포합니다.

라이브 사이트 보기

워크플로 GitHub Actions 를 커밋한 후 자동으로 실행합니다.

  1. 리포지토리에서 작업 탭을 클릭하여 워크플로 실행을 확인합니다.
  2. 최신 워크플로 실행을 클릭하여 작업 세부 정보의 요약을 확인합니다.
  3. 실행이 완료되면 https://YOUR-USERNAME.github.io/stargazers-log/에서 게시된 사이트를 여세요. YOUR-USERNAME을 사용자 이름으로 바꾸세요.
    • 예를 들어, 회원님의 GitHub 계정 사용자 이름이 octocat인 경우 회원님의 사이트는 https://octocat.github.io/stargazers-log/에 있습니다.

이제부터 main에 푸시할 때마다 최신 변경 사항을 반영해 사이트가 다시 배포됩니다.

제작한 결과물

이 시리즈에서는 전체 소프트웨어 프로젝트를 빌드하고 워크플로를 연습했습니다 GitHub .

단계배운 내용
소프트웨어 프로젝트 만들기리포지토리, README 파일
작업 계획문제, 프로젝트(프로젝트 보드)
로컬로 연결
GitHub Desktop, 복제
코드 작성 및 저장브랜치, 커밋, 풀 리퀘스트, Copilot
변경 내용 검토끌어오기 요청 검토, Copilot
자동으로 배포
GitHub Actions, GitHub Pages

다음 단계

  • Git 및 GitHub.에 대한 이해를 넓히세요. 자세한 내용은 Git 및 GitHub 학습 리소스을(를) 참조하세요.
  • 더 빠르게 알아보고 코딩할 때 도움을 받으세요 공동 파일럿 채팅 . 자세한 내용은 설명서의 GitHub 코필로트 채팅 정보.
  • AI를 더 자세히 살펴보고 아이디어를 작은 실행 가능한 단계로 전환하고, 예제를 생성하고, 반복적인 작업을 처리하여 에이전트가 실용적인 코딩 파트너처럼 작동하는 방법을 알아봅니다. 자세한 내용은 설명서의 GitHub Copilot 에이전트에 대한 개념.
  • 워크플로를 사용하여 소프트웨어 프로젝트를 GitHub Actions 자동화하는 방법에 대해 자세히 알아봅니다. 자세한 내용은 GitHub Actions에 대한 이해을(를) 참조하세요.
  • 사용자 지정 도메인을 추가하거나 GitHub Pages로 웹사이트를 게시하는 다양한 방법을 살펴보세요. 자세한 내용은 GitHub Pages 시작하기을(를) 참조하세요.