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.

Single Container Azure App Service

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.0.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.5.2
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

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.

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.

## 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.0.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.3.2
    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.

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

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.

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

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

PDF Server Environment Variables

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.