|
| 1 | +--- |
| 2 | +title: Deploying to Azure App Service Service |
| 3 | +intro: You can deploy to Azure App Service as part of your continuous deployment (CD) workflows. |
| 4 | +product: '{% data reusables.gated-features.actions %}' |
| 5 | +versions: |
| 6 | + free-pro-team: '*' |
| 7 | + enterprise-server: '>=2.22' |
| 8 | +--- |
| 9 | + |
| 10 | +{% data reusables.actions.enterprise-beta %} |
| 11 | +{% data reusables.actions.enterprise-github-hosted-runners %} |
| 12 | + |
| 13 | +### Introduction |
| 14 | +[Azure App Service](https://azure.microsoft.com/en-us/services/app-service/) is a Platform-as-a-Service (PaaS) offering from Microsoft, a “fully managed platform for building, deploying and scaling your web apps”. It is a great way to run web apps in several languages including JavaScript, which will be shown here. |
| 15 | + |
| 16 | +This guide assumes you are in the directory of an existing [Node.js](https://nodejs.org/en/) project. |
| 17 | + |
| 18 | +### Prerequisites |
| 19 | +To adopt this workflow, you will first need to complete the following setup steps: |
| 20 | + |
| 21 | +#### Create an App Service plan |
| 22 | +For example, after [authenticating](https://docs.microsoft.com/en-us/cli/azure/authenticate-azure-cli) with `az`, the [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/): |
| 23 | + |
| 24 | +{% raw %} |
| 25 | +```bash{:copy} |
| 26 | +az appservice plan create \ |
| 27 | + --resource-group $AZ_RESOURCE_GROUP \ |
| 28 | + --name $AZ_APP_SERVICE_PLAN \ |
| 29 | + --is-linux |
| 30 | +``` |
| 31 | +{% endraw %} |
| 32 | + |
| 33 | +where `$AZ_RESOURCE_GROUP` is a pre-existing Azure Resource Group and `$AZ_APP_SERVICE_PLAN` is a name of your choosing. If you need to set up a new Resource Group, follow [these instructions](https://docs.microsoft.com/en-us/cli/azure/group?view=azure-cli-latest#az_group_create). |
| 34 | + |
| 35 | +#### Create a Web App |
| 36 | +Create an [App Service Web App](https://azure.microsoft.com/en-us/services/app-service/web/) with a [node runtime](https://docs.microsoft.com/en-us/cli/azure/webapp?view=azure-cli-latest#az_webapp_list_runtimes), for example, using the Azure CLI: |
| 37 | + |
| 38 | +{% raw %} |
| 39 | +```bash{:copy} |
| 40 | +az webapp create \ |
| 41 | + --name $AZURE_WEBAPP_NAME \ |
| 42 | + --plan $AZ_APP_SERVICE_PLAN \ |
| 43 | + --resource-group $AZ_RESOURCE_GROUP \ |
| 44 | + --runtime "node|10.14" |
| 45 | +``` |
| 46 | +{% endraw %} |
| 47 | + |
| 48 | +where `$AZURE_WEBAPP_NAME` is a webapp name of your choosing. |
| 49 | + |
| 50 | +#### Configure publish profile and store as `AZURE_WEBAPP_PUBLISH_PROFILE` secret |
| 51 | +Next, we will generate Azure deployment credentials via a publish profile using [these instructions](https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials), adding them as a [GitHub repository secret](https://docs.github.com/en/free-pro-team@latest/actions/reference/encrypted-secrets) named `AZURE_WEBAPP_PUBLISH_PROFILE`. |
| 52 | + |
| 53 | +### Workflow |
| 54 | +Now that the prerequisite steps are done, consider the following workflow, which will build, test, and deploy the Node.js project to Azure App Service. |
| 55 | + |
| 56 | +{% raw %} |
| 57 | +```bash{:copy} |
| 58 | +on: |
| 59 | + release: |
| 60 | + types: [created] |
| 61 | +
|
| 62 | +env: |
| 63 | + AZURE_WEBAPP_NAME: your-app-name # set this to your application's name |
| 64 | + AZURE_WEBAPP_PACKAGE_PATH: '.' # set this to the path to your web app project, defaults to the repository root |
| 65 | + NODE_VERSION: '10.x' # set this to the node version to use |
| 66 | +
|
| 67 | +jobs: |
| 68 | + build-and-deploy: |
| 69 | + name: Build and Deploy |
| 70 | + runs-on: ubuntu-latest |
| 71 | + steps: |
| 72 | + - uses: actions/checkout@v2 |
| 73 | +
|
| 74 | + - name: Use Node.js ${{ env.NODE_VERSION }} |
| 75 | + uses: actions/setup-node@v1 |
| 76 | + with: |
| 77 | + node-version: ${{ env.NODE_VERSION }} |
| 78 | +
|
| 79 | + - name: npm install, build, and test |
| 80 | + run: | |
| 81 | + # Build and test the project, then |
| 82 | + # deploy to Azure Web App. |
| 83 | + npm install |
| 84 | + npm run build --if-present |
| 85 | + npm run test --if-present |
| 86 | +
|
| 87 | + - name: 'Deploy to Azure WebApp' |
| 88 | + uses: azure/webapps-deploy@v2 |
| 89 | + with: |
| 90 | + app-name: ${{ env.AZURE_WEBAPP_NAME }} |
| 91 | + publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} |
| 92 | + package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }} |
| 93 | +``` |
| 94 | +{% endraw %} |
| 95 | + |
| 96 | +### Additional resources |
| 97 | +The following additional resources may also be of use: |
| 98 | + |
| 99 | +1. [Azure App Service starter workflow](https://github.com/actions/starter-workflows/blob/master/ci/azure.yml) for the full starter workflow |
| 100 | +1. [`Azure/webapps-deploy`](https://github.com/Azure/webapps-deploy), the Azure action used |
| 101 | +1. [App Service quickstart -- Node.js](https://docs.microsoft.com/en-us/azure/app-service/quickstart-nodejs) for a quickstart using the [VSCode Azure App Service extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice) |
0 commit comments