ロリポップにGitHubActionsを使ってVue.jsを載せる方法の備忘録

こんにちは、今回はレンタルサーバーのロリポップにVue.jsのプロジェクトを載せる方法を記します。

面倒臭い方法でも良いのであれば、
Vueプロジェクトをビルドして作られたフォルダ下(dist)をFTPなりでサーバに置けば実行できます。

しかし、今回はgit hubにmasterブランチでプッシュしたときにデプロイする方法にします。

まずは、ロリポップのユーザ情報から

HOST
USERNAME
PASSWORD
REMOTE_ROOT

をコピーします。
REMOTE_ROOTはサーバー上でプロジェクトを置くフォルダです。

次にgit hubからプロジェクトのActionsを開きます。
Actionsで適当にYAMLファイルを作成します。

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

name: lolipop

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

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy via FTP
        uses: SamKirkland/FTP-Deploy-Action@3.0.0
        with:
          ftp-server: ${{ secrets.FTP_HOST }}
          ftp-username: ${{ secrets.FTP_USERNAME }}
          ftp-password: ${{ secrets.FTP_PASSWORD }}
          git-ftp-args: --remote-root ${{ secrets.FTP_REMOTE_ROOT }}
          local-dir:project/dist //ローカルディレクトリのdist下

次にSetting > Secretsから
ftpの情報をそれぞれ入力します。