Azure Linux Web App and http server

The advantage of using open-source solutions is that you can access many up-to-date features (e.g., using Python and related packages to operate big data models). However, the downside is that sometimes you need to understand the system architecture a bit, not just the code itself. This article will introduce how to perform initial port configuration on an Azure Linux Web App and how to modify default values.

TOC

HTTP Server and Startup Script

backend example: python

frontend example: node

HTTP Server and Startup Script

Azure Web App (App Service) exposes ports 80/443, with 443 being the encrypted port commonly used. This means that regardless of which port your locally developed application listens to, you need to perform port forwarding when deploying to the Web App.

A typical Windows Web App has an IIS built-in as the HTTP server, listening on port 80 by default. Regardless of the stack used (e.g., node, php, .net), IIS serves as the HTTP server. Therefore, since the web app has pre-configured forwarding rules on the platform side, users are not aware of the HTTP server and port forwarding during the operation.

However, the situation is different for Linux Web Apps. Different stacks have different HTTP servers (e.g., node can use pm2, php can use nginx, python can use uvicorn, etc.). The same HTTP server can also be used for multiple stacks (e.g., nginx can be used for php or python). Some languages can even start a simple server for port listening through an interpreter and corresponding modules (e.g., python with http.server). This makes it important to understand which HTTP server your application is running on.

You might recall that in different development environments, you need to enter some commands in the console to start the app before testing an application, such as:

uvicorn app:test --reload
npm start

This is because different tutorials usually use the corresponding HTTP server (or tools with HTTP server functionality) as a prerequisite for starting. Since these tools are constantly updated, the command line instructions or suffix parameters vary greatly. Therefore, a Startup Command feature is needed in Azure Linux Web App to manage these commands.

In the following sections, I will provide two examples and describe how to deploy your application to Azure Linux Web App and run it successfully under different stacks and HTTP servers.

backend example: python

For a Linux Python app, this example uses Python's http.server package as the HTTP server. The command I use in the local development environment is `python server.py`.

[ATTACH type=full" alt="theringe_0-1724229492047.png]63375[/ATTACH]

import os
import http.server
import socketserver
from http import HTTPStatus

class Handler(http.server.SimpleHTTPRequestHandler):
   def do_GET(self):
       self.send_response(HTTPStatus.OK)
       self.end_headers()
       msg = 'scale %s' % (self.path)
       self.wfile.write(msg.encode())

port = 8000
print('Listening on port %s' % (port))
httpd = socketserver.TCPServer(('', port), Handler)
httpd.serve_forever()

[ATTACH type=full" alt="theringe_1-1724229519483.png]63376[/ATTACH]

[ATTACH type=full" alt="theringe_2-1724229519484.png]63377[/ATTACH]

After confirming the HTTP server and command, you can create a Linux python web app and deploy the code directly.

[ATTACH type=full" alt="theringe_3-1724229580444.png]63378[/ATTACH]

Remember the port mapping mentioned earlier? Since the python environment provided by Azure Web App forwards port 8000 to the exposed port 443 by default, for this code, you don't need to set additional port forwarding rules after deployment. Just modify the startup command.

[ATTACH type=full" alt="theringe_4-1724229627848.png]63379[/ATTACH]

Before actual testing, remember to restart the app.

[ATTACH type=full" alt="theringe_5-1724229646470.png]63380[/ATTACH]

[ATTACH type=full" alt="theringe_6-1724229646470.png]63381[/ATTACH]

If your application needs to change the default listening port, for example, to 7999, in this case, besides modifying the corresponding port name in the code, you also need to add `WEBSITES_PORT=7999` in the App Setting to override the default port forwarding rules.

[ATTACH type=full" alt="theringe_7-1724229767325.png]63382[/ATTACH]

[ATTACH type=full" alt="theringe_8-1724229767326.png]63383[/ATTACH]

To confirm that your application is indeed listening on port 7999, you can go to the Kudu site and run the command:

[iCODE]netstat -tulpn | grep LISTEN[/iCODE]

[ATTACH type=full" alt="theringe_9-1724229790298.png]63384[/ATTACH]

[ATTACH type=full" alt="theringe_10-1724229821918.png]63385[/ATTACH]

[ATTACH type=full" alt="theringe_11-1724229821918.png]63386[/ATTACH]

frontend example: node

For a Linux node app, this example uses pm2 as the HTTP server. The command I use in the local development environment is `npm start`.

npx create-react-app reactfailreact-app
cd  reactfailreact-app
npm start

[ATTACH type=full" alt="theringe_12-1724229898388.png]63387[/ATTACH]

[ATTACH type=full" alt="theringe_13-1724229898389.png]63388[/ATTACH]

[ATTACH type=full" alt="theringe_14-1724229898390.png]63389[/ATTACH]

Azure Linux node Web App has a built-in pm2, a lightweight process manager with an HTTP server, suitable for experimentation. You can create a Linux node web app, compile the code, and deploy it.

[ATTACH type=full" alt="theringe_15-1724229976438.png]63390[/ATTACH]

Since the node environment provided by Azure Web App forwards port 3000 to the exposed port 443 by default, for this code, you don't need to set additional port forwarding rules after deployment. Just modify the startup command.

Run the following command to compile the project. After execution, a build subfolder will be created.

[iCODE]npm run build[/iCODE]

[ATTACH type=full" alt="theringe_16-1724230044753.png]63391[/ATTACH]

Create or modify `build/.deployment` with the following content:

[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=false

[ATTACH type=full" alt="theringe_17-1724230092793.png]63392[/ATTACH]

Publish your project, specifying the build subfolder during the publishing process.

[ATTACH type=full" alt="theringe_18-1724230116680.png]63393[/ATTACH]

[ATTACH type=full" alt="theringe_19-1724230116681.png]63394[/ATTACH]

[ATTACH type=full" alt="theringe_20-1724230116682.png]63395[/ATTACH]

Go back to the app, navigate to Configuration, and specify the Startup Command as follows:

[iCODE]pm2 serve /home/site/wwwroot --no-daemon --spa [/iCODE]

[ATTACH type=full" alt="theringe_24-1724230216195.png]63396[/ATTACH]

After restarting the web app, you can visit your webpage using a browser.

[ATTACH type=full" alt="theringe_25-1724230233523.png]63397[/ATTACH]

If your application needs to change the default listening port, for example, to 2999, in this case, besides specifying the listening port in the startup command, you also need to add `WEBSITES_PORT=2999` in the App Setting to override the default port forwarding rules.

[iCODE]pm2 serve /home/site/wwwroot --no-daemon --spa --port 2999[/iCODE]

You can also go to the Kudu site and run the command:

[iCODE]netstat -tulpn | grep LISTEN[/iCODE]

[ATTACH type=full" alt="theringe_26-1724230337515.png]63398[/ATTACH]

Continue reading...