DevOpsでAzure FunctionsにAPIをデプロイしてみた(TypeScript編)
前回の記事より少々間隔が空いてしまいました。。
これではいかんと、とりあえず今までの「DevOps+Azure Funtcionsで色んな言語をデプロイしてみようシリーズ」としてTypeScriptを試してみました。
他にもPowerShellやPythonもあるのですが、このシリーズに甘えてしまっていることと、更に前へ進んでみたい思いもあり、一旦ここで区切りをつけておきたいと思います。
ただ、TypeScriptについては前回のJavaScriptと色々な意味であまり変わらず、正直これを書いても誰が喜んでくれるのかしらと思いつつ、「TypeScript」で検索してこの記事に当たった人の少しでも役に立ってくれればうれしいです。
(詳しくは後述しますが、実際のところ今まではちょっと違った問題にぶちあたっています。些細なことですが。。)
では、いつもの通り、VSCodeでサンプルプロジェクトを作るところから。
「WORKSPACE」→「Create Function」を選びます。
![](https://assets.st-note.com/img/1667128398444-PSzYiuGIQQ.png?width=1200)
以下のダイアログが表示され、新しくプロジェクトを作るので「Create new project」を選択。
![](https://assets.st-note.com/img/1667128416324-I1fs6ZFCUD.png?width=1200)
言語は「TypeScript」を選びます。
![](https://assets.st-note.com/img/1667128515077-CCuLAaEuoO.png?width=1200)
そして以下の選択肢では「HTTP trigger」を。
![](https://assets.st-note.com/img/1667128534669-ZB1ULaPdQu.png?width=1200)
その他の設定を終えて、プロジェクトが作成されます。
![](https://assets.st-note.com/img/1667128577977-IbVdpqw0ki.png?width=1200)
念のため、ローカルで確認を行い、ビルドが正常に通ること&ローカルで正常に動作することを確認してください。
事前にNode.jsのインストールしてくことも忘れずに。
ビルド結果でURLが表示されますので、これも必要に応じてメモっておいてください。Azure Functionsにデプロイしてテストする場合は「localhost~」の部分をAzure FunctionsのURLに入れ替えるので。
![](https://assets.st-note.com/img/1667128665190-uvcKQzGIBz.png?width=1200)
あとは事前準備としてDevOpsでプロジェクトの作成、そしてAzureポータルからFunctionsも作成しましょう。
今回もFunctionsのOSはJavaScript同様Linuxで作成してください。
![](https://assets.st-note.com/img/1667128739052-xLPZRj7zId.png?width=1200)
Azure Reposに先ほどローカルで作成したプロジェクトをPushします。
以下のようにPushされたことが確認できました。
そして以下の画面の右上「Set up build」ボタンを押します。
![](https://assets.st-note.com/img/1667128933162-4crsEQ7oS3.png?width=1200)
すると、以下のように何のパイプラインを作成するかを選択することになりますので、これもJavaScriptと同様「Node.js Function App to Linux on Azure」を選びます。
![](https://assets.st-note.com/img/1667129102022-1kCt6QOe3i.png?width=1200)
前回の記事のコピペでもいいのではないかという思いにとらわれつつ、申し訳程度に補足しておきますと、PowerShellやPythonでは以下のような選択肢がありますので、VS Codeでそれらのサンプルプロジェクトを作成した場合はこれでDevOpsできるはずです。
![](https://assets.st-note.com/img/1667129173093-stNNHG2zM4.png?width=1200)
話を戻して、デプロイ先のAzureサブスクリプション、Functionsを選択します。
![](https://assets.st-note.com/img/1667129443979-qrHQt2oba2.png?width=1200)
そして、以下のようにYAMLが作成されますので、「Save and run」で実行。
![](https://assets.st-note.com/img/1667129483591-dcDPf0Vzuj.png?width=1200)
無事デプロイが終わりました。
![](https://assets.st-note.com/img/1667129655310-SLMBrJXK1Q.png?width=1200)
そして、いつものようにPostmanでAPIを叩いて無事終了ー。と思ったところ、何故か「401:Unauthorized」が返ってきてしまいました。
思わぬ展開に激しく同様しつつ、色々調べてみたところ、プロジェクト内のfunction.jsonで認証方法が定義されていることがわかりました。
で、見てみると「authLevel」が「function」に。。
![](https://assets.st-note.com/img/1667131429883-1Eii0RWYaG.png?width=1200)
JavaScriptのときはこんなところいじらなかったけどなー。。と思いつつ、とりあえず今回はテストなので「anonymous」に変更して、Azure ReposにPushし、再度Pipelineを実行します(設定によると思うのですが、Pushすると自動的に動くんですね。。)。
そして、無事再デプロイ完了し、Postmanの結果は以下の通り。無事動きました。
![](https://assets.st-note.com/img/1667131460819-LA8ZRS6N38.png?width=1200)
ちなみに前回JavaScriptのコードを確認したところ、JavaScriptのサンプルプロジェクトでは「anonymous」になっていました。
思わぬ落とし穴でしたが、普段JavaScript、TypeScriptに慣れ親しんでいる人であれば余裕で切り抜けられることでしょう。
さて、とりあえず最初に書いたとおり、DevOpsもまだまだ学ぶところが沢山あると思うのですが、一旦区切りを付けまして別のことを学んで、アウトプットしていきたいと思います。
何をやろうかなー。。