node.jstypescriptazureazure-web-app-serviceazure-container-apps

Run Express server with my NodeJS app via Azure App Service deployed to Azure Container


My NodeJS with Express server in TS app gets a 404 when I hit the https://appurl/server-running endpoint in server.mjs. But when I do https://appurl/assets/img.png, it returns back an image which is not what I was expecting. The default https://appurl/ is a basic TS page which works fine. I tried redirecting my url requests to server.mjs via web.config hoping to use iisnode but that does not work either. Also, I don't see any IISNODE logs.

I have also tried navigating in Azure container via kudu where my app is deployed to manually start node server.mjs and then hitting the endpoint, but got the same results. Looking at process explorer, my express server does not run unless I manually invoke it via kudu cli which is another issue. I got my cors set to * for now. This Wep App is created as an App Service deployed on an Azure Container, I am currently on a free tier of azure, supecting the free tier does not allow iisnode? I cannot install anything on the container either. Node v20.18.0 What am I missing here, why is my express server not running and my redirects not working after deployments?

HTTP Error 404.0 - Not Found The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

PS: I have a beginner-level understanding of these concepts, and I am doing this project as a learning experience.

package.json snip

`  "type": "module",
  "main": "server.mjs",
  "scripts": {
    "dev": "vite",
    "mainbuild": "tsc -b && vite build && npx tsc -b tsconfig.server.json",
    "build": " npm run mainbuild && npm run rename.mjs && npm run postbuild",
    "postbuild": "cp web.config dist/",
    "rename.mjs": "renamer --find \"/\\.js$/\" --replace \".mjs\" \"./dist/*.js\"",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "concurrently \"node server.mjs\" \"vite\""`

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="server.mjs" verb="*" modules="iisnode" resourceType="Unspecified" />
    </handlers>
    <defaultDocument>
      <files>
        <clear />
        <add value="server.mjs" />
      </files>
    </defaultDocument>
    <iisnode>
      <nodeProcessCommandLine>node</nodeProcessCommandLine>
      <loggingEnabled>true</loggingEnabled>
    </iisnode>
  </system.webServer>
</configuration>

server.ts which is converted to js and then renamed to mjs

import express from "express";
import cors from "cors";
import {existsSync} from "fs";
const {FRONTEND_URL, EXPRESS_SERVER_CONFIG} = await import(
  existsSync("./config.ts") ? "./config.ts" : "./config.mjs"
);
import JSONBig from "json-bigint";
const app = express();

app.use(
  cors({
    origin: FRONTEND_URL, 
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], 
    credentials: true,
  })
);
app.use(bodyParser.json());

app.get("/server-running", (req, res) => {
  console.log(req.baseUrl);
  res.send("Server is Running");
});

app.use((req, res) => {
  res.status(404).json({error: "404"});
});

const PORT = process.env.PORT || 3000; 
app.listen(PORT, () => {
  console.log(
    `Server is running on port ${PORT} front end url: ${FRONTEND_URL}`
  );
});

CI/CD CI/ CD Pipeline

Kudu 404 Error and Kudu browing


Solution

  • But when I do https://appurl/assets/img.png, it returns back an image which is not what I was expecting.

    When you access https://appurl/assets/img.png and get an image, it indicates that the server is serving static files correctly.

    and also add "outDir": "./dist", in the tsconfig.json configuration file.

    enter image description here

    I can be able to send the post req to the server after configuring this locally.

    Initially I too got the same 404 error it come due to incorrect endpoint directing towards server.

    After making changes I had deployed my application to the azure app service.

    enter image description here

    deploying through pipeline or from editor doesn't make difference for your error.

    After the deployment I can be able to run my application successfully and also able access endpoints too.

    Kudu console: enter image description here

    enter image description here