Currently, I have an ExpressJS / EJS web app hosted on Azure App Service via GitHub and a MySQL database I created in the same resource. I did not use the Azure Web + Database setup and am not using VNet integration as a result. However, my website only connects to the database when I use an IP range of 0.0.0.0 - 255.255.255.255 instead of the outbound addresses described on my App Service web app's Properties page.
I have tried turning off require_secure_transport and using the Service Connector to ensure correctly configured environmental variables. I am able to load the web app regardless but any page that requires database logic returns an error message whenever I try to use the specific outbound addresses instead of the 0-255 range. Here's a sample of what the app looks like:
database.js:
require('dotenv').config();
const fs = require('fs')
const mysql = require('mysql2');
const con=mysql.createConnection({
host:process.env.AZURE_MYSQL_HOST,
user:process.env.AZURE_MYSQL_USER,
password:process.env.AZURE_MYSQL_PASSWORD,
database:process.env.AZURE_MYSQL_DATABASE,
port:process.env.AZURE_MYSQL_PORT,
ssl: process.env.CERT
});
module.exports = con;
index.js:
let express = require('express');
let app = express();
const con = require('./database');
app.set('view engine', 'ejs');
const bp = require('body-parser')
app.use(bp.json())
app.use(bp.urlencoded({ extended: true }))
const { name } = require('ejs');
app.listen(process.env.WEBSITE_PORT);
app.get('/event_manager', (req,res) => {
con.query(`SELECT DATE_FORMAT(event_date, '%a, %d %M %Y')
AS event_date, event_name, event_location, event_time, description, links FROM details`, (err, result) => {
if (err) {
res.send('error2');
} else {
res.render('pages/event_manager', { result });
}
});
});
So, when I visit the /event_manager page, I get an error2 message when not using the 0-255 IP address range.
event_manager.ejs
<html lang="en">
<%- include('../common/head.ejs')%>
<body>
<header><%- include('../common/header.ejs')%></header>
<main>
<h1>Active Events</h1>
<section>
<table class="table">
<thead class="table-dark">
<tr>
<th scope="col">Date</th>
<th scope="col">Event</th>
<th scope="col">Location</th>
<th scope="col">Time</th>
<th scope="col">Description</th>
<th scope="col">Learn More</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<% if (result && result.length) { %>
<ul>
<% result.forEach((item) => { %>
<li><%= item.event_date %></li>
<% }) %>
</ul>
<% } %>
</td>
<td>
<% if (result && result.length) { %>
<ul>
<% result.forEach((item) => { %>
<li><%= item.event_name %></li>
<% }) %>
</ul>
<% } %>
</td>
<td>
<% if (result && result.length) { %>
<ul>
<% result.forEach((item) => { %>
<li><%= item.event_location %></li>
<% }) %>
</ul>
<% } %>
</td>
<td>
<% if (result && result.length) { %>
<ul>
<% result.forEach((item) => { %>
<li><%= item.event_time %></li>
<% }) %>
</ul>
<% } %>
</td>
<td>
<% if (result && result.length) { %>
<ul>
<% result.forEach((item) => { %>
<li><%= item.description %></li>
<% }) %>
</ul>
<% } %>
</td>
<td>
<% if (result && result.length) { %>
<ul>
<% result.forEach((item) => { %>
<li><a href="<%= item.links %>"><%= item.links %></a></li>
<% }) %>
</ul>
<% } %>
</td>
</tr>
</tbody>
</table>
</section>
<h1>Create an Event</h1>
<form action="create_event" style="border:5px solid #ccc; padding: 5px" method = "POST">
<div class="form-group">
<label for="event_date">Date</label>
<input type="date" class="form-control" name="event_date" placeholder="Choose the event date">
</div>
<div class="form-group">
<label for="event_name">Event</label>
<input type="text" class="form-control" name="event_name" placeholder="Name of event">
</div>
<div class="form-group">
<label for="event_location">Location</label>
<input type="text" class="form-control" name="event_location" placeholder="Event location">
</div>
<div class="form-group">
<label for="event_time">Time</label>
<input type="text" class="form-control" name="event_time" placeholder="Event Time">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea type="text" class="form-control" name="description" rows = 5 cols="75"
placeholder="Describe your event and incentives to carpooling attendees..."></textarea>
</div>
<div class="form-group">
<label for="links">Link</label>
<input type="text" class="form-control" name="links" placeholder="Provide a link to your website, social media, etc.,">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<footer><%- include('../common/footer.ejs')%></footer>
</body>
</html>
Furthermore, when I try and add the outbound addresses of the app to the MySQL database's Firewall Rules, I get a generic error message: An unexpected error occured while processing the request. Tracking ID: ... I am only able to add the inbound address of the app--which I suspect to be incorrect anyway.
I am new to web development and Azure so any help would be greatly appreciated.