배경

업무로 FTP 밖에 사용할 수 없는 서버에 배포하는 일이 많이 있어, 그 때마다 CircleCI등의 외부 서비스를 사용하고 있었습니다.
새 CI 환경을 구축할 때 작년에 릴리스된 GitHub Actions을 사용하여 워크플로를 자동화해 보았습니다.
이 기사에서는 빌드된 파일의 FTP를 통한 배포와 GitHub Actions의 실행 결과를 Slack에 알리는 방법을 소개합니다.

하고 싶은 일

FTP를 통한 배포 자동화

빌드

실행 결과를 Slack에 알립니다

워크플로 구축

그러면 실제로 워크플로를 구축해 갑니다.

트리거 및 특정 브랜치만 지정

push 를 트리거로 하고 staging 브랜치에 대해서만 기동시킨다.

github/workflows/main.yml

# ワークフローをトリガーする
on:
  # pushでトリガーする
  push:
    # stagingブランチに対してのみ
    branches:
      - staging

워크플로 및 작업 설정

워크플로와 작업을 각각 설정합니다.
이번에는 작업을 실행하는 환경에 ubuntu-latest를 지정하고 최신 버전의 Ubuntu를 사용합니다.

github/workflows/main.yml

# ワークフローの名前
name: Publish Website

# 実行するジョブ
jobs:
  # ジョブのID
  Build-and-Deploy:
    # ジョブの名前
    name: Build and Deploy
    # ジョブを実行するマシン（仮想環境）
    runs-on: ubuntu-latest

GitHub에서 환경 변수 설정

GitHub에서 워크플로에서 사용할 환경 변수를 설정합니다.

[Setting] → [Secrets] 페이지에서 설정합니다.
[Add a new secret]에서 추가하겠습니다.


이번에 설정하는 환경 변수는 다음과 같습니다.


이름
Value


FTP_SERVER
서버 주소

FTP_USERNAME
FTP 사용자 이름

FTP_PASSWORD
FTP 암호

FTP_REMOTE_DIR
FTP의 경로

SLACK_WEBHOOK
Slack의 Webhook URL(취득 방법은 후술)

SLACK_WEBHOOK 에서 설정하는 Slack Webhook URL을 얻는 방법에 대해서는 다음에서 설명합니다.

Slack에서 알림을 받을 수 있도록 설정

Incoming Webhook 을 사용 설정합니다.

다음에 액세스하여 설정합니다.
htps : // s ck. 코 m / 아 ps / 아


슬랙에 추가를 클릭


추가할 채널 선택


Webhook URL을 위의 Github 환경 변수로 설정합니다.

단계 설정

이번에는 Node.js의 단일 버전 10.x를 사용합니다.10.x 의 x 는, 버젼으로 이용 가능한 최신의 마이너 릴리스와 패치 릴리스에 일치하는 와일드 카드 캐릭터입니다.

배포 및 Slack에 알림을 받으려면 다음 GitHub Marketplace에 있는 작업을 사용하세요.

FTP Deploy

Slack Notify

FTP Deploy 의 내용은 lftp입니다만, SSH를 사용할 수 있으면 rsync등에서도 좋다고 생각합니다.

github/workflows/main.yml

# 実行するタスク
steps:
# 実行されるアクション（ワークフロー、パブリックリポジトリ、公開されているDockerコンテナイメージ）
- uses: actions/checkout@master

# ステップの名前
- name: Use Node.js 10.x
  # ステップの一部として実行されるアクションを選択
  uses: actions/setup-node@v1
  with:
    node-version: '10.x'
- run: npm install
- run: npm run build

- name: FTP-Deploy-Action
  uses: SamKirkland/[email protected]
  # ステップが使う環境変数
  env:
    FTP_SERVER: ${{ secrets.FTP_SERVER }}
    FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
    FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
    LOCAL_DIR: dist
    REMOTE_DIR: ${{ secrets.FTP_REMOTE_DIR }}
    ARGS: --delete

- name: Slack Notification
  uses: rtCamp/action-slack-notify@master
  env:
    SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

실행할 환경을 여러 개 설정하려는 경우

환경의 변형을 지정하는 경우는 다음과 같이 한다.

github/workflows/main.yml

# 各ジョブを実行する環境のバリエーションを定義
strategy:
  # 使用したい環境を設定
  matrix:
    node-version: [10.x, 12.x]

steps:
- uses: actions/checkout@master

- name: Use Node.js ${{ matrix.node-version }}
  uses: actions/setup-node@v1
  with:
    node-version: ${{ matrix.node-version }}

완성된 YAML

github/workflows/main.yml

on:
  push:
    branches:
      - master
name: Publish Website

jobs:
  Build-and-Deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master

    - name: Use Node.js 10.x
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'
    - run: npm install
    - run: npm run build

    - name: FTP-Deploy-Action
      uses: SamKirkland/[email protected]
      env:
        FTP_SERVER: ${{ secrets.FTP_SERVER }}
        FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
        FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
        LOCAL_DIR: public
        REMOTE_DIR: ${{ secrets.FTP_REMOTE_DIR }}
        ARGS: --delete

    - name: Slack Notification
      uses: rtCamp/action-slack-notify@master
      env:
        SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

워크플로 설정 YAML 파일을 세밀하게 설정하고 작성하는 방법은 다음을 참조하십시오.
GitHub Actions 워크플로 구문 - GitHub 고객센터

Node.js를 사용한 프로젝트에 대해서는 아래를 참조하십시오.
Using Node.js with GitHub Actions Node.js 워크플로 템플릿

실행되면

푸시하고 작업이 완료되면 다음과 같은 메시지가 Slack에 통보됩니다.

요약

반영에 조금 시간이 걸리지만, FTP로 밖에 업할 수 없는 제한하에서 사용하는 분에는 지금까지 문제 없다.
GitHub로 완결되므로 외부 CI 서비스를 사용하는 것보다 쉽고 편하게 구현할 수 있었다.
앞으로는 Github Actions로 충분한 것은 Github Actions로 CI를 구축해 나가고 싶다.