前回はプロジェクト化ということで docker-compose.yml ファイルを作成して実行できるようにしました。今回は、前回作成したイメージを Azure で利用できるように設定していきます。
Visual Studio Code の機能拡張の追加
手元で利用している Visual Studio Code では以下の機能拡張を有効にしています。
これにより、Visual Studio 上ですでに作成したイメージを Azure に展開することができます。Azure にはコンテナのイメージを管理するための、Azure コンテナレジストリを事前に作成しておいてください。
ソースコードの変更
現在の playwright のアプリは以下のように 3000 番のポートを利用して立ち上がるようになっています。
const port = 3000これを環境変数で設定できるようにします。
const port = process.env.PORT || 3000これにより、デフォルトでは 3000 番を利用して起動、本番環境などでは ENV にポート番号を指定して起動起動できるようにします。
利用するイメージをアップする
Docker の機能拡張で表示されているイメージを、今回は Azure のコンテナレジストリにアップします。なお、今回は 0.1.0 のバージョンのイメージのタグに関して、latest という形で最新版のタグを設定しました。
まず最初に、アップするイメージを選択して右クリックでメニューを表示します。すると push .. が表示されます。
しばらくすると、利用可能なコンテナレジストリ一覧が表示されます。今回は sitecorejp を指定します。
イメージの名前を指定します。今回はそのまま実行します。しばらくイメージのアップロードが実行されます。
Azure の管理画面にて、イメージがアップされていることを確認してください。
Azure Web App の起動
今回は Docker のコンテナを利用するため、Web app for Containers を選択してください。
Web アプリの設定としては以下の点を確認してください。
公開は Docker コンテナー
オペレーティングシステムは Linux
データセンターおよび Linux プランは適宜合わせて
Docker の設定タブまで移動して、今回アップしたイメージを選択します。
残りはデフォルトの設定のまま進めてください。これでイメージを利用してコンテナを起動する準備ができました。
しかしながら、デフォルトで 3000 番ポートを利用して起動するようになっているため、アプリケーション設定を利用してポートを変更します。コンテナの構成から、新しいアプリケーション設定を選択、PORT として 443 を指定してください。
動作確認
起動したサイトにアクセスをしてください。しばらくすると、以下のようにデフォルトのメッセージが表示されます。
API を利用してアクセスをすると、スクリーンショットの取得に成功します。
まとめ
コンテナにしたイメージを、Azure のコンテナリポジトリに登録、そのイメージを利用してコンテナを利用した Web App を起動することができました。.env で管理することができる値は、今回のようにポート番号のように設定することができるため、画面のサイズを変更したい、といった場合は .env の設定項目を参照しながら設定することで、イメージを利用してスクリーンショットのサイズの違うものを取得することが可能となります。