vueのプロジェクトを「ロリポップ！」へGitHub Actionsをつかって自動デプロイする

# はじめに
ロリポップなどのレンタルサーバにvueなどのものを手動でデプロイするのってめんどくさいですよね。
今回は「テスト->ビルド->デプロイ」の一連の流れをGitHub Actionsで自動にやってくれるように設定します。

# 前提
- Vueのプロジェクトを作成しておりGitHubで管理している
- 今回レンサバの例としてつかうのはロリポップ

# workflowの作成
vueのプロジェクトのリポジトリの「Actions」タブを開くと以下のようなページになります。
![githubactions.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/81ffef09-0073-4e31-6b3a-81cc597c36af.png)
「Continuous integration workflows」の中にある「Node.js」を選択し、「set up this workflow」を押します。
![githubactions2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/c4ff9112-2dab-c682-34c6-f7100baa53e5.png)
このようなページになったら、好きなファイル名をつけ「Start commit」を押して保存しましょう。

# workflowの編集
ワークフローの編集をしていきます。
FTPの接続情報などは、ファイルに書いてしまうと良くないので「GitHub Secrets」にあとで書いていきます。

```diff:.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/FTP-Deploy-Action@2.0.0   # 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
```

これで、mainブランチにpushされた際に自分のロリポップのFTPサーバのルートにvueのビルドした成果物が上げられるようになります。

# FTP接続情報の設定
「GitHub Secrets」にFTPの接続情報を設定します。
まず、「ロリポップ！」にログインして「ユーザー設定ー＞アカウント情報」を開いてください。
「サーバー情報」にある「FTPサーバー」、「FTPアカウント」、「FTPパスワード」をメモってください。
![FireShot Capture 009 - ロリポップ！ユーザー専用ページ - アカウント情報 - user.lolipop.jp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/d8a367a3-a4ce-a110-8d75-b4c09e156733.png)
メモったら、先程のリポジトリに戻って、リポジトリの「Settings」を開きます。
その中の「Secrets」を選択し、「New Repository secrets」を押して以下のものを作成します。![FireShot Capture 012 - Secrets - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/ebba86ce-57ae-03bc-bc58-08aa12c2f818.png)
 
1. FTP_SERVER（先程メモったFTPサーバーをかく）
2. FTP_USERNAME（先程メモったFTPアカウントをかく）
3. FTP_PASSWORD（先程メモったFTPパスワードをかく）

これで、設定はすべて終了です。
このあとからmainブランチにPushされた場合、自動で「テスト・ビルド・デプロイ」が行われるようになっています。
結果や状態を見たい場合は、「Actions」を開くと以下のように表示されると思います。
このようにチェックマークがついていればすべてのjobが正常に終わっています。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/894389de-9af1-d695-2478-e2a4368c7d5f.png)


# 参考にさせていただいた記事など
- [GitHub Actionsを使ったFTPの自動デプロイ](https://qiita.com/chieeeeno/items/6be835c74d6d7f597c6a)
- [GitHub Actionsのワークフロー構文](https://docs.github.com/ja/free-pro-team@latest/actions/reference/workflow-syntax-for-github-actions)