Azure PipelinesからレンタルサーバーにWEBサイトをデプロイしてみた

こんにちは。今日のネタもAzure DevOpsについて。

パイプラインを構築し、Azuer DevOpsからエックスサーバーへWEBサイトのデプロイを行ってみましたので、お時間のある方はお付き合いください。

本日の概要
レンタルサーバー側での準備
1. SSH有効化
2. SSH認証用キーペアの生成
Azure DevOps側でパイプラインの構築
1. SSHアクセス用サービスコネクションの作成
2. Azure Pipelinesを編集・実行
さいごに

本日の概要

今回の概要図です。

Azure DevOpsのReposに配置されているWEBサイトソースコードのコミットをトリガーにPipelinesが走り出し、レンタルサーバー（今回はエックスサーバーを想定）にソースコードがコピーされるという流れです。

※エックスサーバーの紹介キャンペーン実施中。以下のリンクからエックスサーバーご契約で特典をゲットできます。詳しくは以下のリンクから。

レンタルサーバー高速・高機能・高安定性の【エックスサーバー】

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99％以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額990円(税込)から利用可能。まずは無料お試し10日間。

レンタルサーバーへのデプロイにはSSHを利用しているため、SSHアクセス可能なレンタルサーバーであれば、パスなどを読み替えていただければ、ほぼほぼ同様の手順で実現できるのではないでしょうか。

レンタルサーバー側での準備

まずはレンタルサーバー側でSSHアクセスのための準備が必要です。すでにSSHアクセス可能となっており、有効な資格情報を保持している方は読み飛ばしていただいて構いません。

SSH有効化

エックスサーバーのサーバーパネルにアクセスします。「SSH設定」を選択します。

SSHアクセスの状態がOFFになっている場合は、「ONにする」を選択し、「設定する」をクリックします。

黄色枠で囲ってあるところに書かれている「SSH接続時のポート番号について」は重要な情報です。あとで必要となりますので、接続ポート番号「10022」をしっかり覚えておきましょう。

以下の画面では「戻る」をクリックします。

SSH認証用キーペアの生成

SSH設定に戻り、状態がONになったのを確認したら、「公開鍵認証用鍵ペアの生成」をクリックします。（ちなみに、すでにローカル環境などでキーペアを作成している場合はアップロードして登録することもできます。）

パスフレーズの入力画面になります。おもいっきり強固なパスフレーズを入力しておきましょう。入力できたら「確認画面へ進む」をクリックします。

以下の画面を表示したら「生成する」をクリックします。公開鍵がサーバーに登録され、秘密鍵のダウンロードが自動的に行われます。

ダウンロードされた秘密鍵（XXXXXXX.key）ファイルと先ほど入力したパスフレーズはこの後利用するので大切に保管しましょう。

Azure DevOps側でパイプラインの構築

SSHアクセスの準備が出来たら、今度はAzure DevOpsにサインインし、パイプラインを構築していきます。今回はリポジトリにソースコードがすでにコミットされている前提で進めます。

SSHアクセス用サービスコネクションの作成

まずは、SSHアクセスのためのサービスコネクションを作成しておきます。プロジェクトページから左下の「Project settings」をクリックします。

[Pipelines]の「Service connection」を選択し、「Create service connection」をクリックします。

サービスコネクションの種類の選択ができますので、「SSH」を探し出し選択します。「Next」をクリックしましょう。

新しいSSHサービスコネクションの作成画面を表示します。以下の入力項目を埋めて「Save」をクリックします。ちなみにここで、SSH設定時に覚えておいたポート番号などのエックスサーバーにアクセスするための情報が必要になります。

詳しい情報はエックスサーバーサイトにて確認してください。

項目	設定値
Host name	デプロイ先サーバーのサーバー名、または、IPアドレスを入力します。エックスサーバーであれば、「サーバーID.xsrv.jp」または、「sv***.xserver.jp」（ホスト名）でも設定が可能です。
Port number	「10022」を入力です。
Private key	ここは、下に表示されている、「Upload SSH private key file…」をクリックし、ファイルの選択ダイアログが表示されるので、エックスサーバー側でのSSH設定時にダウンロードされた秘密鍵（XXXXXXX.key）ファイルを指定します。
Username	サーバーIDを入力します。エックスサーバーで自ドメインがxsample.xsrv.jpあれば、「xsample」を入力します。
Password/Passphrase	エックスサーバー側でのSSH設定時に指定したパスフレーズを入力します。
Service connection name	このサービスコネクションの判別しやすい名前を付けておきましょう。

