gitで自動デプロイ

作成日:2022-08-17

Tags: github

githubのActions機能を使って自動でFTP転送した。

githubでソースコードを管理しているが毎回ビルド->ftp送信して、ホームページ等を更新していたが面倒なので自動化した。

github Actions

githubでpushされたとき〇〇してくれる大変ありがたいやつです。自動で、ビルドや、ssh,ftpを順次行ってくれます。個人で使用する場合無料範囲内でも十分過ぎるので費用も考えなくても大丈夫です。

今回の目標は自動でビルド、FTP転送するまでです。

前提条件

githubが使用できる

(reactを使用している)プレーンのHTMLでも可

github Actionsを使用する

github Actionsを使用するには何が必要か。ズバリymlファイルがあるだけで使用することができます。 ymlファイルの配置場所はプロジェクトルート->.github->workflows->の中です。

.githubとworkflowsのフォルダーは存在しないと思うので作成してください。 YML_Filepath プロジェクトルートとは.gitフォルダーがある場所です。画像ではmyblogがプロジェクトルートです。

YMLファイル

ymlファイルにコードを書いていきます。現在私が使用しているものでほぼほぼコード一緒です。

node.yml

name: deploy github action
on:
  push:
    branches:
      - main

jobs:
  web-deploy:
    name: Deploy to webserver
    runs-on: ubuntu-latest
  
    steps:
    - name: Get latest code
      uses: actions/checkout@v2

    - name: Use Node.js 16
      uses: actions/setup-node@v2
      with:
         node-version: '16.14'
    - name: build project
      run: |
        npm install
        npm run build
      env:
          APIS : "sampleAPIS"

    - name: FTP-Deploy-Action
      uses: SamKirkland/[email protected]
      with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./public/
          server-dir: ${{ secrets.FTP_SERVER_DIR }}

yml書き方

actionの名前

nameはgithubで表示されるactionの名前です

name: deploy github action

なんでも大丈夫です。分かりやすい名前にしておいてください。

実行するトリガーの設定

gitのブランチを指定します。developのブランチ、デプロイ用のブランチ何でもかんでも反応されてしまったら困るので、ブランチを指定することができます。

on:
  push:
    branches:
      - main

branchがmainでpushされたときこのgithub Actionsが開始するよという意味になります。なのでbranchが異なれば発生しません。こだわりが無ければmainかmasterの人が多いかな？

実行して欲しいコマンドの記入

このjobsから実際に実行してほしいコマンドを記入して行きます。

jobs:
  web-deploy:

web-deployと書いていますが、build やdeployと記入している人が多いですね

実行OSの指定

この行の以下のコードを実行する仮想マシーンのOSを記入します。 nameもこれから実行するコマンドの大まかな内容を記入しておきましょう。

name: Deploy to webserver
    runs-on: ubuntu-latest

バージョンを指定しないといけない場合は

name: Deploy to webserver
    runs-on: ubuntu-20.04

実行コマンドの入力

steps:でこれらのコマンドを順番に実行するよということになります。

steps:
    - name: Get latest code
      uses: actions/checkout@v2

gitactionを指定しています。公式ページで現時点でなんのバージョンを使用しているのか確認できます。 (2022年08月17日)現在 checkoutとsetup-nodeはv3がメジャーバージョンらしいですね.

nodejsの指定

私のコードはreactでbuildしているのでnode.jsが必要なためuses: actions/setup-node@v2を入れています。ローカルのnodeのバージョンが16.14のため指定しています。正常に動くようであればなんでも大丈夫です。

    - name: Use Node.js 16
      uses: actions/setup-node@v2
      with:
         node-version: '16.14'

react buildコード

ここからはローカルで実行しているコマンドと一緒ですね。
envファイルが必要な場合は次のように記入します。
npm installは一緒ですが、npm run buildは人によっては異なると思います。変更してあげましょう。

 - name: build project
      run: |
        npm install
        npm run build
      env:
          APIS : "sampleAPIS"

FTPで送信

最後にFTPで送信を行います。

公式ページで細かい使用方法と、バージョンについて確認をお願いします。

 - name: FTP-Deploy-Action
      uses: SamKirkland/[email protected]
      with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./public/
          server-dir: ${{ secrets.FTP_SERVER_DIR }}

server,username,passwordはFTPの接続情報なので特に説明は不要かと思います。

local-dirは最後に「/」スラッシュで終わってください。「./public/」はreactでbuildを実行した際、アップロードしたいフォルダーです。
next.js react heroとか色々の物があると思います。「./build/」など、適切に変更をしてください。　　

server-dirはftpサーバーの転送先パスになります。こちらも最後は「/」スラッシュで終わってください。

secrets

githubで環境変数はsecrets.〇〇で取得できます。
もちろん変数を使用しなくても動作しますが、個人情報等は大事な情報なのでできるだけActions secretsを使用しましょう。私の場合はこのようになっています。

まとめ

毎回FTPやSSHで更新作業を行うのが日に日に大変になっていきます。これはとても時短になるのでぜひ使って見てください。 git pushとするだけでウェブページが更新されるなんてとても快適です。

2022-08-17