In the previous article, we created a docker-compose.yml file to make it a project so that we can run it. In this article, we will configure the image created in the previous article so that it can be used in Azure.
Additional Visual Studio Code extensions
The following extensions are enabled in the Visual Studio Code used at hand.
This allows images already created in Visual Studio to be deployed in Azure; an Azure Container Registry should be pre-created in Azure to manage container images.
Source code changes
The current playwright application is launched using port 3000 as shown below.
TypeScript
const port = 3000This can be set via environment variables.
TypeScript
const port = process.env.PORT || 3000This allows startup using port 3000 by default and startup in a production environment, etc., by specifying the port number in the ENV.
Enhance the image you use.
The image shown in the Docker extension is now uploaded to Azure's container registry. Note that for the 0.1.0 version of the image, the tag "latest" has been set.
First, select the image to be uploaded and right-click to bring up the menu. Then push.. will be displayed.
After a few moments, a list of available container registries will be displayed. In this case, sitecorejp is specified.
Specify the name of the image. In this case, we will execute the image as is. The image will be uploaded for a while.
Confirm that the image has been uploaded on the Azure administration page.
Launch Azure Web App
Select Web app for Containers since we will be using Docker containers.
The following points should be checked as part of the web application configuration.
- Public is a Docker container
- Operating system is Linux
- Data center and Linux plans are tailored accordingly
Navigate to the Docker settings tab and select the image you have just uploaded.
The rest of the default settings should proceed as is. You are now ready to start the container using the image.
However, since the default is to start using port 3000, use the application configuration to change the port. From the container configuration, select New Application Settings and specify 443 as PORT.
Operation check
Please access the site you have activated. After a few moments, you will see the default message as shown below.
API to access the site, the screenshot is successfully retrieved.
Summary
The containerized image was registered in the Azure container repository, and the Web App using the container was launched using the image. The values that can be managed in .env can be set like port numbers, so if you want to change the size of the screen, it is possible to get screenshots of different sizes using the image by referring to the .env setting items. If you want to change the size of the screen, you can set it up by referring to the .env settings.