無事、SSH用サービスコネクションが登録されました。

Azure Pipelinesを編集・実行

最後の手順です。パイプラインを構築します。プロジェクトページの[Pipelines]－「Pipelines」を選択し、「Create Pipelines」をクリックします。

ちなみに去年あたりから従来の「Builds」→「Pipelines」という構成から変化して、マルチステージパイプラインというものがリリースされていますので積極的に使っていきたいと思います。

Azure Pipelines を使用して継続的インテグレーションと継続的配置を実装する

Azure Pipelines を使用して手動の手順を自動化することにより、ビルドと配置のプロセスを合理化します。

リポジトリの場所選択はご自由に。今回はAzure Riposにありますので、「Azure Repos Git」を選択します。

対象となるリポジトリも各々の環境に合わせ選択してください。

現在のリポジトリのソースコードに合わせてパイプラインのテンプレートを提案してくれます。ごっそり書き換えるのでなんでもOKです。

テンプレートのYAMLが表示されると思います。これを以下の内容に書き換えます。

# HTML
# Archive your static HTML project and save it with the build record.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- main

variables:
  vmImageOfBuild: ubuntu-latest
  vmImageOfDeploy: ubuntu-latest
  archiveFileName: website.zip
  productionDirectory: /home/(サーバーID)/(サーバーID).xsrv.jp

stages:
- stage: Build
  jobs:
  - job: Build
    displayName: Build and Publish Artifact
    pool:
      vmImage: '$(vmImageOfBuild)'
    steps:
    - task: ArchiveFiles@2
      displayName: Archive Files
      inputs:
        rootFolderOrFile: '$(build.sourcesDirectory)'
        includeRootFolder: false
        archiveType: 'zip'
        archiveFile: '$(Build.ArtifactStagingDirectory)/$(archiveFileName)'
        replaceExistingArchive: true
    - task: PublishPipelineArtifact@1
      displayName: Publish Pipeline Artifacts
      inputs:
        targetPath: '$(Build.ArtifactStagingDirectory)'
        artifact: 'drop'
        publishLocation: 'pipeline'

- stage: DeployToProduction
  dependsOn:
  - Build
  condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/main'))
  jobs:
  - job: DeployToProduction
    displayName: Deploy to Production Site
    pool:
      vmImage: '$(vmImageOfDeploy)'
    steps:
    - task: DownloadPipelineArtifact@2
      displayName: Download Pipeline Artifacts
      inputs:
        buildType: 'current'
        artifactName: 'drop'
        targetPath: '$(Pipeline.Workspace)'
    - task: CopyFilesOverSSH@0
      displayName: Copy Artifacts
      inputs:
        sshEndpoint: 'SSHServiceConnection'
        sourceFolder: '$(Pipeline.Workspace)'
        contents: '$(archiveFileName)'
        targetFolder: '$(productionDirectory)/source/'
        readyTimeout: '20000'
    - task: SSH@0
      displayName: Unzip Artifacts
      inputs:
        sshEndpoint: 'SSHServiceConnection'
        runOptions: 'commands'
        commands: |
          find $(productionDirectory)/public_html/ -mindepth 1 -not -name '.htaccess' -not -name '.user.ini' | xargs rm -rf;
          unzip -o $(productionDirectory)/source/website.zip -d $(productionDirectory)/public_html/;
          rm -r $(productionDirectory)/public_html/.git;
          rm $(productionDirectory)/public_html/.gitignore;
          rm $(productionDirectory)/public_html/azure-pipelines.yml;
          rm $(productionDirectory)/public_html/README.md;
        readyTimeout: '20000'

# HTML

# Archive your static HTML project and save it with the build record.

# Add steps that build, run tests, deploy, and more:

# https://aka.ms/yaml

trigger:

- main

variables:

vmImageOfBuild: ubuntu-latest

vmImageOfDeploy: ubuntu-latest

archiveFileName: website.zip

productionDirectory: /home/(サーバーID)/(サーバーID).xsrv.jp

stages:

- stage: Build

jobs:

- job: Build

displayName: Build and Publish Artifact

pool:

vmImage: '$(vmImageOfBuild)'

steps:

- task: ArchiveFiles@2

