Tailwind Logo

Playwright のコンテナイメージを Azure Web Apps で利用する

Docker

公開日: 2023-10-23

前回はプロジェクト化ということで docker-compose.yml ファイルを作成して実行できるようにしました。今回は、前回作成したイメージを Azure で利用できるように設定していきます。

Visual Studio Code の機能拡張の追加

手元で利用している Visual Studio Code では以下の機能拡張を有効にしています。

これにより、Visual Studio 上ですでに作成したイメージを Azure に展開することができます。Azure にはコンテナのイメージを管理するための、Azure コンテナレジストリを事前に作成しておいてください。

ソースコードの変更

現在の playwright のアプリは以下のように 3000 番のポートを利用して立ち上がるようになっています。

TypeScript
const port = 3000

これを環境変数で設定できるようにします。

TypeScript
const port = process.env.PORT || 3000

これにより、デフォルトでは 3000 番を利用して起動、本番環境などでは ENV にポート番号を指定して起動起動できるようにします。

利用するイメージをアップする

Docker の機能拡張で表示されているイメージを、今回は Azure のコンテナレジストリにアップします。なお、今回は 0.1.0 のバージョンのイメージのタグに関して、latest という形で最新版のタグを設定しました。

まず最初に、アップするイメージを選択して右クリックでメニューを表示します。すると push .. が表示されます。

playwright12.png

しばらくすると、利用可能なコンテナレジストリ一覧が表示されます。今回は sitecorejp を指定します。

playwright13.png

イメージの名前を指定します。今回はそのまま実行します。しばらくイメージのアップロードが実行されます。

playwright14.png

Azure の管理画面にて、イメージがアップされていることを確認してください。

playwright15.png

Azure Web App の起動

今回は Docker のコンテナを利用するため、Web app for Containers を選択してください。

playwright16.png

Web アプリの設定としては以下の点を確認してください。

  • 公開は Docker コンテナー
  • オペレーティングシステムは Linux
  • データセンターおよび Linux プランは適宜合わせて

Docker の設定タブまで移動して、今回アップしたイメージを選択します。

playwright17.png

残りはデフォルトの設定のまま進めてください。これでイメージを利用してコンテナを起動する準備ができました。

しかしながら、デフォルトで 3000 番ポートを利用して起動するようになっているため、アプリケーション設定を利用してポートを変更します。コンテナの構成から、新しいアプリケーション設定を選択、PORT として 443 を指定してください。

playwright18.png

動作確認

起動したサイトにアクセスをしてください。しばらくすると、以下のようにデフォルトのメッセージが表示されます。

playwright19.png

API を利用してアクセスをすると、スクリーンショットの取得に成功します。

playwright20.png

まとめ

コンテナにしたイメージを、Azure のコンテナリポジトリに登録、そのイメージを利用してコンテナを利用した Web App を起動することができました。.env で管理することができる値は、今回のようにポート番号のように設定することができるため、画面のサイズを変更したい、といった場合は .env の設定項目を参照しながら設定することで、イメージを利用してスクリーンショットのサイズの違うものを取得することが可能となります。

関連タグ