コンテンツ更新

ブログで紹介をしていた Playwright のトピックに関しては、最新版では Vercel に展開できるようにしました。以下のページを参照してください。

• Playwright を展開する

Visual Studio Code の機能拡張の追加

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

• Docker
• Azure Account
• Azure Functions
• Azure Resource

これにより、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 の設定項目を参照しながら設定することで、イメージを利用してスクリーンショットのサイズの違うものを取得することが可能となります。

関連タグ

• Docker