デプロイフローをいい感じにしたい！

現在携わっているプロジェクトのフロントリポジトリの運用がほぼ手動なので、GithubActionsを使ってデプロイフローをいい感じにしたいです。
この記事はそのGithubActionsに入門しつつ試行錯誤しながら実装する過程のメモです。

ブランチと環境

プロジェクトは新規開発で１人開発な0->1なプロジェクトを途中で引き継いだものになります。
引き継いだ段階で環境、ブランチ、それぞれ一つしかなかったため、とりあえずこちらの記事など参考にしながらブランチとリリース戦略について考えてみました。

ブランチ

GitHub Flowの方がシンプルで管理しやすそうでしたが、検証環境のバージョン管理ができないのは不安なため、Github上で以下３つのブランチを切って管理するようにしました。
言い訳を追記すると、テストちゃんと書ければGithub Flowでも綺麗に運用できそうですが、現状私にテスト書くスキルと時間的な余裕がないため検証環境ブランチはあったほうが安心ということになりました。。

Devブランチ
Stgブランチ
Prodブランチ

環境

Nuxt.jsでフロントエンド部分を開発しており、静的ファイルを生成し、これをさくらのレンタルサーバー上にアップロード（デプロイ）します。環境として３つ作ってありますが、これは簡易的にディレクトリを区切っているだけのものになります。

Dev環境
Stg環境
Prod環境

現在は手動で静的ファイルを生成し、FTPで手動アップロードをしているためGithubActionsでこの辺は自動化したい。

こんな風にしたい！

リポジトリへのpush・mergeでデプロイ〜通知が自動で実行されるようにしたいです。
イメージとして以下のような感じ...

とりあえずステップバイステップにやってみましょう。

GithubのDevブランチにpushされたらさくらにデプロイされてSlackに通知がいくようなGithubActionsの設定をしてみる

GithubActionsの概要

GithubActionsの設定のためにはプロジェクトの中にに.github/workflowディレクトリを作成し、その中にyamlの設定ファイルを書いていきます。設定項目はGithubのワークフローファイルを理解するセクションが非常にわかりやすかった。

平たくまとめると、on:でトリガーイベントを設定し、jobs:で処理のグループ化、steps:で行いたい処理を、run:に実行したいコマンドを記述したり、よくある複雑なタスクや処理をパッケージ化したactionsなどで設定していく感じっぽいです。

以下よりGithubのDevブランチにpushされたらさくらにのDev環境にデプロイまでに必要な項目などをメモしていきます。

devブランチにpushされた時

on:
  push:
    branches:
      - dev

push

job設定

jobs:
  build-and-deploy:                      // job名の設定
    runs-on: ubuntu-latest　　　// 実行環境の設定

steps

stepsに実行する処理を記述していきます。

リポジトリのチェックアウト

    steps:
      - name: Checkout
        uses: actions/checkout@v4

平たくいうとGithubActionsの作業ディレクトリへ対象のリポジトリをコピーします。

具体的にどんなことが実行されているかは下記記事を参照...

Node環境の設定

今回作成したアプリがNuxt.jsによるものなので、Nuxt用にNode.jsの環境設定する必要があります。actionsのこちらを利用します。

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

ビルド

こんな感じでdev環境用に環境変数設定ファイルを指定したコマンドを作っているので、stepの中でこちらを実行します。

package.json

  "scripts": {
    "gendev": "nuxt generate --dotenv .env.dev",          // こんな感じで
     ...

パッケージのインストールもします。

      - name: Install Dependencies
        run: npm install
      - name: Generate Static Files
        run: npm run gendev

さくらへのFTPアップロード

こちらもいい感じのactionsがあったのでこちらを利用させてもらう。

直書きしたくない値ははシークレット登録しておき、環境変数として読み込んで設定する。

今回のプロジェクトだと必要な項目はこんな感じに。

      - name: Upload to Sakura Rental Server
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: .output/public/
          server-dir: /piyopiyo/

slackへ通知

slack通知も良さげなactionsがあったのでこちらを利用。
https://github.com/marketplace/actions/slack-notify

slackへの通知のためにはslackの通知したいチャンネルのwebhook URLを設定する必要があるが、それはこちら🔽から取得できる。

      - name: Notify to Slack
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.FRONTEND_CH_SLACK_WEBHOOK_URL }}
          SLACK_USERNAME: 'フロントエンド環境デプロイ通知'
          SLACK_TITLE: 'Dev環境にデプロイが完了しました🚀'
          SLACK_MESSAGE: |
            ${{ github.event.head_commit.message }}
            <@user_id>

上記の設定でこんな感じになります。

ちなみにSlackのIncoming Webhooksのメッセージでメンション飛ばしたい時は<@user_id>こんな感じで書く必要がある。

あとメッセージの中に改行やスペースを入れたい場合はSLACK_MESSAGE: |のようにパイプを使用する必要がある。
パイプ|を使用すると、YAML内で複数行にわたるテキストをそのままの形式で保持することができて、パイプがない場合は、文字列は一行として扱われるらしい...

Devブランチ〜環境デプロイ自動化まとめ

こんな感じになりました。

name: Deploy to Dev Environment

on:
  push:
    branches:
      - dev

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install Dependencies
        run: npm install

      - name: Generate Static Files
        run: npm run gendev

      - name: Upload to Sakura Rental Server
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: .output/public/
          server-dir: /piyopiyo/

      - name: Notify to Slack
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.FRONTEND_CH_SLACK_WEBHOOK_URL }}
          SLACK_USERNAME: 'フロントエンド環境デプロイ通知'
          SLACK_TITLE: 'Dev環境にデプロイが完了しました🚀'
          SLACK_MESSAGE: |
            ${{ github.event.head_commit.message }}
            <@user_id>

Devのものを参考にStg・ProdブランチにmergeされたらさくらにデプロイされてSlackに通知がいくようなGithubActionsの設定をしてみる

Devのものとほとんど変わりませんが、発火条件となるイベントがpushではなくプルリクマージとなるのでその部分のメモ。
Stg環境にマージされたら〜なイベントは以下のように書きます。

name: Deploy to Stg Environment

on:
  pull_request:
    types: [closed]
    branches:
      - stg

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    if: github.event.pull_request.merged == true

pull_request

pull request がマージされたときに pull_request ワークフローを実行する

本当はmergeのタイミングでリリースタグが自動採番されるようにしたかったが、実装がうまくできなかったので採番は手動で行い、releaseタグが発行されたらslackの通知が行くようにしました。。

以下は今回書いたサンプルyamlです。

図にまとめるとこうなります。

まとめ

GithubActionsに入門しつつ、push,mergeベースのデプロイ,自動通知が実装されて運用上少し楽になったので当初の目的は達成できましたが、まだまだ改良したいポイントがあります。

とりあえず引き継いだままFTPアップロードしてるけどLFTP,rsyncとかにした方がいい
重複してる処理はまとめたい
リリースタグはやっぱり自動採番したい...etc

この辺はまた近々改良したいと思います！