소개

롤리팝 등의 렌탈 서버에 vue 등의 것을 수동으로 배포하는 것은 귀찮습니다.
이번에는 "테스트 -> 빌드 -> 배포"의 일련의 흐름을 GitHub Actions에서 자동으로 해주도록 설정합니다.

전제

Vue 프로젝트를 만들고 GitHub에서 관리하고 있습니다

이번에 렌사바의 예로서 사용하는 것은 롤리팝

workflow 만들기

vue 프로젝트의 리포지토리에서 Actions 탭을 열면 다음과 같은 페이지가 나타납니다.

Continuous integration workflows에서 Node.js를 선택하고 set up this workflow를 누릅니다.

이와 같은 페이지가 되면, 좋아하는 파일명을 붙이고 「Start commit」를 눌러 저장합시다.

workflow 편집

워크 플로우를 편집합니다.
FTP의 접속 정보등은, 파일에 써 버리면 좋지 않기 때문에 「GitHub Secrets」에 나중에 써 갑니다.

.github/workflows/hoge.yml

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ main ]
-  pull_request:
-   branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [12.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
+    - name: npm install        # パッケージをインストール
+      run: npm install
+    - name: test
+      run: npm run test:unit   # unitテストを実行
+    - name: build              # ビルド
+      run: npm run build --if-present
+
+    - name: List output files
+      run: ls                           # ファイルリストを表示
+
+    - name: FTP-Deploy-Action
+      uses: SamKirkland/[email protected]   # FTPを使ってサーバーにDeployするアクションを実行
+      env:                                        
+        FTP_SERVER: ${{ secrets.FTP_SERVER }}     # FTPサーバーのURLを設定
+        FTP_USERNAME: ${{ secrets.FTP_USERNAME }} # FTPのユーザー名を設定
+        FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }} # FTPのパスワードを設定
+        LOCAL_DIR: dist                           # どのディレクトリのデータをアップロードするか
+        REMOTE_DIR: /      # ロリポップ！FTPサーバのどのディレクトリにアップロードするか
+        ARGS: --delete

이제 메인 브랜치에 push되었을 때 자신의 롤리팝 FTP 서버의 루트에 vue의 빌드한 아티팩트가 올라가게 됩니다.

FTP 연결 정보 설정

GitHub Secrets에 FTP 연결 정보를 설정합니다.
먼저 '롤리팝!'에 로그인하여 '사용자 설정 - 계정 정보'를 엽니다.
"서버 정보"에 있는 "FTP 서버", "FTP 계정", "FTP 암호"를 기록해 둡니다.

메모되면 이전 리포지토리로 돌아가 리포지토리의 설정을 엽니다.
그 중에서 "Secrets"를 선택하고 "New Repository secrets"를 눌러 다음을 만듭니다.

FTP_SERVER (앞서 메모 한 FTP 서버를 걸어)

FTP_USERNAME (이전에 메모 된 FTP 계정을 거친)

FTP_PASSWORD (이전에 메모 된 FTP 암호를 입력)

이것으로 모든 설정이 종료됩니다.
나중에 메인 브랜치에 Push 되었을 경우, 자동으로 「테스트 빌드 배치」가 행해지게 되어 있습니다.
결과나 상태를 보고 싶은 경우는, 「Actions」를 열면 다음과 같이 표시된다고 생각합니다.
이와 같이 체크 마크가 붙어 있으면 모든 job이 정상적으로 끝나고 있습니다.

참고로 한 기사 등

GitHub Actions를 사용한 FTP 자동 배포

GitHub Actions 워크플로 구문