🐈‍⬛

ローカルからGithub経由でXserverに自動デプロイするまでの手順

2023/05/06に公開

Git

GitHub

WordPress

tech

01.ローカルの開発環境をGitHubにプッシュ

ローカルで作成した開発環境をGithubにプッシュします。
今回は例としてName/sample.gitという名前の前提で進めます。

02.Xserver事前準備

02-01.XserverでGitHubからプルできるように設定

02-01-01.XserverへSSH接続できるように設定

できている場合は「02-01-02.」へスキップ。

Xserverの管理画面から、SSHの設定をする。

Xserverの管理画面で発行した場合は、keyファイルがダウンロードされるので、ローカルで任意の場所へ移動。
また、その際にパーミッションを600にしておく。
この辺りについては「Xserver SSH接続」などでググると詳しい情報がたくさん出るので割愛。

02-01-02.ローカルからXserverにSSH接続でログイン

Macならターミナルを起動、SSH接続してXserverへログインする。

$  ssh username@server_id.xbiz.jp -p 10022 -i .ssh/yourkey_file

※username、server_id、yourkey_fileは自身で設定したものに書き換える

はじめて接続した場合「Are you sure you want to continue connecting (yes/no/[fingerprint])?」と聞かれるので「yes」と打つ。

Xserverへログインが成功したらとりあえずGitが動いているかチェック。

$ git --version
git version 1.8.3.1

02-01-03.XserverでGitHub接続用の鍵を作成

$ cd #
$ ssh-keygen -f .ssh/github

パスフェーズは無しにしておく。

Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in .ssh/github.
Your public key has been saved in .ssh/github.pub.

公開鍵はGitHubのDeploy keysに登録するのでcatしてコピペしておく。

$ cat .ssh/github.pub

02-01-04.configで接続キーを指定

configファイルを作成。

$ vi .ssh/config

ホスト、ユーザー、キーを指定して保存。

config

Host github.com
        User git
        IdentityFile ~/.ssh/github

configのパーミッションを600にしておく。

$ chmod 600 .ssh/config

02-01-05.GitHubでDeploy keysに公開鍵を登録

GitHubのリポジトリを開き、SettingからDeploy keysを開く
Add Deploy keysで新規追加。名前（Title）はなんでも良い。keyにXserverで作成した公開鍵をコピペ。
Allow write AccessはチェックなしでOK。

02-01-06.XserverでGithubに接続できるかテスト

Xserverの操作に戻り、GitHubと接続できるかテスト。

$ ssh -T git@github.com
Hi Name/sample! You've successfully authenticated, but GitHub does not provide shell access.

※Name/sampleは自身のリポジトリ名が出る
Hi Name/sample〜がでればOK。

02-02.GithubからXserverにClone

GitHubと接続できることが確認できたら、任意のディレクトリに移動し、データをCloneする。
今回は、ドメインのディレクトリ（/home/server_id/mydomein.jp/）に指定。

$ cd /home/server_id/mydomein.jp
$ git clone git@github.com:Name/sample.git

クローン後、ファイルができているか確認してください。

$ ls
autoreply  htpasswd  log  mail  public_html  sample  script  xserver_php

今回の場合sampleという名前だったので、sampleのディレクトリがあればOK。

03.GitHubのActionを作成

03-01.GitHubでシークレットキーを設定

GitHubのリポジトリを開き、SettingからSecrets and variables→Actionsを開く。
New repository secretをクリックし、シークレットキーを設定。
今回設定する例はSSH接続に必要な設定です。

03-01-01.SSH_HOST

NameにSSH_HOSTと入力。
secretにサーバーのホスト名を入力。（例：sv000.xbiz.ne.jp）

03-01-02.SSH_USERNAME

NameにSSH_USERNAMEと入力。
secretにサーバー接続のユーザー名を入力。（Xserverの場合サーバーID）

03-01-03.SSH_PORT

NameにSSH_PORTと入力。
secretにサーバー接続のポート番号を入力。

03-01-04.SSH_PRIVATE_KEY

NameにSSH_PRIVATE_KEYと入力。
secretには02-01-01で取得したキーの中身をコピペ。

03-01-05.SSH_PASSPHRASE

SSH_PRIVATE_KEYにパスフェーズがある場合はこちらも設定。
NameにSSH_PASSPHRASEと入力。
secretにSSH_PRIVATE_KEYのパスフェーズを入力。

全て設定できると以下の通りになる。

03-02.GitHubのActionを作成

今回作りたいアクションはローカルからプッシュしたら、自動で開発環境へデプロイする流れです。
（本番環境などやりたいことによって適時内容を置き換えてください）

まず、ローカルの開発環境のルートディレクトリに移動。
developブランチになっているか確認。
なってなかったらdevelopに切り替え。

次に、Action用のディレクトリを作成。

$ mkdir .github/workflows

.github/workflowsディレクトリの中にdevelop.ymlを作成。
ファイルの内容は以下の通り。

develop.yml

name: Release to Develop Environment
on:
  push:
    branches:
      - develop
      
jobs:
  job1:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - name: ssh and deploy
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          passphrase: ${{ secrets.SSH_PASSPHRASE }}
          port: ${{ secrets.SSH_PORT }}
          script: |
            cd /home/server_id/mydomein.jp/sample/
            git checkout develop
            git pull origin develop

これはシークレットキーにパスフェーズがある前提で書いていますが、ない場合はpassphraseの行は不要。
scriptのディレクトリは自身のディレクトリに合わせてください。

できたら保存してプッシュ。

こんな感じで上がってたらOK。

03-03.GitHubのActionがあることを確認

GitHubのリポジトリを開き、Actionsの中に「Release to Develop Environment」があることを確認。
うまくいってなければ、03-01のシークレットが足りてないか、03-02で何か間違ってます。

ここまでできたら準備完了。

04.プッシュして自動デプロイができるかテスト

あとは成功を祈ってプッシュしてみましょう。
GitHubのリポジトリにあるActionsでうまくいったかどうかが確認できます。
ログが見れるので、失敗している場合はログの内容からエラーをチェックしましょう。

05.ワードプレスの場合

上記の方法では全てのデータがcloneされるため、必要なファイルのみに絞りたい場合は、該当のファイルをシンボリックリンクさせます。

$ ln -s /home/server_id/mydomein.jp/sample/wp-content /home/server_id/mydomein.jp/public_html/develop.mydomein.jp/wp-content

上記の例ではwp-contentのみをpublic_htmlの方へリンクさせました。