✏️Chore: Create client.yml #1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Deploy | ||
| on: | ||
| push: | ||
| branches: [main] # main 브랜치에 push 발생하면 트리거 | ||
| workflow_dispatch: # 디버깅용, actions 탭에서 직접 버튼 눌러서 트리거 | ||
| jobs: | ||
| deploy: | ||
| runs-on: ubuntu-latest # ubuntu 최신 버전 환경에서 실행 | ||
| steps: | ||
| # GitHub Actions는 해당 프로젝트를 만들어진 환경에 checkout하고 나서 실행한다. | ||
| # 마치 브랜치를 만들 때 checkout하는 것처럼 꼭 필요하다. | ||
| # 아래 코드는 누군가 만들어놓은 Action을 사용하는 것이다. | ||
| # 만들어놓은 Action을 사용할 때는 uses라는 키워드를 사용한다. | ||
| - name: Checkout | ||
| uses: actions/[email protected] | ||
| # React 프로젝트이므로 해당 환경을 Node.js 위에서 실행하겠다고 명시한다. | ||
| # 마찬가지로 누군가 만들어 놓은 Action이다. | ||
| - name: Setup Node.js environment | ||
| uses: actions/[email protected] | ||
| with: | ||
| node-version: lts/Hydrogen | ||
| # push할 때마다 npm을 install 해야할까? 아니다. | ||
| # 해당 프로젝트의 node_modules가 변했는지 안 변했는지를 이용해서 | ||
| # 모듈 변화가 있을 때만 npm install을 해줄 수도 있다. | ||
| - name: Cache node modules | ||
| # 그걸 제공하는 Action도 있다. | ||
| uses: actions/[email protected] | ||
| # 해당 step을 대표하는 id를 설정할 수도 있다. 해당 값은 뒤의 step에서 사용한다. | ||
| id: cache | ||
| with: | ||
| # node_modules라는 폴더를 검사하여 | ||
| path: node_modules | ||
| # 아래 키값으로 cache가 돼있는지 확인한다. | ||
| key: npm-packages-${{ hashFiles('**/package-lock.json') }} | ||
| # 위 step에서 node_modules에 대한 cache 검사를 했다. | ||
| # 만약 모듈에 변한 게 있다면 `npm install`을 실행하고 아니면 해당 step을 건너뛰게 된다. | ||
| # if 키워드는 해당 스텝을 실행할지 말지를 결정할 수 있는 키워드이다. | ||
| # 위 step에서 정했던 cache라는 id를 steps.cache로 가져올 수 있다. | ||
| # cache라는 id 값을 가진 step에서는 cache-hit라는 output을 내뱉는다. | ||
| # 그걸로 cache가 hit 됐는지 안 됐는지를 알 수 있다. | ||
| # 그 값이 true가 아닐 때만 npm install을 한다. | ||
| # https://fe-developers.kakaoent.com/2022/220106-github-actions/ | ||
| - name: Install Dependencies | ||
| if: steps.cache.outputs.cache-hit != 'true' | ||
| run: npm install | ||
| - name: Build | ||
| run: npm run build | ||
| # Docker에 연결하여 이미지를 빌드하고 Hub에 푸시한다. | ||
| # https://docs.docker.com/build/ci/github-actions/#step-three-define-the-workflow-steps | ||
| - name: Login to Docker Hub | ||
| uses: docker/login-action@v2 | ||
| with: | ||
| username: ${{ secrets.DOCKERHUB_USERNAME }} | ||
| password: ${{ secrets.DOCKERHUB_TOKEN }} | ||
| - name: Set up Docker Buildx | ||
| uses: docker/setup-buildx-action@v2 | ||
| - name: Build and push | ||
| uses: docker/build-push-action@v4 | ||
| with: | ||
| context: . | ||
| file: ./Dockerfile | ||
| push: true | ||
| tags: ${{ secrets.DOCKERHUB_USERNAME }}/jmdb | ||
| # 마지막으로 ssh로 인스턴스에 연결하여 이미지를 Pull하고 컨테이너를 재시작한다. | ||
| - name: Pull and restart Docker Container | ||
| uses: appleboy/ssh-action@master | ||
| with: | ||
| key: ${{ secrets.SSH_KEY }} | ||
| host: ${{ secrets.HOST }} | ||
| username: ${{ secrets.USER }} | ||
| script: | | ||
| docker pull ${{ secrets.DOCKERHUB_USERNAME }}/jmdb | ||
| docker stop jmdb | ||
| docker run -d --rm --name jmdb -p 80:80 ${{ secrets.DOCKERHUB_USERNAME }}/jmdb | ||
