Search code examples
javascriptreactjsnode.jsazure

Azure issue unresponsive pings on port 8080

I created an app with a react front end and go back end. I was able to store the go backend in a docker container and then deploy it to azure and create a web app for it. The backend is working successfully when i make requests on postman. The issue I'm having is when i try connecting my frontend code through my github repo, it is saying that the container didn't respond to pings on port 8080. I've been searching google and asking chatgpt for solutions for the past two days with no luck. I've made 100's of different modifications to my package.json for a fix. Here is my current package.json scripts section:

"scripts": {
    "start": "serve -s build -l $PORT",
    "build": "react-scripts build",
    "test": "react-scripts test --passWithNoTests",
    "eject": "react-scripts eject"
  },

It's working locally but just won't work when i attempt to deploy at all. I'm wondering if there could be any fix with adjusting the github actions file? Any help would be greatly appreciated.

Solution

  • I tried deploying a simple web app with Go as the backend and React as the frontend. When I deploy my React app to Azure Web App using GitHub, I get the same error.

    it is saying that the container didn't respond to pings on port 8080.

    To resolve the above, I used below Startup Command in the Configuration section of my Azure Web App.

    pm2 serve /home/site/wwwroot/build --no-daemon --spa

    enter image description here

    Make Sure to Enable Access-Control-Credentials for Frontend URL in CORS section of Azure Web App.

    enter image description here

    GitHub Workflow File:

    name: Build and deploy Node.js app to Azure Web App - kareactwebapp
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - name: npm install, build
        run: |
          npm install
          npm run build --if-present
      - name: Zip artifact for deployment
        run: zip release.zip ./* -r
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: release.zip
  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write #This is required for requesting the JWT
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app
      - name: Unzip artifact for deployment
        run: unzip release.zip
      - name: Login to Azure
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_2E3A719386B34C329432070E0CBA706E }}
          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_4AB5B4332AA14B8DA4D29611B84DCC23 }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_3B6FC06574EB489CA89ADD342F031641 }}
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'kareactwebapp'
          slot-name: 'Production'
          package: .

    Azure Output:

    enter image description here