GitHub Actions + SCPでレンタルサーバーにデプロイするやつ💣

目次

1.概要

2.そもそもGitHub Actionsって？？？

3.手順
3_1.① シークレットにログイン情報を登録
3_2.② action.yml を作成

4.モデルケース
4_1.ブランチを分けた開発の場合
4_2.Sassを用いている場合
4_3.お金について

5.弊社で運用しているaction.yml

6.最後に

概要📝

無駄話はいらねぇ！早く方法を教えろ！
👉 手順だけ見たい人はこちらにジャンプ

今回は、社内で手動デプロイをGithub Actionで自動化する機会があったので備忘録的に
Github Actionsでレンタルサーバーへのデプロイ作業を自動化する方法
をまとめていきます🧨

そもそもGitHub Actionsって？？？

GitHubが提供してるCI/CDの仕組み。
Githubがホスティングしたランナー、またはセルフホストしたランナー上で実行され、リポジトリに対するアクションをトリガーとして予め設定した動作を実行する機能です。
GithubがホスティングしているランナーはUbunt、Windows、Mac OSがあります。

予め設定した動作は、ユーザーがある程度自由にカスタマイズでき、
たとえば...
「テストを自動で走らせる」
「ビルド済みのファイルをアップロードする」
「プルリクエストが作成されたらSlack通知を飛ばす」
など、使い方はさまざまです。

まぁ～ざっくり言うと、「何らかのトリガーでいろいろやってくれるロボ」 です🤖

今回はその中でも、今回は 「ファイルをSCPでレンタルサーバーに送る」 という、
実際のWeb運用でよくある使い方にフォーカスして紹介します。

手順🤚

ここでは秘密鍵を用いたログインでデプロイする方法を書いていきます。

① シークレットにログイン情報を登録

GitHubリポジトリの
Settings > Secrets and variables > Actions にて、以下を登録：

Key名	値（Value）
SERVER	接続先のIPまたはホスト名
USERNAME	サーバーログインユーザー名
KEY	秘密鍵（改行含めてフルで）
PORT	ポート番号（たぶん22とか10022とか）
PASSWORD	秘密鍵にパスフレーズがある場合だけ（ないなら不要）

この時、サーバーのSSHは「国外からのアクセス」を許可しましょう。
許可されていないと「ssh: handshake failed: EOF」とエラー吐いてきます

---

② action.yml を作成

Actionsを登録したいリポジトリの上部タブより「Actions」を選択。
Simple workflowを選択します。

編集画面が出たらデフォルトの内容を消して下記を入力！

action.yaml

