GitHub Actionsで静的ファイルの自動デプロイ（CI / CD）環境を構築する方法

昨今CI/CDという言葉がソフトウェア開発だけでなく、Web制作の領域まで浸透してきました。CI/CDは「Continuous Integration（継続的インテグレーション）」と「Continuous Delivery（継続的デリバリー）」の略になります。

継続的インテグレーション、継続的デリバリーと聞いても意味がわかりづらいかと思いますのでもう少し噛み砕いて説明すると以下のようになります。

「CI/CDとはテストや本番環境へのデプロイを自動化する仕組み。」

つまりCI/CDは特定の技術を指す用語ではなく、「開発から納品までの工程をできるだけ自動化させる手法」のことを言います。

CI/CDは人によってまだ馴染みの無い概念かもしれませんが、今回紹介する手法を用いることで制作効率を飛躍的に高めることができるのでぜひ最後まで一読いただけると嬉しいです。

この記事では上述したCI/CDをGitHubが提供するサービス「GitHub Actions」を用いて構築する手法を解説していきます。

また今回は静的ファイルの自動デプロイにフォーカスしているため、Node.jsを用いたフロントエンド開発環境を実行し、レンタルサーバーとFirebaseにデプロイする方法をそれぞれまとめています。

GitHub Actionsとは

GitHub ActionsはGitHubが提供する機能の一部でCI/CDを含む様々なワークフローを設計できます。GitHubのアカウントを有していれば無料プランから利用することができるので開発者にとっては非常にありがたいです。

GitHub Actionsは、コードを保存するのと同じ場所でソフトウェア開発のワークフローを自動化し、プルリクエストやIssueで協力することを支援します。 個々のタスクを書き、アクションを呼び出し、それらを組み合わせてカスタムのワークフローを作成できます。

GitHub Actionsについて

GitHubをこれまで利用したことが無い方は以下リンクからアカウントを作成してください。

Build software better, together

GitHubの基本的な使い方は以下リンクにまとめています。

GitHubの使い方解説【非エンジニア/初心者向け】

プロジェクトの用意

GitHubアカウントの用意ができたら、新規リポジトリを作成しプロジェクトコードをリポジトリにpushします。

ここではReactのフレームワークGatsby.jsを使ってサンプルプロジェクトを用意したいと思います。Gatsbyに関する詳細は公式サイトを参照してみてください。

GatsbyJS

以下コマンドでGatsby CLIをインストールします。

npm install -g gatsby-cli

プロジェクトを次のコマンドで作成します。

gatsby new プロジェクト名

作成したプロジェクトへ移動します。

cd プロジェクト名

以下コマンドで開発環境が起動すれば完了です。

gatsby develop

プロジェクトのフロントはターミナルに表示されるlocalhostへアクセスすることで確認できます。

http://localhost:8000/

表示確認ができれば、ターミナルを切ってGitHubへコードをpushしてください。

GitHub Actionsの設定

GitHub Actionsの設定はコードベースで行います。ただ、初めはどのような仕組みになっているかわかりにくいかと思いますのでGitHub管理画面から設定を見ていきましょう。「Actions」のタブを選択すると以下のような画面が表示されます。

リポジトリの構成に応じてオススメのワークフローをGitHubが提示してくれます。他にも開発でよく利用されるワークフローがあらかじめいくつか用意されています。

プロジェクト構成に近いワークフローを選ぶと設定工数を抑えることができます。GitHub管理画面上で設定するとプロジェクトディレクトリに設定フォルダが作成されます。

.github/workflows/deploy.yml

ローカルで直接記述する際は上記と同様の構成でフォルダを作成してください。ymlファイルの名前は任意でつけることができます。

以降の設定はデプロイ先によって少し変わりますので用途に応じて必要箇所を確認してください。

レンタルサーバーへデプロイする場合

レンタルサーバーへデプロイする場合はFTP/FTPS/SFTPなどを通じて指定先にコンテンツを配置することになります。ここではレンタルサーバーヘテムルにコンテンツを自動アップロードする仕組みを作りたいと思います。

レンタルサーバー｜超高速オールSSDのヘテムル - お試し15日間無料

ヘテムルのFTP情報を確認します。管理画面にログイン後、サイドメニューの「FTPアカウント」で確認できます。

次にGitHub Actionsの設定ファイル（ymlファイル）の中身を以下の記述にします。

