🌸

さくらレンタルサーバーでも自動デプロイがしたい！【GitHubActions】

2021/04/15に公開

Vue.js

はじめに

近年クラウドサーバーの需要がとても高くなってきており、レンタルサーバーを活用するケースはかなり減ってきました。
しかしながら現在もなおレンタルサーバーを活用しつつ、FileZillaなどのFTPクライアントソフトを利用して、ドラックアンドドロップでデータの更新をしながら運営しているWEBサイトもまだまだ残っていると思います。
今回はレンタルサーバーで動いているサイトの管理を少しでも楽に出来ないかと思い、自動デプロイ環境を構築しましたのでつまづいた点も合わせて紹介したいと思います。

前提条件

GitHubのアカウントを持っている
レンタルサーバーを契約している

対象者

サイト更新をFTPクライアントソフトを使ってドラッグ&ドロップで更新するのが面倒な人
サイト更新をsshログインして頑張っている人
レンタルサーバーにVue.jsやReactのSPAサイトを持っている人
レンタルサーバーにWordPressのオリジナルテーマを持っている人
自動デプロイに興味がある人

メリット

楽できる
ミスが減る
手軽にCD環境構築にチャレンジできる（ここではテストがないので継続的デプロイかと思います。）

デメリット

ディレクトリ構造の変更には柔軟に対応できない。
指定間違えなどをすると取り返しのつかない可能性がある。（バックアップをとってください）

活用ツール

GitHubActions
FTPDeploy4.0.0
さくらインターネットレンタルサーバー[ビジネスプロ]（スタンダードプランでも確認済み）

GitHubActionsとは

GitHub公式から出ているワークフロー自動化ツール。
このツールがあるからこそ、簡単に自動デプロイ環境を作れます！
公式ドキュメント

レンタルサーバーのディレクトリ確認

今回はさくらインターネットのレンタルサーバーを例に挙げて進めていきたいと思います。
テスト的に接続してみましょう。

ssh ユーザー名@サーバー名(*****@*****.sakura.ne.jp)

パスワードを聞かれますので入力して進めます。
すると

FreeBSD 9.1-RELEASE-p24 (SAKURA17) #0: Thu Feb  5 10:03:29 JST 2015

Welcome to FreeBSD!

[*****@www410b ~]$

このように接続できるはずです。
lsコマンドなどで現在地等を確認しましょう。
さくらインターネットレンタルサーバーではwwwディレクトリに公開するサイトのデータが格納されています。

動作内容解説

01. レンタルサーバー側の設定(さくらインターネット)

こちらはさくらインターネットの場合、デフォルトでは国外IPアドレスフィルタという設定が有効になっています。こちらは国外のIPアドレスからのアクセス拒否する設定になっていて、GitHubActionsから自動でデプロイする際に弾かれてしまいますので設定を無効に変更します。
セキュリティ -> 国外IPアドレスフィルタ -> 無効に変更して保存

02. シークレットキーの設定

レンタルサーバーへの接続情報をリポジトリに載せるのは危険なので、GitHubのSecretsキーを利用します。
GitHubのリポジトリを開き、以下手順でキーの作成に移ります。
Settings -> Secrets -> New repository secret

上記画面を参考に、Nameに識別名、Valueに実際の値を入れて保存します。
今回は以下の3つを用意してください。

FTP_SERVER ... サーバー名
FTP_USERNAME ... ユーザー名
FTP_PASSWORD ... パスワード名
いずれもディレクトリ確認時に使用した値です。

03. FTP-Deploy-Action4.0.0のGitHubを確認

最低限ドキュメント（Readme.md）には目を通しておきましょう。
以下リンクより今回利用するツールは「FTP-Deploy-Action」というツールです。
最新版は4.0.0（2021年4月15日時点）です。
こちらより使用方法を確認します。
※バージョンの違いについては2.0.0 -> 3.0.0または3.0.0 -> 4.0.0を参考にしてください。
作ってくれた人ありがとうございます！
※4系は差分のみ反映してくれる仕様になっています。後述します。