name: Deploy

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@latest

      # SFTPでアップロード
      - name: Upload via SFTP
        uses: appleboy/scp-action@latest
        with:
          host: ${{ secrets.SERVER }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          passphrase: ${{ secrets.PASSWORD }}
          source: "<転送したいディレクトリ>"
          target: "<転送先のディレクトリ>"

入力が完了して「Commit changes...」を選択、
コミットメッセージ等々入力してコミットをすると実行されます！

上記の状態だと、masterブランチのpushを検知したら、そのままmasterブランチの内容を対象のレンタルサーバーへデプロイするのでカスタマイズしたい人はしてください！

下のほうに実際の運用でありそうなモデルケースを書きますね📝

モデルケース💃

ブランチを分けた開発の場合

以下の公式ドキュメントを参考に on.push.branches を複数書くと、
各ブランチごと処理を分けたりすることもできます！

例えば、[master] [stg] という二つのブランチにプッシュが行われた際にGithub actionを発動させたい場合は下記のように記述！

action.yml

on:
  push:
    branches:
      - master
      - stg

その後に続く処理も if 条件で分けられるから、環境ごとに処理を出し分けたいときに便利🙆‍♀️

action.yml

---省略---

# masterブランチでの処理
- name: Processing to master
    if: github.ref == 'refs/heads/master'
    run: <masterブランチでの動作>

# stgブランチでの処理
- name: Processing to staging
    if: github.ref == 'refs/heads/stg'
    run: <stgブランチでの動作>

---

Sassを用いている場合

「SCSSだけGitに入れて、CSSは追跡外にしたい」っていう現場は多いと思います。
その場合は、GitHub Actions内で npx sass してCSSを生成、サーバーに送る感じでOKです。

まずはNode.jsとnpmをセットアップ

action.yml

# Node.jsのセットアップ
- name: Setup Node.js
    uses: actions/setup-node@latest
    with:
        node-version: '16'

# npmのセットアップ
- name: Install npm
    run: npm install

Node.jsとnpmのおすすめ解説

ここまできたらようやくSassコンパイルの処理を記述。

action.yml

# SCSS のコンパイル
- name: Compile SCSS
    run: npx sass <対象のSassファイル or Sassフォルダ>:<出力先>

Node_moduleを用いている場合
そのままアップロードするとnode_modulesがそのままデプロイされてしまいます。
セキュリティ的にも容量的にもnode_modulesは 除外 あるいは 削除 してからデプロイしましょう！

---

お金について💰

・料金
Github Actionsはリポジトリの種類や稼働時間に応じて料金が変動します。

・パブリックリポジトリ：パブリックブランチの場合は無料
・プライベートリポジトリ：有料。ただし無料枠あり。
・使用するランナー（OS）によって稼働時間が変動。

料金表は以下の通りです。

プラン	Storage	分 (月あたり)
GitHub Free	500 MB	2,000
GitHub Pro	1 GB	3,000
組織の GitHub Free	500 MB	2,000
GitHub Team	2 GB	3,000
GitHub Enterprise Cloud	50 GB	50,000

Freeだとストレージ500MB/月、稼働時間2,000分/月まで使えるみたいですね。
弊社の環境ではランナーがUbuntu、Actionの稼働時間は一回当たり約30秒～1分でした。
約2,000回くらい動かせそうですね？

あ、ちなみに無料分超えた時はエラーになるそうです🫠
ストレージでは今回のactionではそこまで重要ではないので割愛します。

詳しい料金説明はこちらに

弊社で運用しているaction.yml

action.yml

name: Wordpress Deploy

on:
  push:
    branches:
      # 検証段階なのでmasterブランチの処理は未記載
      #- master
      - stg

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@latest

      # Node.js の環境セットアップ
      - name: Setup Node.js
        uses: actions/setup-node@latest
        with:
          node-version: '16'

      # npmインストール
      - name: Install Dependencies
        run: npm install

      # SCSS のコンパイル
      - name: Compile SCSS
        run: npx sass style.scss:style.css

      # 余分なファイルを削除
      - name: Remove files
        run: |
          rm -rf node_modules
          rm -rf .gitignore
          rm -rf package.json
          rm -rf package-lock.json
          rm -rf README.md

      # ブランチごと処理を分岐
      - name: Deploy to Production
        # 'refs/heads/xxxxxx' xxxxxxにブランチ名が入る
        if: github.ref == 'refs/heads/master'
        run: echo "Production"
        # 検証段階なのでmasterブランチの処理は未記載

      - name: Deploy to Staging
        # 'refs/heads/xxxxxx' xxxxxxにブランチ名が入る
        if: github.ref == 'refs/heads/stg'
        uses: appleboy/scp-action@latest
        with:
          host: ${{ secrets.SERVER }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          passphrase: ${{ secrets.PASSWORD }}
          source: "./*"
          target: "<target source>"

ランナーは「Ubuntu」
Node.jsを使用してSassをCSSにコンパイルしています。
その後不要なファイルを削除（除外）してアップロードしています。

最後に

今回はscp-actionを用いたActionsを取り上げましたがssh-action等他にもデプロイが行える機能はたくさんあります。

サーバーでコマンドやスクリプト実行させたい場合はssh-actionのほうが良さそうですね！
要件に応じて使い分けてみてください！

個人的には今後、
・デプロイ完了、新規issue追加でSlack通知を飛ばす
・テストコードの自動化
あたり実装できたら面白そうだなって思っています。

軽く会社紹介

弊社は東京の渋谷、愛知の名古屋を拠点としてデザインやWeb制作を行う制作会社です。
GASやZapierでの業務効率化もやっています。
コーポレートサイトに業務実績あげているのでお時間あるときに是非🙏

▼弊社のQiitaはこちら▼