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

5 min read読了の目安(約5100字

はじめに

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

前提条件

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

対象者

  • いちいちFTPサーバーを使ってドラッグ&ドロップで更新するのが面倒な人
  • レンタルサーバーにVue.jsやReactのプロジェクトがある人
  • レンタルサーバーにWordPressのテーマがある人
  • 自動デプロイに興味がある人

メリット

  • 楽できる
  • 手軽にCI/CD構築っぽいことにチャレンジできる

デメリット

  • 技術スタックがちょっと古いかも

活用ツール

  • GitHubActions
  • FTPDeploy2.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-Action2.0.0のGitHubを確認

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

04. GitHubActionsの設定

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

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

  • 静的ファイルの場合(私の場合はWordPressのカスタムテーマです)
name: ftp upload
on:
  push:
    branches:
      - master(※01)
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: ${{ secrets.FTP_SERVER }} 
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
          LOCAL_DIR: .(※02)
          REMOTE_DIR: /www/**反映させるディレクトリ**(※03)
          ARGS: --delete

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

  • vue.jsのサンプル

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

name: FTP upload

# Controls when the action will run. 
on:
  push:
    branches:
      - master
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
        
      - name: Build Project
        run: |
          npm install
          npm run build --if-present
      - name: List output files
        run: ls
      
      - uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: ${{ secrets.FTP_SERVER }} 
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
          LOCAL_DIR: dist(※01)
          REMOTE_DIR: /home/ユーザー名/www/**反映するディレクトリ**(※02)
          ARGS: --delete

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

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

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

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

05. 動作確認

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

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

無事アップロードできてます!静的ファイルの方は14分、Vue.jsの方は5分弱で完了していますね。
課題としては変更分だけ反映するようにしたいのですが、そんなに更新しないので一旦はOKとしています。
もしアドバイス等あればご教示いただけると大変嬉しいです!

注意点

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

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

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