よしたく blog

ほぼ週刊で記事を書いています

Node.jsアプリをWeb AppsにAzure Pipelinesからデプロイする

プロジェクトの中でCI/CDを組み入れる作業をおこなった。その時はAzure DevOps内のAzure Pipelinesを使い、Web AppsにNode.jsアプリケーションをデプロイした。この作業をおこなっていた中でつまづいた部分があったのでブログに手順と注意事項として書いておく。なお、CI/CDと記述したが今回の作業ではCIの部分を担う作業はなかったのでCDの部分だけ記述する。また、実際のNode.jsアプリケーションの部分は重要ではないので、ExpressでHello Worldを返すもので代用する。

環境について

Web Apps

Azure上でリソース作成をおこなう。ここではリソース作成の方法は記述しないが、今回実行する環境の情報として載せておく。

f:id:yoshitaku_jp:20200228092205p:plain

https://azure.microsoft.com/ja-jp/services/app-service/web/

Repos

今回はAzure DevOps内のReposを使用した。いわゆるGitHubのようなバージョン管理のホスティングシステムであり、Azure Pipelinesでホスティングシステム側にプッシュされたことを検知して動き出す。Azure Pipelines側で連携ができるものであれば他の種類のホスティングシステムでも問題はない。下記に連携ができるものの一例を載せておく。

https://azure.microsoft.com/ja-jp/services/devops/repos/

Pipelines

Azure PipelinesはCI/CDが実現できるサービスであり、類似ではCircleCIなどが有名である。Azure Pipelinesは CIを担当するPipelinesCDを担当するRelease が存在する。今回はCD部分のReleaseを用意し設定していく。

https://azure.microsoft.com/ja-jp/services/devops/pipelines/

設定

Pipeline作成

Azure DevOpsにログインし、左のタブにある青いロケットのPipelinesを見つける。その下にいくつか項目が並んでいるが、Releaseを選択する。次にNewを選択し、New release Pipelineをクリックする。

f:id:yoshitaku_jp:20200228142145p:plain

現在の設定ではいくつか利用想定のテンプレートが表示される。ここでは検索窓に「web apps」と入力し、「Azure App Service deployment」をクリックする。

f:id:yoshitaku_jp:20200228142344p:plain

Artifacts設定

次に、Artifactsの項目にCDのデプロイ処理を発火させる前段階の処理を設定する。ここでは「CI処理が終わった後におこなう」や「リポジトリにプッシュされたら」といったことが選べる。今回は「Reposにプッシュされたら」なのでReposを選択する。

f:id:yoshitaku_jp:20200228142622p:plain

実はこのままだと監視するリポジトリを選択しただけの状態なので、右上にある雷マークを選択し、「pushがあったら」ということを設定するため、DisableをEnabledに変更する。これでArtifactsの設定が終了し、「Reposにプッシュされたら後続の処理をおこなう」体制が作成できた。

f:id:yoshitaku_jp:20200228145612p:plain

Stages設定

次にStages部分を設定する。ここでnpm installやデプロイ先へのデプロイといった作業を設定する。今回はNode.jsのアプリケーションをデプロイするということで、expressを利用したHello Worldを返すものを想定していた。「1job 1task」をクリックし、処理を追加していく。

f:id:yoshitaku_jp:20200228152317p:plain

npm installをしExpressをインストールする作業が欲しいのでTaskを追加する。まずは+ボタンをクリックし、npmと検索をする。検索結果にnpmが出てくるので選択するとTasksの中に挿入される。

f:id:yoshitaku_jp:20200228152451p:plain

現在の順番だとデプロイした後にnpm installをおこなうことになるので、ドラッグアンドドロップで順番を入れ替える。

f:id:yoshitaku_jp:20200228162734p:plain

デプロイ先は、Azure上で作成したWeb Appsの情報を入力・選択していく。

f:id:yoshitaku_jp:20200228162127p:plain

以上で終了となる。

URLにアクセスすると無事Hello Worldを返してくれた。 f:id:yoshitaku_jp:20200228155649p:plain

Web Apps on Windowsでの注意事項

Web AppsをWindowsで動かすと中身はIISで起動しているようで、IIS用の設定ファイル「web.config」を用意しなければいけない。また、「web.configの記述内容」「package.jsonの記述内容」「実行ファイル」の3つを揃えないと起動がしない点については注意が必要だった。

f:id:yoshitaku_jp:20200228155401p:plain

おわりに

Azure PipelinesはPipelineとReleaseでCI/CDが明確に分かれている点とCDの設定がGUIでおこなえることが強みに感じた。GUIでおこなえる点は、「システムの勘所はつかめているが、プログラムに精通しているわけではないメンバ」でもYAMLファイルの編集ミスでジョブが落ちるようなことや、またコミットログの頻発や汚れるといた事がないこともメリットに感じた。

個人的には、Web Apps on Windowsの場合にIISで動いていることを知らずPipelinesのCD設定が良くないことを疑っていた部分が多く時間を費やす原因となった。個人的な成果物を「GitHubからCircleCIでデプロイ」といったことをしていたので、Azure DevOpsを使っても同じことがすぐ出来るだろうと考えを巡らせていたが、今回詰まったような「Web Apps側のことを考慮していない経験」から自らの課題でもあるラストワンマイルを意識した作業がおこなえていい経験となった。