Question 236874 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – Unable to public Flutter App to Azure App Service – Github Actions

I have followed this tutorial for deploying a flutter app to Azure App Service, below is my current workflow, this is created automatically when configuring the deployment centre within the App Service:

name: Build and deploy Node.js app to Azure Web App - flutter-test

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'flutter-test'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_9F371C7309EE423496F3C77A4D2B4CAA }}
          package: .

The workflow runs successfully, yet when I navigate to my app service url I see:

enter image description here

Not what is shown in the tutorial, has anyone done this? I was expecting to see the default flutter starter project.

Tags:

2

Answers


  1. 0

    This could be because the application is not deployed properly, or any files must be missing.

    1. Check if all the files of application deployed to App Service:
    • Go to KUDU site(App Service=>Settings=>Advanced Tools=>Go), click on site wwwroot, check the deployed files:

    enter image description here

    enter image description here
    2. Check the logs:

    • Go to web app=>App Service Logs=>Enable application logging as shown below:

    enter image description here

    You can check the logs in Log Stream:

    enter image description here

    I cloned a GitHub repository of Flutter application by @hasnainmakada-99 and deployed to Azure web App Service without any issues.

    Steps followed:

    • Created a Linux web app service with Nodejs as run time stack.
    • Enable deployment while creating web app.
      In Deployment section=>click on Enable in GitHub actions and provide all the required details:

    -

    Workflow will be created automatically:

    My workflow:

    name: Building and deploying the Node.js application to Azure Web App - <web_app_name>

on:
 push:
   branches:
     - main
 workflow_dispatch:

jobs:
 build:
   runs-on: ubuntu-latest

   steps:
     - uses: actions/checkout@v2

     - name: Set up Node.js version
       uses: actions/setup-node@v1
       with:
         node-version: '18.x'

     - name: npm install, build, and test
       run: |
         npm install
         npm run build --if-present
         npm run test --if-present
     - name: Upload artifact for deployment job
       uses: actions/upload-artifact@v2
       with:
         name: node-app
         path: .

 deploy:
   runs-on: ubuntu-latest
   needs: build
   environment:
     name: 'Production'
     url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

   steps:
     - name: Download artifact from build job
       uses: actions/download-artifact@v2
       with:
         name: node-app

     - name: 'Deploy to Azure Web App'
       id: deploy-to-webapp
       uses: azure/webapps-deploy@v2
       with:
         app-name: '<web_app_name>'
         slot-name: 'Production'
         publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_XXXXXXXXXXX}}
         package: .

    Deployment status:

    enter image description here

    Click on the URL which is generated after deployment https://<web_app_name>.azurewebsites.net.

    Response:

    enter image description here

    Login or Signup to reply.
  2. 0

    It seems like you’re trying to deploy a Flutter app to Azure App Service using GitHub Actions, and you’re encountering an issue where the deployment is successful but the deployed app is not working as expected. Unfortunately, you haven’t provided the specific issue you’re facing on the deployed app, so I’ll provide some general troubleshooting steps that might help you identify and resolve the issue:

    1. Check Logs: Azure App Service provides logging functionality that can help you diagnose issues. You can check the logs to see if there are any error messages or stack traces that indicate what might be going wrong.

    2. Environment Configuration: Make sure that any environment variables or configuration settings required for your Flutter app to run are properly configured in your Azure App Service. This might include things like API keys, database connection strings, etc.

    3. Port Configuration: Ensure that you have configured the correct port for your Flutter app to listen on. By default, Flutter apps usually run on port 5000. You need to configure your Azure App Service to use the same port.

    4. Static Files: If your Flutter app generates static files as part of its build process, make sure that these files are being properly served by your Azure App Service.

    5. Node.js Version: In your GitHub Actions workflow, you are setting up Node.js version 18.x. However, Flutter apps don’t necessarily require Node.js 18, so this might be causing compatibility issues. Flutter web apps are usually built using the Flutter SDK, so you should ensure that the appropriate version of Flutter is being used in your build process.

    6. Publish Path: Double-check that the path to your built Flutter app is correctly configured. This is the path that needs to be specified in the package field of the azure/webapps-deploy action.

    7. Deployment Slots: You are using a deployment slot named "Production." Make sure that you are configuring your main app service and the slot with the necessary settings.

    8. App Service Plan: Verify that the Azure App Service Plan you are using has the necessary resources and configurations to support a Flutter app.

    9. Caching: Sometimes, caching can cause issues with deployment. Try clearing any cache that might be stored in your Azure App Service.

    10. Build Locally: To debug the issue, try building and running your Flutter app locally using the same configuration as the deployment. This might help you identify if the issue is with the deployment process or the app itself.

    11. Community and Support: You can also reach out to the Azure support community or GitHub Actions community for specific help on deployment issues.

    Remember that troubleshooting deployment issues can sometimes involve a process of elimination. It’s important to isolate the cause of the issue step by step and test different configurations to identify the root cause.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search