04. GitHubActionsの設定

一通り目を通したところで実際に活用していきたいと思います。
サンプルも乗っていたと思いますのでそちらを参考にしていただいても構いません。

Actions -> set up a workflow yourself に進みます。
するとymlファイルが開きますので、以下を参考に書きかえてください。

静的ファイルの場合(私の場合はWordPressのカスタムテーマです)

name: ftp upload
on:
  push:
    branches:
      - master（※０１）
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - name: 🚚 Get latest code
        uses: actions/checkout@v2.3.2
	
      - name: 📂 Sync files
        uses: SamKirkland/FTP-Deploy-Action@4.0.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.ftp_password }}
          local-dir: ./（※02）
          server-dir: /www/**反映させるディレクトリ**(※03)

※01 : ワークフローを起動させるブランチ名。mainかmasterになると思います。
※02 : server-dirはリポジトリのURL指定。
※03 : ビジネスプロプランの場合です。後述します。

vue.jsのサンプル

name: FTP upload

on:
  push:
    branches:
      - master
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - name: 🚚 Get latest code
        uses: actions/checkout@v2.3.2

      - name: Use Node.js 12
        uses: actions/setup-node@v2-beta
        with:
          node-version: '12'

      - name: Build Project
        run: |
          npm install
          npm run build --if-present
      
      - name: 📂 Sync files
        uses: SamKirkland/FTP-Deploy-Action@4.0.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/（※01）
          server-dir: /home/ユーザー名/www/**反映するディレクトリ**（※02）

※01 : Vue.jsでビルドした時に生成されるディレクトリのパス。ここでは dist。
※02 : スタンダードプランでは、homeからパスを指定しないと失敗した。後述。

プランによるREMOTE_DIRの指定について
今回、さくらインターネットのレンタルサーバーで試したところ、スタンダードプラントビジネスプロプランで、server-dirのパス指定が異なっていました。
こちらサーバー側での設定が原因かもしれませんが、エラーが出てないのに反映されない場合はSSHログインしてファイルを探してみてください。

注意点
こちらの方法ではサーバーに直接アップロードしています。
指定方法など間違えると、既存アップロードデータ等が削除されてしまう可能性があります。
きちんと動作確認した上で、本番利用する際はバックアップなどとり、注意して進めてください。

公式ドキュメントに詳しく動作説明等の掲載がありますので、気になる方はみてください。

05. 動作確認

03での設定は、masterブランチにGit Pushもしくはプルリクエストのマージをした際に発火される設定になっています。

静的ファイル
Vue.jsのファイル

無事アップロードできました！

おまけ

当初はFTP-Deploy-Actionのバージョンは2.0.0で記事を執筆したのですが、諸事情あり4系を調査しました。2系と比較すると4系には以下のような特徴がありました。

速度パフォーマンスが約2倍ほどに改善。
レンタルサーバー上に.ftp-deploy-sync-state.jsonというファイルが生成され、差分検出してデプロイされるようになった。→2回目以降が爆速になった。

ということで記事全体を4系へアップグレードした次第です。

ちなみに以下は旧バージョンの2系での結果です。

静的ファイル
Vue.jsのファイル

WordPressの方は14分、Vue.jsの方は5分弱で完了しています。

比較画像を用意しました。以下はWordPressのテーマで左が4系、右が2系での比較です。

4系が7分ほど、2系が14分ほどなので、およそ倍という計算です。
（テスト的にいくつか試したところ、ビルドが必要ないものは2倍のパフォーマンス改善でした。）

さらにWordPressのテーマに関しては、次回以降は差分のみ反映となるので、1回のワークフローに1分かからないほどになりました。私の利用規模ではGitHubActionsの無料範囲内で十分足りるという印象です。

注意点

最後に再度注意点を案内しておきます。

本番利用の際は気をつけて！
プランや設定によって、リモートディレクトリのパス指定が異なる場合があります。

先人のおかげでとても簡単に自動デプロイ環境を構築することができました。
いちいちFTPクライアントソフトを使わなくてよくなったので、個人的にはよかったと思います。