すーてっく

技術的なことや日常などを軽く書いていきます。

GitHubからAzure Pipelinesで自動デプロイ

概要

最近GitHub Actionsがリリースされるとの情報が。自分もβに申し込んだけどまだ使えない… しかし、今CL/CDツールが必要になり、しょうがなくAzure Pipelinesを利用することにした。 今回は、その手順を書いていく。

ちなみにGitHub Actionsは2019/11/13リリース予定とのこと。

前提

  • すべての開発作業はGitHub上で行う。
  • テストは行わず、リリース作業のみ。
  • リリースは、FTP経由でサーバーにアップロードする。
  • リリース用ブランチに更新が入った場合に動作する。

注意点

自分の環境だと、ファイル名にマルチバイト文字を使用するとアップロード先にて文字化けが発生した。 普段からファイル名にマルチバイト文字は使用しないので、原因究明はしなかった。

GitHubリポジトリの設定

GitHubリポジトリの作成

今回はリポジトリ名は「AutoAzurePipelinesDeploy」にする。

f:id:su-uu:20190813183205p:plain
レポジトリ作成
入力したら「 Create repository」

テストファイル追加

テスト用に「index.html」を作成しておく。 f:id:su-uu:20190813183807p:plain ついでに「Releases」ブランチを作っておく。

とりあえずいったん放置。

Azure Pipelinesの設定

GitHubからGitHub Appsで直接Piplelinesを利用する方法もあるが、今回は利用せず、別にする。 理由としては、Azure ReposをGitHubのミラーリポジトリとして利用したかったから。 その説明は今回は省略する。

プロジェクトの作成

Microsoftアカウントでログインして右上からプロジェクトを作成する。 人によって違うので注意する。 f:id:su-uu:20190813183322p:plain

プロジェクト名は「AutoAzurePipelinesDeploy」。 他の設定は特にいじっていないが、「Version control」は「Git」を選択した。 今回の内容には直接関係しない。 f:id:su-uu:20190813183511p:plain

Pipelinesの作成

「Pipelines > Releases」を選択し、「New pipeline」をクリック。 f:id:su-uu:20190813184109p:plain

Select a templateは、Empty jobを選択。 f:id:su-uu:20190813184234p:plain

新しくpipelinesを作成できたら、「Add an artifact」から「Source type」をGitHubにする。 f:id:su-uu:20190813184513p:plain

serviceの「New」から接続先を設定する。 今回は、GitHub personal access tokenを利用する。

GitHub personal access tokenの生成

GitHubに戻り、「setting > Developer settings > Personal access tokens」から新規作成する。

コピーしておく。再表示できないので、注意すること。 f:id:su-uu:20190813185900p:plain

Pipelinesの設定

「Authorize with a GitHub personal access token」から先ほどのtokenを入力する。

f:id:su-uu:20190813190008p:plain

正しく入力できたら、GitHubリポジトリが選択できるようになるので各自にあった設定を行う。 今回は、

  • Souce:AutoAzurePipelinesDeploy
  • branch:releases
  • version:Lastest

他は、デフォルト値。 f:id:su-uu:20190813190154p:plain

トリガーの設定

artifactの右上の雷マークをクリックして、トリガーの設定をする。 f:id:su-uu:20190813192552p:plain

今回は、「releases」ブランチをトリガーに設定する。 f:id:su-uu:20190813192754p:plain

taskの設定

Copy files

タブメニューから「Tasks」を選択。 「Ajent job」に「Copy files」を追加する。 f:id:su-uu:20190813193024p:plain

「Copy files」の設定は以下のようにした。

  • Source:先ほどのGitHubリポジトリの設定値と同じ。右のメニューから選択すると楽。
  • Contents:どのファイルを選択するかの設定。とりあえずの設定。各自お好みで。
**
!**\.git\**
!**\.idea\**
!README.md
 !.gitignore
  • Target:
$(Build.ArtifactStagingDirectory)\deploy

f:id:su-uu:20190813193110p:plain

FTP upload

次にFTPアップロードの設定を行う。 「DTP upload」のTaskを追加する。 f:id:su-uu:20190813194842p:plain

FTPの設定は以下の通りにした。 ここは個人差がかなりでるので各自自分にあった設定を。

自分は、 Advancedの

  • Delete remote directory
  • Overwrite
  • Preserve file paths

の三つのチェックを入れた。

f:id:su-uu:20190813195432p:plain

テストリリース

ここまでできたら。pipelineの保存を行い、実際に実行してみる。

右上の「Create release」から実行する。 特に設定変更はしない。 f:id:su-uu:20190813200220p:plain

実行

実行中... f:id:su-uu:20190813200302p:plain

正常に終了したら「Succeeded」と表示される。 もしエラーが発生した場合は、詳細なログを見ることができるので、そこから原因を探す。 f:id:su-uu:20190813200435p:plain

実際にWebページを開いてみる。 正常に表示されている。 f:id:su-uu:20190813200635p:plain

更新

ファイルを書き換えて

f:id:su-uu:20190813200746p:plain

Mergeして

f:id:su-uu:20190813200828p:plain

実行される

今回は2回目なので「Release-2」となっている。 f:id:su-uu:20190813200910p:plain

確認

f:id:su-uu:20190813200953p:plain

おわり

これで、ファイルアップロード作業からは開放される。 今回は、アップロードだけだが、テストだったり、もっと複雑な処理もすることが出来るので興味がある人は色々触ってみると良いかも。