Support Needed – Azure Setup (MySQL + App Services)

Question

Hello,

I need help setting up the following Azure architecture:

1. MySQL Flexible Server – Main database; need firewall/VNet configuration for secure connectivity.

Backend App Service (Node.js) – Will connect to MySQL using environment variables and perform CRUD operations.

Frontend App Service (React.js) – Will call the backend API; need correct CORS setup.

Also need guidance on:

Connecting both App Services to MySQL Flexible Server

Recommended deployment steps

Please assist in validating and configuring this setup.I need help setting up the following Azure architecture:

MySQL Flexible Server – Main database; need firewall/VNet configuration for secure connectivity.

Backend App Service (Node.js) – Will connect to MySQL using environment variables and perform CRUD operations.

Frontend App Service (React.js) – Will call the backend API; need correct CORS setup.

Also need guidance on:

Connecting both App Services to MySQL Flexible Server

Recommended deployment steps

Please assist in validating and configuring this setup.

Answer 1

To set up your Azure architecture with MySQL Flexible Server and the two App Services (Node.js backend and React.js frontend), follow these steps:

1. MySQL Flexible Server Setup

• Create MySQL Flexible Server: Use the Azure CLI to create a MySQL Flexible Server instance with public access or within a Virtual Network (VNet) for enhanced security. Ensure to configure firewall rules to allow access from your App Services.

    az mysql flexible-server create \
    --name <your-mysql-server-name> \
    --resource-group <your-resource-group> \
    --location <your-location> \
    --admin-user <your-mysql-admin-username> \
    --admin-password <your-mysql-admin-password>
  

• Firewall Configuration: Set up firewall rules to allow your App Services to connect to the MySQL server. You can do this by creating a firewall rule that allows the IP addresses of your App Services.

2. Backend App Service (Node.js)

• Create App Service: Create your Node.js App Service using the Azure CLI. Make sure to set the runtime to Node.js.

    az webapp create \
    --resource-group <your-resource-group> \
    --plan <your-app-service-plan> \
    --name <your-backend-app-name> \
    --runtime "NODE|<node-version>"
  

• Environment Variables: Configure environment variables for your database connection in the App Service settings.

    az webapp config appsettings set \
    --name <your-backend-app-name> \
    --resource-group <your-resource-group> \
    --settings DB_HOST="<your-mysql-server-name>.mysql.database.azure.com" \
    DB_DATABASE="<your-database-name>" \
    DB_USERNAME="<your-mysql-admin-username>" \
    DB_PASSWORD="<your-mysql-admin-password>"
  

3. Frontend App Service (React.js)

• Create Frontend App Service: Similarly, create your React.js App Service.

    az webapp create \
    --resource-group <your-resource-group> \
    --plan <your-app-service-plan> \
    --name <your-frontend-app-name> \
    --runtime "NODE|<node-version>"
  

• CORS Configuration: Set up CORS in your backend to allow requests from your frontend App Service. You can do this in your Node.js application by adding the appropriate headers or using a middleware like cors.

4. Connecting Both App Services to MySQL Flexible Server

• Ensure that both App Services have the correct connection strings set in their environment variables to connect to the MySQL Flexible Server.

5. Recommended Deployment Steps

• Deploy Backend: Use Local Git or Azure DevOps to deploy your Node.js application.
• Deploy Frontend: Deploy your React.js application similarly, ensuring it can communicate with the backend API.

By following these steps, you should be able to set up your Azure architecture effectively. Make sure to test the connections and configurations after deployment to ensure everything is working as expected.

---

References:

• Deploy a PHP and Azure Database for MySQL - Flexible Server app on Azure App Service
• Connect an App Services Web app to Azure Database for MySQL - Flexible Server in a virtual network

Answer 2

Hey Thiru Admin! It sounds like you're looking to set up a solid Azure architecture involving a MySQL Flexible Server and two App Services. Let's break down your requirements and provide you some guidance.

Setting Up Your Architecture

MySQL Flexible Server Configuration:

• Firewall/VNet Configuration: To secure your MySQL Flexible Server, you can set up a Virtual Network (VNet) and configure firewall rules to allow connections only from your App Services. Make sure to whitelist the IP addresses of your App Services. For detailed steps on how to set this up, check out the documentation on creating an Azure Database for MySQL server.

Backend App Service (Node.js):

  - **Connecting to MySQL**: You’ll need to set the connection string in the App Service Application Settings. Make sure to use environment variables to store sensitive information such as the database username and password. Here's an example of how you can structure your connection in Node.js:
  
  ```javascript
  const mysql = require('mysql');

const connection = mysql.createConnection({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASS, database: process.env.DB_NAME, }); ```

     - You can update environment variables in Azure Portal under your App Service -> Configuration -> Application settings.
     
     **Frontend App Service (React.js)**:
     
        - **CORS Setup**: To allow your frontend to communicate with the backend, you need to configure CORS in your Node.js backend. Here’s a quick example using the `cors` middleware:
        
        ```javascript
        const cors = require('cors');

app.use(cors({ origin: 'https://your-frontend-url.com' })); ```

        **Connecting Both App Services to MySQL**:
        
           - You can follow similar steps as mentioned for the Backend App Service to configure connection settings in your React app if it needs to interact with MySQL directly (which is generally not recommended for security reasons).
           

Recommended Deployment Steps:

1. Create MySQL Flexible Server and configure the requisite firewall and VNet settings.
2. Set up the Backend App Service (Node.js):
   • Configure environment variables.
     • Deploy your Node.js app.
     1. Set up the Frontend App Service (React.js):
        • Configure CORS on your backend.
          • Deploy your React app.
          1. Test the entire architecture to ensure that both services can communicate with the MySQL database securely.

Follow-Up Questions:

1. Have you created your MySQL Flexible Server and configured the firewall rules yet?
2. Are there specific deployment tools or methods you plan to use (e.g., Azure CLI, GitHub Actions)?
3. Do you have any existing code for your Node.js or React app that you’d like assistance with regarding the connection strings or CORS settings?
4. What specific issues are you facing in your setup that you want to focus on?

I hope this helps you get started! If you have more questions or need clarification on any step, feel free to ask!

References:

• Creating an Azure Database for MySQL server
• MySQL Flexible Server Documentation
• Azure App Service
• Node.js MySQL Example
• CORS Middleware in Express

Was this helpful?