Vue 3 Deploy Action

Vue 3 Deploy Github Action

VueJS 등 Node 기반 애플리케이션을 빌드하기 위한 Github Action 스크립트를 작성한다.

Github Action 생성

Github Action 탭에서 New workflow를 눌러 새로운 Workflow를 생성한다.

Github에는 다양한 Workflow 샘플이 존재하며, 이를 토대로 수정하여 스크립트를 생성할 수 있다.

직접 구현하고 싶다면 set up a workflow yourself를 눌러 기본 샘플부터 시작할 수 있다.

Github Action script 작성

제공되는 샘플 스크립트는 다음과 같다. yml을 이용한 스크립트 작성 문법에 관련된 정보는 다음 공식 문서에서 확인할 수 있다.

Workflow syntax for GitHub Actions - GitHub DocsGitHub Docs

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the "master" branch
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      # Runs a single command using the runners shell
      - name: Run a one-line script
        run: echo Hello, world!

      # Runs a set of commands using the runners shell
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

• name - Workflow의 이름

• on - Workflow가 작업을 시작하는 시기

  • push - push 작업이 발생한 경우

    • branches - 대상 브랜치 설정

  • pull_request - PR(Pull Request)가 발생한 경우

    • branches - 대상 브랜치 설정

  • workflow_dispatch - 수동으로 실행이 가능하도록 설정

• jobs - 순차적 혹은 병렬로 실행할 하나 이상의 작업 단위

  • build - 하나의 작업에 대한 이름

    • runs-on - 작업이 실행될 환경

      • https://docs.github.com/en/actions/using-jobs/choosing-the-runner-for-a-job

    • steps - 작업 단계

      • name - 작업 이름(지정된 리스트)

      • uses - 사용할 workflow

      • run - 실행할 스크립트 명령

Vue 3 Deploy Action

스크립트를 편집하여 Github에 올라가면 자동으로 Build가 이루어지도록 Vue 3 Application을 설정한 스크립트 예제이다.

deploy.yml

name: Deployment-Action

on:
  push:
    branches: [ "master" ]

jobs:
  deploy:

    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@main
      
      - name: Set up Node.js
        uses: actions/setup-node@main
        with:
          node-version: 14.x
      
      - name: Install dependencies
        run: npm install
      
      - name: Build
        run: npm run build
        env:
          NODE_ENV: production
      
      - name: Commit changes
        uses: EndBug/add-and-commit@v9
        with:
          messages: Github action auto commit
          author_name: hiphop5782
          author_email: [e-mail]
        
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          force_with_lease: true

master branch에 push가 발생할 경우 자동으로 build가 이루어지도록 되어 있다. build 이후 빌드된 내용을 add → commit → push 하도록 되어 있다 실행환경은 Ubuntu이다.며, build를 위한 Node를 구성하고 다음 명령을 실행하도록 되어 있다.

• npm install - 필요 패키지 설치

• npm run build - 애플리케이션 빌드