見出し画像

Nuxt/SSR + LaravelアプリをさくらVPS(Cent OS7) にGitHub Actions使って自動デプロイしてみた話 - CAMPE.CAMP のデプロイ自動化

先日、CAMPE.CAMP というチートシートを作成・共有するサービス をリリースしました。

以前も弊社の技術ブログで
Nuxt.jsアプリをSSRモードでさくらVPS(CentOS7)にデプロイする手順メモ
という記事にて、基礎的なデプロイ手順についての記事を書きましたが、
当時より理解が深まり、デプロイ手法を改善でき、
「GitHub の master/staging ブランチを push するだけで、さくらVPS上の本番/検証環境のNuxtサーバーに変更を反映する」
という自動デプロイを実現できたので、その手法について共有したいと思います。

※ 前提条件(ここまでの手順は前回の記事参照)
・設定したドメインにアクセスして、VPSのNuxt SSR アプリが正常に表示できる
・VPS上のリモートリポジトリから、VPS上の公開ディレクトリにgit pull できる。

環境構成

- Nuxt.js (SSRモード)
- Laravel / php
- Apache
- Cent OS (さくらVPS)

gitリポジトリ構成とデプロイフロー

画像1

campe.campでは、4種類のgitリポジトリを使用しています。

(A): 開発環境のローカルリポジトリ
(B): GitHub リモートリポジトリ
(C): VPS上のリモートリポジトリ
  (/home/vpsuser/gitRemote/campecampe.git)
(D): VPS公開ディレクトリのローカルリポジトリ        
  (/var/www/html/campecamp/[master or staging])

(A) から (B) の master/staging ブランチにpushした際に、下記のフローで自動でデプロイされ、VPSで動いているNuxtアプリが更新されるよう設定しています。

1. (B) → (C) に push ( GitHub Actions )
2. (C) → (D) clone ( (C) の Git hook )
3. (D) で Nuxt をビルド ( npm run build )
4. Nuxtサーバー再起動 ( pm2 restart )

下記参考記事や以前書いた記事では、ローカルgitからVPSとGitHubの二つのリポジトリに同時にpushして更新するというフローですが、GitHub Actions の導入により、push先をGitHub に集約しました。

※参考記事:gitを使ったデプロイ方法

以下、それぞれの詳細について解説します。

GitHub Actions

GitHubのmaster または staging ブランチにpushされたときに、
自動でさくらVPS上のリモートリポジトリにpushする設定をします。

.github/workflows/main.yml に下記のように記述してます。

name: CI
on:
 push:
   branches: [ staging, master ]
jobs:
 repo-sync:
   runs-on: ubuntu-latest
   steps:
   - uses: actions/checkout@v2
     with:
       fetch-depth: '0'
       ref: ''
   - name: Generate ssh key
     env:
       SAKURA_VPS_DEPLOY_KEY: ${{ secrets.SAKURA_VPS_DEPLOY_KEY }}
     run: echo "$SAKURA_VPS_DEPLOY_KEY" > key && chmod 600 key
   - name: push
     env:
       GIT_SSH_COMMAND: ssh -i ./key -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -p 10022
     run: |
       git remote add sakura ssh://vpsuser@123.123.123.123:12345/home/vpsuser/gitRemote/campecamp.git
       git config --global user.email "mail@example.co.jp"
       git config --global user.name "user name"
       git checkout ${GITHUB_REF##*/}
       git push -u sakura ${GITHUB_REF##*/}
※備考
vpsuser = VPSのユーザー名
123.123.123.123:12345 = VPSのIPアドレス:sshのポート例
${GITHUB_REF##*/} = プッシュされたブランチ名を取得する

secrets.SAKURA_VPS_DEPLOY_KEY は、
GitHubの Settings → Secrets にて、
「vpsuser」でログインするためのssh秘密鍵を設定しています。
(定数名は任意でOK)

画像2

Git hook

上記のGitHub Actionsにて、さくらVPS上のリモートリポジトリにpushされたときに、
VPS上のリモートリポジトリから、
公開ディレクトリのローカルリポジトリに pullして、
Nuxtアプリのビルドと再起動まで行います。

VPS上のリモートリポジトリの hooks/post-update に、下記のように記述しています。

#!/bin/sh
branch=$(git rev-parse --symbolic --abbrev-ref $1)
if [ "master" = "$branch" ]; then
       cd /var/www/html/campecamp/master/
       git --git-dir=.git pull origin master
elif [ "staging" = "$branch" ]; then
       cd /var/www/html/campecamp/staging/
       git --git-dir=.git pull origin staging
else
       echo "do not deploy"
       exit 1
fi
cd _Homestead/code
npm i
npm run build
if [ "master" = "$branch" ]; then
       pm2 restart cc_master
elif [ "staging" = "$branch" ]; then
       pm2 restart cc_staging
fi

masterブランチなら本番環境の公開ディレクトリに、stagingなら検証環境に移動して、git pull を実行し、 リビルドと pm2 でプロセス名を指定して再起動しています。

※さくらVPS公開ディレクトリ側のgit設定と、
pm2 start "npm -- run start" --name cc_master 等での初回起動は済んでいる前提です。詳細は前回の記事を参照

Laravel API サーバーの更新も反映する場合、

composer install 
php artisan migrate

なども npm run build 前に実行するよう設定記述しても良いでしょう。
(更新頻度が低いため、省略してます。)

(ちなみに今回の構成では、master:本番環境 と staging:検証環境 を、一つのサーバーの別ディレクトリに配置して、VirturalHostでアクセスを分けるように設定していますが、可能なら同じ仕様の別サーバーを立てて、本番/検証 環境で分けるのが理想的かと思います。)

あとがき

これで、GitHubにpushするだけで、サーバー上でアプリの更新反映までできるようになりました。

GitHub Actions や Git hook については、それ自体の情報がそれほど多くなく、ここまで実現するのに少々苦労しました😅

「GitHub Actions」「Git hook」で検索するのではなく、
「Linux」「シェルスクリプト」などで検索した方が良いかもしれないです🤔

だれかの参考になれば幸いです🙏

参考記事

Push from action to different remote repo (GitHub から Bitbucketに pushする例)
・ gitを使ったデプロイ方法

関連記事
Nuxt.jsアプリをSSRモードでさくらVPS(CentOS7)にデプロイする手順メモ

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
1

こちらでもピックアップされています

SPREAD SYSTEMS INC. TECH BLOG
SPREAD SYSTEMS INC. TECH BLOG
  • 17本

SPREAD SYSTEMS INC. ( https://www.spreadsystems.co.jp/ )が運営するTECH情報BLOGです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。