How to Deploy from github to Azure App Service

Question

I'm trying to deploy a basic angular 9 application to azure app services.

What I've done so far.

• I've Create a web app instance

• Then I went to deployment center as the start up website suggested and hooked up my github repository via Deployment Center

• It added this workflow yml file to my repository I did comment out the npm run test becuase it is the default app for angular no need to waste time running the app

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

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

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master

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

    - name: npm install, build, and test
      run: |
        npm install
        npm run build -prod --if-present
        # npm run test --if-present
    - name: 'Deploy to Azure Web App'
      uses: azure/webapps-deploy@v1
      with:
        app-name: 'someapp'
        slot-name: 'production'
        publish-profile: ${{ secrets.AzureAppService_PublishProfile}}
        package: .

• after running the pipeline, it gives a Application error with a 503 error code on the initial get.

I've tried ssh into the server to look at the file structure, but either i can't log in or if i do log in it kicks me off after a few seconds.

Does anyone know if i missed some step that is needed to deploy to azure or file structure thing I need to do? I've tried searching around for more up to date tutorials or questions but most seem pretty dated.

Answer 1

App services is the wrong service for static websites. I came across these docs that help me setup the website pretty quick. as Sajeetharan suggested you would have to use a devops pipeline to get the same effect as the deplyment center in app services for deployment.

1. Create a "Storage Account" and go to STatic website, and enable Static website

2. Create a Project in Azure Devops the click on pipelines and create a new one. On the configure setp select Node.js with Angular. I linked mine with a github repository. This will add an azure pipeline yml to whatever deployment branch you selected.

You will need to produce an artifact, so you will need to add an extra task to your yml. e.g.

- task: PublishBuildArtifacts@1
  inputs:
    pathToPublish: dist/Nebulous
    artifactName: drop

Your complete yml should look like this

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

- task: PublishBuildArtifacts@1
  inputs:
    pathToPublish: dist/Nebulous
    artifactName: drop

useful link about adding artifact

After this we are ready to push our artifact to our storage account

Go to Releases from azure Devops

3. Under the artifacts card click add, and add the Pipline that we just created to this. If you want continuous deployments click the lighting bolt at the corner and enable that.

4. Now Click the link under stage 1 that says "1 job, 0 task" then click The plus on the Agent job line to add a new task. Search for AzureBlob File copy.

Source: select your pipelines you made and navigate that to your artifact folder you mane in prior steps

destination type is Azure Blob

Select the storage account name you created earlier

Container name = $web

Now you can manually kick off or push into your branch and it will deploy to azure.

https://learn.microsoft.com/en-us/azure/javascript/tutorial-vscode-static-website-node-01?tabs=bash