1

I have a ReactJS app that connects to json-server as a fake API. I have deployed it to Azure using VSCode and the F1 Free Linux tier.

When I run it locally with npm start everything works.

  "scripts": {
      "start": "npm-run-all --parallel mock web",
      "web": "cross-env PORT=8080 react-scripts start",
      "mock": "node index.js"
    },

The index.js contains the json-server config etc as it is a bit more than json-server --watch db.json

I am using the package npm-run-all to run json-server and the react app at the same time.

This works fine locally but when I try to deploy it to Azure the container fails to start:

INFO  - Starting container for site
INFO  - docker run -d -p 7307:8080 --name demo_0_8cd -e WEBSITE_SITE_NAME=demo -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_HOSTNAME=demo.azurewebsites.net -e WEBSITE_INSTANCE_ID=8fe4512f9f -e HTTP_LOGGING_ENABLED=1 appsvc/node:12-lts_20200918.1
INFO  - Initiating warmup request to container demo_0_8cd for site demo
ERROR - Container demo_0_8cd for site demo has exited, failing site start
ERROR - Container demo_0_8cd didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.
INFO  - Stopping site demo because it failed during startup.

I can't see much in the container logs to debug this.

I also can't tell what command Azure is using to start since all it says in the logs is docker run.

  • Is it calling npm start? (see EDIT - tldr: yes)
  • Why is it working locally but not in Azure?
  • Why is it not responding to the ping?
  • Is it something to do with this being a React app instead of "just" a node app?

EDIT:

The docker container that this tutorial generates has scripts in /opt/startup.

The templated one is /opt/startup/init_container.sh and this contains:

STARTUP_COMMAND_PATH="/opt/startup/startup.sh"
STARTUPCOMMAND=$(cat $STARTUP_COMMAND_PATH)
echo "Running $STARTUPCOMMAND"
$STARTUP_COMMAND_PATH

The /opt/startup/startup.sh contains

# Enter the source directory to make sure the script runs where the user expects
cd "/home/site/wwwroot"
npm start

The start script in the package.json for the demo app has "start": "node ./bin/www"

Which then has:

var http = require('http');
var server = http.createServer(app);
server.listen(port);

So the key thing here is that it does npm start to run which then creates a nodejs server to serve the application on port 8080.

The npm start in my application ends up calling react-scripts start, which uses the WebpackDevServer

Whilst you shouldn't use the dev server for production, does that also mean you can't use it on a server for some reason?

This is just a test/demo to familiarise myself with Azure and not production.

opticyclic
  • 7,412
  • 12
  • 81
  • 155
  • How are you compiling your react app? Or are you trying to run the development server on a cloud VM for some strange reason? Once your app is compiled you shouldn't need node at all, (except for your fake backend) serve your React stuff with nginx or apache. – Jared Smith Nov 30 '20 at 02:46
  • I'm fairly sure that it is doing `npm run build`. The express demo in that link works fine without nginx or apache. – opticyclic Nov 30 '20 at 03:01
  • 1
    Check https://stackoverflow.com/a/60594983/13791953 – krishg Nov 30 '20 at 07:16
  • @opticyclic no you don't use nginx to run express, how could you? `npm build` creates your static assets yes, but how are you *serving* them? – Jared Smith Nov 30 '20 at 11:36

1 Answers1

1

The end result is that npm run is running the WebpackDevServer.

This isn't designed for production so we need to have another way of running on Azure.

Changing the Azure webapp Startup command to npx serve -l 8080 build will run the ReactJS application in Azure.

NB: This answer explains how to run it, but not why.

See this other question for why.

opticyclic
  • 7,412
  • 12
  • 81
  • 155