GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！ソフトを使った手動アップロードを卒業する

2020/5/16 2021/5/16 プログラミング, 制作ツール

GitHub、使ってますか？？

僕も何かとお世話になっていまして、仕事をする日にGitHubを見ない日はないと行っても過言ではないのですが、2019年の11月には、「GitHub Actions」というものが公開されました。

GitHub Actionsというのは、Github上にあるリポジトリなどのデータに対してだったり、データを使った操作に関して、それまで手動で行っていた様々な操作を自動で行うことができるようになるための機能たちです。

例えば、GitHub上にあるリポジトリデータ（ Webサイトのソースコード）を使ってWebサイトの自動デプロイ（公開）作業を行うこともできるようになっています。

（多分僕の知らない or 想像以上の色々なことができるんでしょうね・・・）

ということで、今回は先ほど例として掲載した「GitHub Actionsを使ってGitHub上にあるリポジトリデータ（ Webサイトのソースコードデータ）を用いたWebサイトの自動デプロイ（公開）作業を行う」方法をご紹介してみたいと思います！

僕も実際にやってみたのですが、「こんなことがGitHubだけでできるのかー！」と感動したものです。ぜひ、ご覧になってみてください！

1 GitHub Actionsを使って今回やろうとしていることと
2 GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！作業その1・GitHub上にリポジトリを作成しdevelopブランチにソースコードを反映させる
3 GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！作業その2・FTP情報を確認して、GitHubに埋め込む（環境変数設定）
4 GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！作業その3・GitHub Actions設定の実施
5 GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！作業その4・Git Hubのリポジトリ上でmasterブランチにマージ
6 まとめ

GitHub Actionsを使って今回やろうとしていることと

今回、GitHub Actionsを使ってやろうとしていることをまずは図にしてご紹介させていただきます！

おおまかな流れを説明すると、

PC上で制作しているWebサイトのソースコードをGitHub上にプッシュ（送る）する
masterと呼ばれるブランチにソースコードを反映・更新される
Webサイトを公開するサーバへ自動的にソースコードのデータが転送・Webサイトの内容に反映される

といったものになります。

この一連の流れの作業が自動で行われるようにするためのGitHub Actionsの設定方法が、今回の記事でご紹介するものになります！

ここから先は具体的にGitHub Actionsの設定内容を紹介していきますが、GitHubのアカウント登録は済んでいることを前提としてお話を進めていきます！

また、今回想定するGitHubのフローとしては「開発中作業はdevelopブランチに反映させていき、問題ないことがわかったらmasterブランチにdevelopブランチの内容をマージ（反映）させる」というごく基本的なやり方を使用するというものにします！

（要するにmasterブランチのみで直接開発作業をしない、というものですね）

GitHubの基本的な使い方は、一部を除いて紹介しないので、ご了承ください！

GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！作業その1・GitHub上にリポジトリを作成しdevelopブランチにソースコードを反映させる

まずは、GitHub上にリポジトリを作成し、公開したいデータをPushします。

masterブランチとdevelopブランチにひとまずソースコードを反映させます。

反映させたあと、developブランチでどんどん開発を進めていき、開発できたものを引き続きdevelopブランチに反映させていきます。

ここから先は、developブランチに制作・開発内容がどんどん反映されていき、developブランチに反映された内容に問題がない、という状態を想定して進めていきますね！

GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！作業その2・FTP情報を確認して、GitHubに埋め込む（環境変数設定）

では、続いてGitHub上でFTP自動デプロイを行うための各種設定に入っていきたいと思います！

まずは、GitHubのリポジトリを改めて見てみましょう！

まずは、GitHubのリポジトリページから「setting」を選択します、　

そして、左メニュー部分にある「Secrets」を選択します。

続いて出てきた画面で、「Add a new secret」を選択し、NameとValueの部分にそれぞれ以下のものを入力していきます。

Name「FTP_SERVER」・・・Value「ftpサーバのホスト」
Name「FTP_USERNAME」・・・Value「ftpサーバのアカウント名」
Name「FTP_PASSWORD」・・・Value「ftpサーバのパスワード」

それぞれの情報は、ご使用のサーバのFTP情報を確認するようにしてくださいね！

なお、SFTP（パスワード認証方式）をとる場合は、

Name「FTP_PORT」・・・Value「22」

も入力するようにしてくださいね！

ここでは、GitHub上にFTP関連情報を入力・設定しておくことによって、機密性を担保することを目的としているわけなんです！

GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！作業その3・GitHub Actions設定の実施

引き続き、GitHub上で必要な設定を行っていきます！

次はいよいよ「GItHub Actions」の設定を行っていきますよ！

まずはGitHubのリポジトリページから「Actions」を選択し、出てきた画面で「set up a workflow yourself」を選択します。

次に出てきた画面で、上記掲載した画像にある赤枠部分に、以下のコードを貼り付けます。

on:
  push:                 
    branches:           
      - master    
name: Build and Deploy  
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action     # JOBの名前
    runs-on: ubuntu-latest      # 仮想環境の種類を指定
    steps:
      - uses: actions/checkout@master                   
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@2.0.0   
        env:                                        
          FTP_SERVER: ${{ secrets.FTP_SERVER }}     
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }} 
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }} 
          LOCAL_DIR: ./                           
          REMOTE_DIR: ""

こちらは、GitHub ActionsのFTP関連でよく使用されているSamKirkland/FTP-Deploy-Action@2.0.0というものを用いています。

REMOTE_DIRの部分は、ご使用のサーバに合わせて適宜変更していただく必要があります！

代表的なレンタルサーバの事例でいうと