Azure App Service

Azure App Service is a fully managed platform-as-a-service (PaaS) that allows developers to build, deploy, and scale web, mobile, and API applications.

Create Azure App Service

1. Within your Azure App Service Dashboard, click on + Create at the top left of the page above the Filter for any field.

2. This will navigate you to a page called Create Web App.

3. On the Basics Tab enter these settings.

   • Under Project Details choose a Subscription

   • Under the Project Details choose a Resource Group

   • Under Instance Details enter an App Service Name.

   • Under Instance Details select Docker Container as the Publish method.

   • Under Instance Details choose Linux as the Operating System.

   • Under Instance Details select a Region.

     • Recommend using the same region that your Cosmos DB is running in. Be aware that choosing certain regions will affect your options for Zone redundancy.

   • Under Pricing Plans choose a Linux Plan. Dependent on the chosen region.

   • Under Pricing Plans choose a Pricing Plan that is suitable for your environment requirements. Dependent on the chosen region.

NOTE: Availability of instance types will vary across regions.

Single Container Azure App Service

NOTE: Single Container deployment of Azure App Service does not require the use of a Nginx container deployment.

1. On the Docker Tab enter these settings.

   • For Options select Single Container.

   • For Image Source choose Docker Hub.

   • Under Docker hub options for Access Type choose Public

   • Under Docker hub options for Image and Tag enter path to the image on API Server Docker Hub Registry. Example: formio/formio-enterprise:9.3.0

   
2. On the Review + create tab review the App Service settings then press the Create button.

3. To deploy the PDF server repeat the steps in Create Azure App Service
4. On the Docker Tab enter these settings.

   • For Options select Single Container.

   • For Image Source choose Docker Hub.

   • Under Docker hub options for Access Type choose Public

   • Under Docker hub options for Image and Tag enter path to the image on PDF Server Docker Hub Registry. Example: formio/pdf-server:5.6.0

   
5. On the Review + create tab review the App Service settings then press the Create button.

6. Upon completion of the previous steps of the Single Container deployment on Azure App Service you can skip the "Multi-container Azure App Service" section and continue with steps following Adding Environment Variables.

Multi-container Azure App Service

NOTE: Azure App Service option for Docker Compose has been in Preview.

Preview features let you opt in to new functionality before it's released. Some preview features are available to anyone who wants to opt in.

Review Microsoft Azure Preview Policy before utilizing the multi-container deployment.

In this section, we will deploy a docker-compose.yml file to Azure App Service and connect it to the Cosmos DB and Blob Storage services previously mentioned.

3KB

formio-multicontainer-azure-app-service.zip

archive

1. On the Docker Tab enter these settings.

   • For Options select Docker Compose (Preview).

   • For Image Source choose Docker Hub.

   • Under Docker hub options for Access Type choose Public

   • For your Configuration File select the docker-compose.yml from the downloaded zip at the top of this page.

docker-compose.yml

## FILE: docker-compose.yml
version: '3'
services:
  ###############################################################################################################
  ## Nginx Proxy
  ##-------------------------------------------------------------------------------------------------------------
  ## Documentation for Azure Volume Mount Storage
  ## https://stackoverflow.com/questions/64019780/create-volume-for-container-running-on-azure-app-service-linux
  ## https://learn.microsoft.com/en-us/azure/app-service/tutorial-multi-container-app#modify-configuration-file
  ###############################################################################################################
  nginx:
    container_name: nginx
    image: nginx
    restart: always
    volumes:
      - ${WEBAPP_STORAGE_HOME}/site/wwwroot/conf.d:/etc/nginx/conf.d
    ports:
      - 80:80
    links:
      - api-server
      - pdf-server
    ## Comment out if running locally, for streaming logs to Azure
    logging:
      driver: stdout
  ###############################################
  ## API SERVER
  ###############################################
  api-server:
    container_name: api-server
    image: formio/formio-enterprise:9.3.0
    restart: always
    ports:
      - "3000:3000"
    environment:
      PORT: 3000
      DEBUG: "formio.*"
      PDF_SERVER: http://pdf-server:4005
      PORTAL_ENABLED: 1
      MONGO: ${MONGO}
      LICENSE_KEY: ${LICENSE_KEY}
      ADMIN_KEY: ${ADMIN_KEY}
      ADMIN_EMAIL: ${ADMIN_EMAIL}
      ADMIN_PASS: ${ADMIN_PASS}
      DB_SECRET: ${DB_SECRET}
      JWT_SECRET: ${JWT_SECRET}
    ## Comment out if running locally, for streaming logs to Azure
    logging:
      driver: stdout
  ##############################################
  ## PDF SERVER (Optional)
  ##############################################
  pdf-server:
    container_name: pdf-server
    image: formio/pdf-server:5.6.0
    restart: always
    ports:
      - "4005:4005"
    environment:
      LICENSE_KEY: ${LICENSE_KEY}
      MONGO: ${MONGO}
      FORMIO_AZURE_CONNECTION_STRING: ${FORMIO_AZURE_CONNECTION_STRING}
      FORMIO_AZURE_CONTAINER: ${FORMIO_AZURE_CONTAINER}
      FORMIO_PDF_PORT: 4005
      DEBUG: "pdf.*"
    ## Comment out if running locally, for streaming logs to Azure
    logging:
      driver: stdout

