> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/etc/github/repository/action/vue-3-deploy-action.md).

# Vue 3 Deploy Action

## Vue 3 Deploy Github Action

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

## Github Action 생성

<div align="left"><img src="/files/l0afe1LQ7LTU5XM2dFt2" alt=""></div>

Github Action 탭에서 <mark style="color:blue;">New workflow</mark>를 눌러 새로운 Workflow를 생성한다.

<div align="left"><img src="/files/lmoHUAdLXcMlEziI6p2F" alt=""></div>

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

직접 구현하고 싶다면 <mark style="color:blue;">set up a workflow yourself</mark>를 눌러 기본 샘플부터 시작할 수 있다.

## Github Action script 작성

<div align="left"><img src="/files/VAI5xnehcadnVovNGccV" alt=""></div>

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

{% embed url="<https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions>" %}

```yaml
# 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을 설정한 스크립트 예제이다.

{% code title="deploy.yml" %}

```yaml
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: zdlsz@hanmail.net
        
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          force_with_lease: true
```

{% endcode %}

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

* npm install - 필요 패키지 설치
* npm run build - 애플리케이션 빌드