以下の記述ではbranchesで設定したmasterブランチでpush, pull_requestが発生した場合に実行されるように設定されています。指定したいブランチに変えて適宜変更してください。

on: 
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

次に利用するNode.jsのバージョンを指定します。
Node.jsワークフローの雛形が以下になりますのでこちらも必要に応じて調整してください。

actions/starter-workflows

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

昨今のフロントエンド開発では開発コードと本番コードのディレクトリを分けて構成することが多く、一般的に公開ディレクトリはソースコード管理から外すことが多いかと思います。その場合、プロジェクトで必要なパッケージインストールとビルドをデプロイ時に実行する必要があります。ビルドのタスクが以下になります。

以下では yarnを利用していますが、npmを利用して問題ありません。

- name: Build Project
      run: |
        yarn install
        yarn build

ビルド後、FTP接続を行いファイル転送する記述を以下のように記載します。FTPアップロードにはFTP-Deploy-Actionを利用します。

SamKirkland/FTP-Deploy-Action

- name: FTP-Deploy-Action
      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: public

FTPのホストやパスワード情報は直接コード管理するのではなくGitHubのSecretsで環境変数にして隠蔽してください。

ftp-server: ${{ secrets.FTP_HOST }}
ftp-username: ${{ secrets.FTP_USERNAME }}
ftp-password: ${{ secrets.FTP_PASSWORD }}
git-ftp-args: --remote-root ${{ secrets.FTP_REMOTE_ROOT }}

ここまで設定が完了したら。設定情報をコミットしておきます。
次に環境変数をGitHub側に設定します。GitHub管理画面からSettings > Secretsを展開すると以下のような画面が表示されます。

New secretを押下して先ほど記述した環境変数名を同名で入力します。Valueには環境変数として秘匿情報を入力してください。

• FTP_HOST: ホスト名（アドレス）
• FTP_USERNAME: ユーザー名
• FTP_PASSWORD: パスワード
• FTP_REMOTE_ROOT: アップロード先ディレクトリ

＊FTP_REMOTE_ROOTはコンテンツをアップロードするFTPサーバー上のディレクトリを意味します。

local-dirには公開ディレクトリを記述します。ここではpublicにしています。

最後にローカルのプロジェクトディレクトリに.git-ftp-includeファイルを作成してください。.git-ftp-includeに以下内容を記載し、保存します。

!public/

公開ディレクトリは通常ソースコード管理からは無視されてしまうため、.git-ftp-includeでFTPアップロード時にデプロイ対象と認識させる必要があります。

SamKirkland/FTP-Deploy-Action

以上の設定まで完了した後、指定したブランチにpushしてビルド、デプロイが正しく実行されるか確認してみてください。

Firebaseへデプロイする場合

Firebaseへデプロイする際にはあらかじめFirebaseプロジェクトの作成準備を済ませておいてください。Firebaseを初めて触る方は以下リンクを参照してください。

Firebase Hosting を使った静的サイトのホスティング方法

ローカルのプロジェクトディレクトリでFirebaseの初期設定を行います。以下コマンドでFirebaseの設定ファイルを作成します。

firebase init

最後に以下コマンドでFirebaseのトークン発行し、コピーしておきます。

firebase login:ci

次にGitHub Actionsの設定ファイル（ymlファイル）の中身を以下の記述にします。

GitHub Actionsの設定ファイルはGitHub Actions for Firebaseのワークフローを利用します。

GitHub Action for Firebase - GitHub Marketplace

今回プロジェクトのビルドが必要なため、パッケージインストールとビルドのタスクを追記して利用しました。

最後に以下で使用しているFIREBASE_TOKENを環境変数に登録して利用できるようにします。

- name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

GitHub管理画面からSettings > Secretsを展開し、FIREBASE_TOKENの名称でFirebaseのトークンを登録します。

以上の設定が完了したら、実際に指定したブランチへpushしてビルド、デプロイが正しく実行されるか確認してみてください。

Gatsbyの場合以下のような画面が確認できれば完了です。

補足

GitHub Actionsで設定されたワークフローが正しく動作しているかはGitHub 管理画面のActionsからリアルタイムで確認することができます。

まとめ

GitHub Actionsを利用することでデプロイ時の工数削減だけでなく、テストコードをワークフローに組み込むことで事前の納品チェックや人力での作業ミスを防ぐことができるようになるかと思います。GitHubがプロジェクトで利用可能であればぜひ積極的に利用していきたいですね。