1. On the Review + create tab review the App Service settings then press the Create button.

Configure Volume Mount Storage for Nginx Proxy

1. From the App Service Dashboard on the left side navigation panel, locate Development Tools and select Advanced Tools option. Then the Go-> button.

Azure App Service Dashboard

1. This will take you to a Advanced Tools section for the deployment where you can view container logs, application settings, and deployment information.

Advanced Tools Section

1. At the top of the page click the link that says Bash, which will navigate into a terminal window where we were can create our default.conf file for our Nginx proxy container.

Bash File System

1. In the terminal when run the following commands to navigate to the correct directory, create a conf.d folder inside of ~/site/wwwroot then inside the conf.d folder create a file called default.conf that our Nginx container will use to proxy traffic to the correct containers.

## Navigate to static file directory and create conf.d folder
cd site/wwwroot && mkdir conf.d

## Change into the newly created conf.d directory and create default.conf file
cd conf.d && vi default.conf

Created default.conf

1. You will then copy the default.conf from the formio-multicontainer-azure-app-service.zip at the top of the page and save the file by typing :wq and pressing Enter.
2. To verify that this worked you can go back to the Advanced Tools page and click on the link at the bottom of the page under Browse Directory section where it says Site wwwroot

Adding Environment Variables

1. Once the App Service resource has been created you should have clicked Go to Resource, where you will be directed to an Overview page for the App Service.

2. On the left-side column underneath the Settings section select Configuration.

3. Once on the Configuration page click on Advanced Edit.

1. Copy and Paste the json from env.json in the azure-app-service-multcontainer.zip above.

2. Edit the environment variables to for your environment before clicking OK.

1. Once you've finished editing your environment variables in the Advanced Editing section click Save button to persist your current configuration.

API Server Environment Variables

Name	Description	Example
LICENSE_KEY	Form.io Enterprise license key	<formio-enterprise-license>
PORT	Port API server will be served on	3000
DEBUG	Application Logging Settings.	Less Verbose: "formio.*" Most Verbose: "*.*"
PORTAL_ENABLED	Used to enable or disable the developer portal within a remote environment.	true
MONGO	Defines your MongoDB compatiable database string.	mongodb://formio-cosmos-db:@:10255/formio?ssl=true&replicaSet=globaldb&retrywrites=false&maxIdleTimeMS=120000&appName=@formio-cosmos-db@
ADMIN_EMAIL	Used to set the email address of the default root user login when the PORTAL_ENABLED variable is set to "true".	[e-mail]
ADMIN_PASS	Used to set the password of the default root user login.	CHANGEME
DB_SECRET	The database encryption secret	CHANGEME
JWT_SECRET	Used as the secret for JWT token encryption. It is used to generate and validate JSON Web Tokens (JWT) for authentication purposes.	CHANGEME
PDF_SERVER	Used to specify the URL or IP address of the PDF server or load balancer. If you are not using Web PDFs and only need to generate PDFs of submissions, you do not need to make the PDF server available on the internet and it only needs to be accessible to the Form.io Server.	Docker Compose: http://pdf-server:4005 Single Container: https://formio-pdf-server.azurewebsites.net (PDF App Service Default Domain)

PDF Server Environment Variables

Name	Description	Example
MONGO	Defines your MongoDB compatiable database string.	mongodb://formio-cosmos-db:@:10255/formio?ssl=true&replicaSet=globaldb&retrywrites=false&maxIdleTimeMS=120000&appName=@formio-cosmos-db@
LICENSE_KEY	Form.io Enterprise license key	<formio-enterprise-license>
FORMIO_AZURE_CONNECTION_STRING	Connection string for accessing the Azure Blob Storage. Configures project's File Storage settings and the PDF Server.	DefaultEndpointsProtocol=https;AccountName=formioblobstoragecontainer;AccountKey=;EndpointSuffix=core.windows.net
FORMIO_AZURE_CONTAINER	Specifies the name of the container in Azure Blob Storage where the files will be stored.	formio-blob-storage-container
FORMIO_PDF_PORT	Port PDF server will be served from.	4005
WEBSITES_PORT	*Only required for a single container deployment of the PDF server. It tells Azure App Service that the PDF server container is listening on this port. It should match the value of FORMIO_PDF_PORT.	4005
DEBUG	Application Logging Settings.	Less Verbose: "pdf.*" Most Verbose: "*.*"

Enable App Service Logs

1. The logs are not turned on by default so as a last step go to App Service Logs on the side bar underneath the Monitoring section.

2. Where it says Application Logging toggle it to File System, and set some quota thresholds and a log retention period.

Register Azure App Service IP with Cosmos DB Firewall

If you followed along and reach this point and are receiving connection issues with the database. The most likely cause is that you will need to register the Azure App Service IP address with your Cosmos DB Firewall.

1. In the Overview page of the Azure App Service, copy the Virtual IP address under the Networking section.

2. To add your IP to the Firewall settings in Cosmos DB first select the database. Then in the left bar under Settings select the Networking option.

3. In the Firewall section of the Cosmos DB Networking page add the Virtual IP address from the Azure App Service Networking section.