GitHubにプッシュした内容を開発サーバで確認したい時、手動でファイルを反映させていくのは手間ですよね。
今回はGitHubにプッシュした内容を自動で開発サーバに反映させる方法をご紹介します。
1. GitHubにリモートリポジトリを作成する
まず最初にGitHubにリモートリポジトリを作成しましょう。
お好きなリポジトリ名を入力し公開設定をしたら「Create Repositry」ボタンをクリックします。
これでリモートリポジトリの作成が完了したので一旦GitHubから離れます。
2. サーバとのSSH接続
リモートリポジトリへのpush内容を自動でサーバに反映するためには、サーバとのSSH接続が必要になります。
今回はさくらのレンタールサーバへの反映を例として取り上げますので、まずは下記の情報をご用意ください。
※さくらレンタルサーバに契約していて、アカウントとパスワードが発行されていることが前提です。
FTPサーバ名：example＠example.sakura.ne.jp
アカウント名：example
初期フォルダ：www
パスワード：password
私はMacを使用しているので、まずターミナルを立ち上げます。ターミナルでの作業に慣れていない方はここで投げ出したくなるかもしれませんが、恐れずに進みましょう。
ターミナルを立ち上げたら下記を入力します。
ssh [FTPサーバ名]
ssh example＠example.sakura.ne.jp
入力するとパスワードを2回求められるので、パスワードを2回入力してください。
正常にログインできると「Welcome to FreeBSD!」と表示され、文の頭に％が自動で付きます。
3. リモートリポジトリをサーバにクローンする
先程SSHでサーバにアクセスしたように、GitHubもサーバにSSHでアクセスできなければサーバ内の情報に変更を加えることができません。ですのでサーバ上でSSHキーを作成し、作成した”鍵”をGitHubに持たせる必要があります。
以下ではその手順について説明します。
またターミナルでの作業となりますが、実際に手を動かしてトライ&エラーで挑戦してみましょう。
3-1. サーバ上でSSHキーを作成する
先程SSH接続していたターミナルの画面を確認してください。
接続しているサーバ名が表示されていれば問題ありません。
この状態からssh-keygen(SSHの認証鍵の生成コマンド)と入力してください。
入力すると次から次へと難しそうな表示が現れますので、一つ一つ順番に対応していきましょう。
①% ssh-keygenを入力すると表示されます。
これはどこに鍵を保存するかを聞かれています。ディレクトリに問題がなければEnterキーを押しましょう。
②鍵を上書きするかどうかを聞かれます。
初めて作成する場合は聞かれませんが、問題なければ「y」と入力しましょう。
③任意のパスワードを2回求められます。
Enterキーを2回押すことで先に進めますが、任意のパスワードを設定しておいてください。
後ほど使用します。
④id_rsaとid_rsa.pubの保存場所を表しています。
鍵は秘密鍵と公開鍵の2種類が作成されますが、今回GitHubに持たせるのはid_rsa.pub(公開鍵)となります。
id_rsa = 秘密鍵
id_rsa.pub = 公開鍵
以上で鍵の作成は完了です。
3-2. GitHubに作成したSSHキーを登録する
ターミナルからでもこの作業は行えますが、分かりやすいようにFTPツールを使います。
先程SSH接続していたFTPサーバにお好きなFTPツールを使ってログインしてください。
ログインできたらターミナルで表示されていた保存先のディレクトリまで移動し、「id_rsa.pub」ファイルを開きます。
ファイル内にはssh-rsaから始まるアルファベットが羅列されていますので、「ssh-rsa」を含む全てをコピーしましょう。
コピーが完了したらGitHubを開いてください。
右上のメニューアイコンから「Settings」→「SSH and GPG keys」→「New SSH Key」の順で進みます。
「New SSH Key」をクリックすると、先程作成した公開鍵を登録する画面が表示されますので、「Title」と「Key」を入力し、「Add SSH Key」をクリックすれば、登録完了です。
3-3. サーバにクローンする
以上の作業でGitHubがサーバに接続するための設定が完了したので、次は実際にGitHubのリポジトリをサーバにクローンしてみましょう。
まずはターミナルでクローン先のディレクトリまで移動します。
下記のコマンドを使用して確実にサーバ内を移動しましょう。
pwd ... 現在地を確認することができます。
cd 〇〇 ...今いるディレクトリを基準にディレクトリを移動できます。
ls ... 今いるフォルダ内に存在するファイル、フォルダを一覧で見ることができます。
pwdコマンドを打つことで、今「/home/ユーザ名」ディレクトリにいることが分かります。
私は「/home/ユーザ名/www」ディレクトリにクローンしたいので、
と入力し、ディレクトリを変更します。
変更できたかどうかは再度pwdコマンドを打つことで確認できます。
ディレクトリの移動が完了したらクローン用のURLをコピーします。
GtiHubのリポジトリ管理画面に移動し、「Code」ボタンをクリックして「SSH」のURLをコピーしてください。
コピーしたらターミナルに移動し、
①git cloneと入力した後にURLを貼り付けてEnter。
②パスワードを求められるので、SSHキーを作成した際のパスワードを入力。
③クローン完了
git clone git@github.com:***/***.git
無事にクローンが完了したら、実際にFTPツールを使って確認してみましょう。
ターミナルでgit cloneを打ち込んだディレクトリにリポジトリ名のフォルダが作成されていると思います。
これでGitHubとサーバのSSH接続が完了しました。
4. リモートリポジトリへのpushを自動でサーバに反映させる
いよいよ自動デプロイの設定に入ります。
自動デプロイの方法はいくつかあるのですが、今回はGitHub Actionsを利用して設定しようと思います。
GitLabやBitbucketでは方法が異なりますのでご注意ください。
4-1. サーバ側の設定
さくらサーバの場合、デフォルトでは国外IPアドレスフィルタがかかっています。
コントロールパネルより「セキュリティ」→「国外IPアドレスフィルタ」→「アクセス制限設定」の順で無効に変更してください。
4-2. 必要な情報をSecretsに登録する
GitHubではパスワードやサーバのアクセス情報など、機密情報を暗号化された変数として使用することができます。
GitHubのリポジトリ管理画面「Settings」→「Secrets」→「New repository secret」の順でクリックすると、変数の登録画面に遷移します。
ここでは変数名(Name)と代入する値(Value)を正確に入力しましょう。
サーバにSSHログインするために使用したFTP情報を再度使用します。
下記4つの情報を登録するので、自動デプロイしたいサーバのFTP情報を登録してください。
①FTPサーバ名
②FTPアカウント名
③FTPパスワード
④自動デプロイしたいディレクトリ
FTP_SERVER：example.sakura.ne.jp
FTP_USERNAME：example
FTP_PASSWORD：password
FTP_SERVER_DIR：www/deploy-test/ ※ライブラリの仕様上、最後に/をつける必要があります。
4-3. GitHub Actionsの設定
GitHub Actionsの設定を行います。
GitHubのリポジトリ管理画面「Actions」→「set up a workflow yourself」をクリックすると、Workflowファイルの作成画面に遷移します。
ここでは様々なWorkflow(GitHubへの指示)を作成することができます。
作成画面に遷移したら、デフォルトで入力されている内容を下記の記述に変更してください。
name: Deploy via Github Actions to Production
on:
push:
branches:
- main
tags:
- '[0-9]+.[0-9]+.[0-9]*'
jobs:
test:
name: Deploy to server
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Sync files
uses: SamKirkland/FTP-Deploy-Action@4.1.0
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
server-dir: ${{ secrets.FTP_SERVER_DIR }}
書き換えが完了したら画面右上の「Start commit」ボタンよりファイルをコミットしてください。
以上で全ての手順が終了です。
正常に動いているかテストする場合は、ターミナル、ソースツリー、ブラウザから、どの方法でも良いので、GitHubにファイルをpushしてみましょう。
GitHub Actionsが正常に機能している場合、「Actions」画面に緑のチェックが入ります。ここが赤や黄色だとエラーが起きているので、Secrets項目やymlファイルに間違いがないか見直してみましょう。
おわりに
今回はGitHub環境での自動デプロイ設定について紹介しました。
WordPressの場合テーマファイルをGit管理すれば、複数人での開発も容易です。一度設定してしまえば都度サーバにアップするといった面倒な作業を省略でき、開発の時短にもなりますので、ぜひこの記事を参考に開発環境の構築に取り組んでみてください。