displayName: Archive Files

inputs:

rootFolderOrFile: '$(build.sourcesDirectory)'

includeRootFolder: false

archiveType: 'zip'

archiveFile: '$(Build.ArtifactStagingDirectory)/$(archiveFileName)'

replaceExistingArchive: true

- task: PublishPipelineArtifact@1

displayName: Publish Pipeline Artifacts

inputs:

targetPath: '$(Build.ArtifactStagingDirectory)'

artifact: 'drop'

publishLocation: 'pipeline'

- stage: DeployToProduction

dependsOn:

- Build

condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/main'))

jobs:

- job: DeployToProduction

displayName: Deploy to Production Site

pool:

vmImage: '$(vmImageOfDeploy)'

steps:

- task: DownloadPipelineArtifact@2

displayName: Download Pipeline Artifacts

inputs:

buildType: 'current'

artifactName: 'drop'

targetPath: '$(Pipeline.Workspace)'

- task: CopyFilesOverSSH@0

displayName: Copy Artifacts

inputs:

sshEndpoint: 'SSHServiceConnection'

sourceFolder: '$(Pipeline.Workspace)'

contents: '$(archiveFileName)'

targetFolder: '$(productionDirectory)/source/'

readyTimeout: '20000'

- task: SSH@0

displayName: Unzip Artifacts

inputs:

sshEndpoint: 'SSHServiceConnection'

runOptions: 'commands'

commands: |

find $(productionDirectory)/public_html/ -mindepth 1 -not -name '.htaccess' -not -name '.user.ini' | xargs rm -rf;

unzip -o $(productionDirectory)/source/website.zip -d $(productionDirectory)/public_html/;

rm -r $(productionDirectory)/public_html/.git;

rm $(productionDirectory)/public_html/.gitignore;

rm $(productionDirectory)/public_html/azure-pipelines.yml;

rm $(productionDirectory)/public_html/README.md;

readyTimeout: '20000'

簡単に説明すると、16～36行目のビルドステージでソースコードのzipを行い、Pipelinesアーティファクトに発行しています。

38～74行目のDeployToProductionステージは、mainブランチのビルドステージが成功時のみ実行されます（41行目）。

Pipelinesアーティファクトのダウンロードを行い、まずはレンタルサーバー上のsourceディレクトリにCopyfiles over SSHタスクを使用しzipファイルをコピーします（48～61行目）。その後、レンタルサーバーのwebサイトルートディレクトリ（エックスサーバーであればpublic_htmlフォルダー）を一度クリーンしてからunzipを行っています（69行目）。ただし、単純に削除してはまずいファイルもあるので、findコマンドを駆使して.htaccessなどのファイルは削除されないように制御しています（68行目）。最後に、WEBサイトに不要なファイルの削除を行っています（70～73行目）。

重要なファイルの削除が行われてしまう可能性もありますので、パイプラインのコマンド内容を一度検証してから実際にファイルの削除コマンドを入れるなどした方が安全です。

YAMLを編集したら、「Save and run」を実行するとパイプラインが実行されます。

無事パイプラインがcompletedになり、WEBサイトにアクセスするとページが表示されました。デプロイ成功です。

エックスサーバーのファイルマネージャにアクセスして確認してみると、.htaccessは保持したままデプロイされているのが確認できます。

SSHアクセスではじかれる場合は、エックスサーバー側のWAF設定を確認してみてください。パイプラインからSSHでコマンド実行する場合はWAF設定の「コマンド対策」を「OFF」にする必要があります。

さいごに

無事にデプロイが完了したら、SSH秘密鍵ファイルやパスフレーズは破棄してしまったほうがセキュアなのかなと思ったので破棄しました。パイプラインからの実行で利用するだけですので。

また、パイプラインに関しても、ステージング環境が用意できるのであれば、YAMLを修正し、DeployToProductionステージを複製してパスやターゲットブランチを変更し、例えばdevelopブランチだったらDeployToStagingステージが実行されるようにしてあげればいい感じの環境が出来上がってくるんじゃないでしょうか。

まだ、現段階で試行錯誤してるところですので、おかしな記述とかあったらごめんなさい。静的WEBサイトのデプロイとしてこんな方法でいいのかどうかすら判断できないのですが、とりあえずデプロイはできています。

Azureリソースへのデプロイだと何の苦労もないんですがね・・・。

システムエンジニアランキング