4. 프로젝트 배포 절차 자동화

이 글을 읽고 있다면 아마도 이 시리즈를 따라 왔고 마지막에 있거나 사용자 정의 도메인에 앱/프로젝트를 배포하는 단계를 찾고 있을 것입니다. 두 경우 모두 제대로 찾아오셨습니다. 배포 설정을 완료하려면 이 문서를 계속 읽거나 시리즈를 읽어 보십시오.

무엇보다도 이 기사를 읽고 시리즈를 팔로우해 주신 모든 분들께 감사드립니다. 또한 이 지점에 도달한 당신의 끈기에 경의를 표합니다. 내 시리즈와 기사가 어떤 식으로든 도움이 되었기를 바랍니다.

따라서 앱/프로젝트에 대한 모든 변경 사항이 사용자 지정 도메인에 자동으로 게시되도록 최종 배포 구성을 완료하기 위한 다음 단계를 시작하겠습니다.

DevOps 컨텍스트에서 CI/CD(지속적인 통합/지속적인 제공) 프로세스에 대해 들어보셨을 것입니다. 이 문서에서는 개념을 자세히 다루지 않지만 here은 개념에 대해 자세히 알아보고 배포 자동화가 중요한 이유에 대한 링크입니다.

프로젝트의 배포 프로세스를 설정하기 위한 세 단계가 있습니다.

배포를 시작하기 위한 GitHub 작업 워크플로우 설계

배포를 수행하기 위해 GitHub 작업에서 사용할 배포 스크립트를 작성합니다.

package.json 파일에 배포 npm 스크립트를 포함합니다.

1. 배포 시작을 위한 GitHub 작업 워크플로 설계

루트 디렉터리에 숨겨진 디렉터리.github를 만든 다음 그 안에 또 다른 디렉터리workflows를 만듭니다. workflows 디렉토리 내에서 deployment.yaml 파일을 생성합니다.
이deployment.yaml 파일 안에 다음 내용을 붙여넣습니다. 아래 내용을 붙여넣은 후 문서 서식을 지정하여 들여쓰기 문제를 해결하세요.

name: Deployment using GitHub Pages
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  deployment:
    name: Deploying to <your-website-name>

    runs-on: ubuntu-latest

    strategy:
      fail-fast: true
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - name: Checkout branch
        uses: actions/checkout@v3

      - name: Use Node.js ${{matrix.node-version}}
        uses: actions/setup-node@v3
        with:
          node-version: ${{matrix.node-version}}
          cache: "npm"

      - name: Clean install dependencies
        run: npm ci

      - name: Deploy <your-website-name>
        run: |
          git config user.name "<your-name>" && git config user.email "<your-email>"
          npm run deploy

커밋이 메인 브랜치로 푸시되거나 풀 리퀘스트가 메인 브랜치로 병합되면 위의 스크립트는 기본적으로 배포 프로세스를 시작합니다.

배포 스크립트에는 이 프로세스가 트리거될 때 완료해야 하는 작업도 포함되어 있습니다.

각 작업에는 이름, 실행되는 기본 OS 플랫폼, 사용해야 하는 전략, 작업을 완료하기 위해 수행해야 하는 단계가 있습니다.

따라서 배포 워크플로/파이프라인이 트리거되면 다음과 같은 로그가 표시됩니다.

2. 배포를 수행하기 위해 GitHub 작업에서 사용할 배포 스크립트를 작성합니다.

위의 워크플로를 성공적으로 완료하려면 웹 사이트를 사용자 지정 도메인에 게시하는 데 필요한 모든 리소스를 수집해야 합니다.

여기에는 프로젝트를 만들고 자신의 도메인에 게시하는 작업이 수반됩니다. 이와 관련된 모든 단계를 수동으로 수행하는 것은 시간이 많이 걸리는 프로세스입니다. 결과적으로 배포 스크립트를 생성하고 1단계에서 정의한 워크플로를 실행하여 배포가 자동으로 수행되도록 합니다.

프로젝트의 루트 디렉터리에 deploy.sh라는 셸 스크립트를 만들고 다음 내용을 추가합니다.

#!/usr/bin/env sh

# abort on errors
set -e

# Checkout an orphan branch
# Docs: https://git-scm.com/docs/git-checkout/1.7.3.1#git-checkout---orphan
git checkout --orphan deployment

# build
npm run build

# add cname record in dist folder
cd dist
echo "www.<your-domain-name>.com" > CNAME

# exit dist
cd -

# set worktree path to dist and stage all changes
# Docs: https://git-scm.com/docs/git#Documentation/git.txt---work-treeltpathgt
git --work-tree dist add --all

# set worktree path to dist and commit staged changes with a message
git --work-tree dist commit -m "Deploy"

# push committed changes to deployment origin branch
# make sure to change your branch here if your source branch is 
# different in your GitHub pages configuration settings
git push origin HEAD:deployment --force

# remove the dist folder
rm -rf dist

# checkout main
git checkout -f main

# delete deployment
git branch -D deployment

3. package.json 파일에 npm 스크립트 배포를 포함합니다.

마지막으로 package.json 파일에 스크립트가 포함되어야 합니다. 1단계에서 정의한 GitHub 프로세스가 시작되면 package.json 파일을 사용하여 스크립트를 실행합니다. 아래 스크린샷과 같이 스크립트를 추가합니다.


그게 다야! 끝났습니다. 위에 나열된 수정을 완료한 후 변경 사항을 커밋하고 기본 브랜치에 푸시합니다.

이렇게 하면 이전에 구성한 GitHub 워크플로가 활성화되고 사용자 지정 도메인에 변경 사항이 게시됩니다.

단계를 주의 깊게 따랐다면 GitHub Pages 워크플로를 사용하여 웹 사이트를 사용자 지정 도메인에 자동으로 게시할 수 있어야 합니다.



축하합니다! 의견 영역을 사용하여 이 시리즈에 대한 고유한 경험과 의견 또는 권장 사항을 공유하십시오.

지원해 주신 모든 분들께 감사드리며, 앞으로의 소식도 기대해 주세요!
😀