الملاحظات تحرير

4. Create a new Azure Static Web app

  • مقالة
  • قراءة خلال 5 دقائق

Create a Static Web app. This creation process deploys your GitHub repo to Azure. If you haven't finished pushing your React app to GitHub, complete that step before continuing.

Create Static Web app

Create the Static Web app with either the Azure CLI or the VS Code extension for Azure Static web apps.

In VS Code, find the Azure Explorer's Static Web App section, right-click on the + to create a new Static Web App. Use the following information to complete the prompts:

Prompt Setting
Enter a name for the new static web app. Enter a name that you can find and identify as yours, such as YOUR-ALIAS-staticwebapp-with-api where your replace YOUR-ALIAS with your email alias.
Choose a build preset to configure default project structure. Select React
Enter a location of your application code. Enter app because the app needs to be referenced from the root.
Enter a location of your build output relative to your app's location. Enter build. Do not preface this with a forward slash.

If this is your first Azure resource, you may be asked other questions such as resource group or location. Use naming conventions to create the resource group, such as YOUR-ALIAS-westus-rg then select the location you specified in the name.

Verify GitHub Action Build

  1. In a web browser, return to your GitHub repo and select the Actions area. The actions URL should look like:

    https://github.com/YOUR-ACCOUNT/staticwebapp-with-api/actions

  2. Select the workflow, then select the Build and Deploy job.

  3. Find the end of this job and make sure it was successful:

    Finished building app with Oryx
Zipping App Artifacts
Done Zipping App Artifacts
Either no Api directory was specified, or the specified directory was not found. Azure Functions will not be created.
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.0980254(s)
Status: Succeeded. Time: 15.1951385(s)
Deployment Complete :)
Visit your site at: https://random-name.azurestaticapps.net
Thanks for using Azure Static Web Apps!
Exiting

  4. Do not continue with the remaining steps of this article series until the Action builds and deploys successfully.

Troubleshooting GitHub Actions for Static Web apps

If your app didn't build successfully, there are usually a few top issues:

  • Your locations for your assets inside your project, app location of app and build output directory such as build, are not correct.
  • Your build environment doesn't match your local development environment and that difference is causing a problem.
  • Your project size, with dependencies, exceeds the size limitation quota for Static Web apps.
  • Other troubleshooting steps for Static Web apps.

View your deployed React app in a browser

  1. In VS Code, select the Azure Explorer.

  2. In the Azure Explorer, right-click your new Static Web app, then select Browse site.

    This opens a browser to your new app. It should appear exactly as your local version of the app.

Pull GitHub action file to your local environment

You need to pull down the remote action definition file before moving to the next article in the series.

  1. Pull your remote GitHub action file to your local environment:

    git pull origin main

  2. Review the .yml file in the local ./github/workflows directory:

    name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SAMPLE }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "app" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SAMPLE }}
          action: "close"

    Most of the file is generic to any Static Web app. The highlighted lines in the preceding source listing are specific to this app.

  3. If you need the Node.js version to stay the same, regardless of the ubuntu version, use the Oryx configuration, NODE_VERSION, to set that value. The .yml needs an environment variable, env, to pass that setting:

    name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SAMPLE }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "app" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
            NODE_VERSION: 14.17.1
  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SAMPLE }}
          action: "close"

Next steps