Github Actionsを用いて自動デプロイする

前々からFTPでいちいちファイルアップロードするのだりーなーと思っていたのでデプロイの自動化導入しました。

今回は導入コスト激低のサービス「Github Actions」を用いてデプロイの自動化手順をまとめましたので参考までに。

因みに無料(但し2000分迄)です。

ワークフローを作成

プロジェクト直下に .github/workflows/hogehoge.yml を作成します。

ymlファイルにワークフローを記載していくわけですが、今回使用するワークフローは SamKirkland/FTP-Deploy-Action です。

リポジトリにテンプレートが展開されているのでymlファイルに一旦コピペします。
→FTP Deploy Actions

ワークフローの設定について

ymlファイルの中身

on:
  push:
    branches:
      - main //ブランチがmasterのままの人はmainに変更してください。
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
      - name: 🚚 Get latest code
      uses: actions/checkout@v2

      - name: Use Node.js 12
      uses: actions/setup-node@v2-beta
      with:
      node-version: "12"

      - name:  Build Project
      run: |
        yarn
        yarn build
      - name:  Sync files
      uses: SamKirkland/FTP-Deploy-Action@4.2.0
      with:
        server: ${{ secrets.FTP_SERVER }} //アップロード先のサーバー名
        username: ${{ secrets.FTP_ACCOUNT }} //アップロード先のサーバーアカウント名
        password: ${{ secrets.FTP_PASSWORD }} //アップロード先のサーバーパスワード
        local-dir: アップロードしたいディレクトリを指定/
        server-dir: /アップロードしたいサーバー上の階層を指定/

１行目のon:の部分がスクリプト実行のトリガーになります。

つまりmainのブランチがpushされたら自動でサーバー上にアップロードされます。

ymlファイルを追加してトリガー後の処理をブランチごとに変えることも可能です。

Build Project

スクリプト内にあるrun:は実行したいコマンドを記載できます。

Webpackを使用する場合は、buildする必要があるのでyarnコマンドを実行させています。

Webpackを使っていない場合はここは削除してOK。

Sync files

ここではFTPの設定を行います。

uses:にはFTPアップロードアクションであるSamKirkland/FTP-Deploy-Action@4.2.0を使用します。

with:配下にはサーバーの情報やアップロード対象になるディレクトリを指定したりします。

アップロード先となるサーバーの情報で必要になるもの
◆ FTPサーバー名
◆ FTPアカウント名
◆ FTPパスワード

これらの秘匿情報はymlファイルに直接書かずにgithubで変数化して管理するようにします。

リポジトリのSettingからSecretsを開きます。



開いたらNew Repositry Secretというボタンがあるのでクリック。

そうすると以下の画面になるので任意のわかりやすい命名とサーバーの情報をそれぞれ格納していってください。



local-dir: ・・・アップロード対象となるディレクトリを指定(/を忘れずに!!)

server-dir:・・・アップロード先となるディレクトリを指定

push後の挙動

トリガーにしたブランチ上でpushすると自動でスクリプトがGithub上で走り始めます。

リポジトリ内のActionsタブを開いて実際スクリプトが走っているか確認してください。

コミットメッセージが反映されていると思います。(黄色い丸は実行中)







処理の中身も確認できるのでエラーの特定も簡単です。




大体1､2分で処理が完了し、緑のマークに変わったら無事となります。

実際アップロードされているかサーバーを確認してみてください。

ファイルがサーバーに上がっていない場合

指定したディレクトリが間違っていないか今一度確認してみてください。

サーバーの情報が間違っていないか確認してみてください。

Appendix

サーバにssh接続し、ファイルをあげる方法について解説します。

ただファイルをアップロードするだけならわざわざssh接続しなくてもいいかなーと思いました。

今後使うかもしれないのでメモ。

サーバーにssh接続して鍵を作成する

今回使用するサーバーはロリポップです。

まずはssh接続します。

ssh [アカウント]@[サーバー] -p2222

アカウントとサーバーはロリポップの管理画面→SSHの項目から見れます。

パスワードを聞かれるので先ほど開いた管理画面内のパスワードの項目からコピペしてください。

公開鍵と秘密鍵の作成

下記コマンドでキーペアを作成します。

ssh-keygen -t rsa -b 4096 -C [任意のメールアドレス]

実行するとパスフレーズを聞かれますが空でOK。Enterで進んでください。

サーバー上に隠しファイルで .ssh というディレクトリが作成されているのを $ ls -a で確認します。

$ cd で.sshに移動し、id_rsa(秘密鍵)、id_rsa.pub(公開鍵)が存在することを確認できたら大丈夫。

サーバーにcloneしてみる

試しにgitのリポジトリをクローンしてみます。

lolipopサーバーではwebという階層からが作業スペースっぽいので、webディレクトリ内にクローンするようにしましょう。

一旦、$ pwd でカレントディレクトリを確認すると楽です。

cloneする際はSSHタブ から選択することをお忘れなく。