こんにちは。
Azure絶賛勉強中ですが、今回は、自前で開発したアプリケーションを、Azure App Service上にデプロイして公開するシナリオを想定して、これをスムーズに行えるようにするための環境設定について解説します。
この記事の前提
- Githubのアカウント・リポジトリを保有している状態
- Microsoft Azureのアカウントを保有している状態
Contents
コードエディタ「Visual Studio Code」のインストール
はじめに、ソースコードを書いて開発するためのエディタ「Visual Studio Code」をインストールしておきます。
こちらからインストール可能です。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
便利な拡張機能のインストール
Visual Studio Codeは、同じマイクロソフトシリーズだけあって、Azure開発との相性がとても良いです。その理由の一つが、Azureサービス用の拡張機能が充実している、ということです。
拡張機能から、「Azure」で検索するだけで、たくさんのAzureサービスの拡張機能を見つけることができます。
今回は、その中から「Azure App Service」をインストールしておきます。
上記の拡張機能をインストールしたら、VS Codeの左側メニューに、Azureのマークが追加されます。
このタブを開いてみると、Azureアカウントとの紐付けを行えるようになっています。
お持ちのAzureアカウントとの紐付けを行うと、以下の画面が表示されて、接続完了です。
VS Code上でNode.jsアプリケーションの作成＆Githubへの連携
今回は、Reactの超絶シンプルなデフォルトアプリケーションを用います。
作り方は、以下をご参考ください。以下の記事では以下を実施しています。
- Reactアプリを開発するためのVS Codeのセットアップ
- VS CodeとGithubの連携
- Reactサンプルアプリケーションの作成とGithubリポジトリへのPush
以下の手順を一通り実施していただくことで、Github上のリポジトリに、Reactのサンプルアプリのソースコードが格納されている状態になることを想定しています。
（補足）
上記の記事では、Reactアプリケーションはコンソールから直接作成しています。それを、後からVS Code上で開けるようにしても良いですし、VS Code上だけで操作を完結させるなら、以下のようにすれば良いです。（上記記事で紹介しているReact開発に必要なパッケージ は一通り揃っている前提です）
VS Codeのターミナル上から、以下コマンドを実行します。
cd プロジェクトを作成する場所
create-react-app プロジェクト名
npm startちなみに、サンプルアプリケーションは、ただ以下の画面を表示するだけのものです。
App Service上でアプリケーション作成
Azure PortalからApp Serviceを選択します。
Webアプリの追加で、新しいWebアプリを登録します。
- サブスクリプション、リソースグループは組織の要件に合わせて
- 最後のApp Service Planは、デフォルトでPremium V2という、かなりリッチなプランになっているので、今回のようなサンプルアプリケーションの作成などであれば、無料のF1に落としておきます
作成後、リソースの概要にあるURLにアクセスすると、以下のデフォルトページが表示されています。
GithubとAzure App Serviceの連携
App Serviceのデプロイが完了したら、先ほどの手順で作成した、Githubリポジトリとの連携を設定し、GithubからApp Serviceに簡単にデプロイができるようにします。
Azure App Serviceには、デプロイの方法として、以下２種類が選択可能です。
- 手動（FTPでソースコードをアップロード）
- 継続的デリバリ（CI/CD）
今回、以下は、CI/CDで設定しました。
リソースの概要ページに遷移します。
左側のメニューから、デプロイ センターをクリックすると、連携させるソースコードリポジトリを選択可能です。2020年7月現在では、以下と連携可能です。
- Azure Repos
- Github
- Bitbucket
今回は、Githubを選択します。
画面下の「承認」ボタンを押下すると、Github側の認証が入ります。
認証が完了すると、次のステップとして、ビルドプロバイダーの選択に進みます。ここも、お使いの環境に合わせて選べば良いと思いますが、私はデフォルトのApp Serviceのビルダー（Kudo）を選択しました。
最後に、App Serviceにデプロイするリポジトリと、そのブランチを指定すれば設定は完了です。
デプロイの設定が完了すると、以下の画面が表示されます。ちなみに、初回のデプロイは、5分ほどかかりました。右の方のログから状況を逐次確認できますが、各デプロイステップ毎に細かくログを確認することができて便利だなと思いました。
５分後・・・デプロイが完了したところで、画面を確認して見たところ、以下の画面が出てしまいました。
これ、調べてみると、npm buildでビルドされたアプリケーションをWebで公開する（index.htmlに接続させる）ためには、HTTPサーバを立ててやる必要があるとのこと。Create React Appの公式ドキュメントに説明がありました。
https://create-react-app.dev/docs/deployment/
App Service起動時の設定を追加してやれば良いようです。App Serviceの「構成」メニューの「全般設定」で、スタートアップコマンドに以下を追記します。
npm install -g serve && serve -s build
設定を追加後、アプリが自動的に再起動されます。そして、リソースのURLに接続すると・・出たー！！(T_T)
これでアプリケーションが正常にデプロイされるようになりました！
ちなみに、先ほどAzureと連携したVS Codeの方でも、デプロイされたアプリケーションのコードを確認することができるようになっていました。便利！
デプロイされたアプリケーションのソースコードは、「Files」ディレクトリ配下にアップロードされているようです。
[復習] Visual Studio Codeでの開発〜デプロイまでの流れ
上記一連の設定を終えたところで、実際にコードを修正して、App Serviceに再度デプロイをかけるまでの一連の流れを再現してみたいと思います。
Visual Studio Codeでソースコード修正
ReactのIndex.jsで読み込んでいるApp.js内の表示文言を”Hello World”に変更します。
Githubリポジトリへ修正内容をコミット＆プッシュ
ソースコードを変更したら、変更をコミット＆リモートリポジトリにプッシュを行います。
Github上にも変更が反映されました。
AppServiceへのデプロイ
ここは、App Serviceのビルダーが自動的に行ってくれます。
App Serviceのデプロイメントセンターを開くと、想定通り、デプロイが進行中となっています。
いかがでしたでしょうか。
以上、Azure App Serviceにアプリケーションを継続的にデプロイする手順でした！
おしまい
コメントを残す