Alıştırma - Web uygulamanızı yayımlama ve GitHub Eylemi ile dağıtma

  • 10 dakika

Artık uygulamanızı Azure’da yayımlamaya hazırsınız. Web uygulamanızı barındırmak için korumalı alanın Windows örneğini kullanın. Azure'ın Visual Studio Code uzantısını kullanmak bu işlemi kolaylaştırmaya yardımcı olur.

Azure’da web uygulaması oluşturma

Artık uygulamamızı Azure’da çalıştırmanın zamanı geldi. Bir Azure App Service uygulaması oluşturmalı ve kodunuzu dağıtmalısınız.

App Service planını ve uygulamasını oluşturma

App Service uygulaması oluşturmak iki adımlı bir işlemdir: Önce planı oluşturun, ardından uygulamayı oluşturun.

Plan adının yalnızca aboneliğinizde benzersiz olması gerekir, bu nedenle bizim kullandığımız adı kullanabilirsiniz: pwa-exercise-plan. Uygulama adı genel olarak benzersiz olmalıdır. Bu nedenle kendi uygulama adınızı seçmeniz gerekir.

Azure Cloud Shell'de aşağıdaki komutu çalıştırarak bir App Service planı oluşturun.

az appservice plan create \
    --name pwa-exercise-plan \
    --sku FREE \
    --location centralus \
    --resource-group [your resource group]

Ardından, yeni oluşturduğunuz App Service planını kullanan Web Uygulamasını oluşturmak için aşağıdaki komutu çalıştırın.

az webapp create \
    --plan pwa-exercise-plan \
    --runtime "node|10.6" \
    --resource-group [your resource group] \
    --name <your-unique-app-name>

Uygulamanızı dağıtmak için GitHub Eylemi oluşturma

Artık uygulamanızı her yeni kod gönderdiğinizde oluşturmak ve kodu Azure'da oluşturduğunuz web uygulamasına bağlamak için bir GitHub Eylemi oluşturmanız gerekir. Bu işlemin iki adımı vardır.

  1. İlk olarak uygulamanızın kökünde .github/workflows adlı iç içe iki klasör oluşturun. workflow klasörüne deploy.yml adlı bir dosya ekleyin. Bu dosya, GitHub eylemleri tarafından GitHub'a işlendikten sonra otomatik olarak iş akışı olarak alınır. Aşağıdaki kodu deploy.yml içine ekleyin.

    on:
    push:
        branches:
            - master

env:
    AZURE_WEBAPP_NAME: 'trickyimages' # set this to your application's name
    AZURE_WEBAPP_PACKAGE_PATH: 'dist' # set this to the path to your web app project, for Vue.js it's dist
    NODE_VERSION: '10.x' # set this to the node version to use

jobs:
    build-and-deploy:
        name: Build and Deploy
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - name: Use Node.js ${{ env.NODE_VERSION }}
              uses: actions/setup-node@v1
              with:
                  node-version: ${{ env.NODE_VERSION }}
            - name: npm install, build, and test
              run: |
                  # Build and test the project, then
                  # deploy to Azure Web App.
                  npm install
                  npm run build --if-present
                  npm run test --if-present
            - name: 'Deploy to Azure WebApp'
              uses: azure/webapps-deploy@v1
              with:
                  app-name: ${{ env.AZURE_WEBAPP_NAME }}
                  publish-profile: ${{ secrets.PORTAL_PUBLISH_PROFILE }}
                  package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

  2. Bu dosyayı düzenleyerek uygulamanın adını Azure’da web uygulamanıza verdiğiniz ada ayarlayın.

Anahtarları kullanarak uygulamanızı GitHub’a bağlama

Azure ile GitHub arasında bir el sıkışma oluşturmak için yeni bir gizli anahtar oluşturacaksınız.

Web uygulamanızın barındırıldığı Azure portalına gidin. Dosya indirmek için Yayımlama Profili Al'ı seçin.

your profile.

GitHub deponuzda Ayarlar > Gizli Diziler'e gidin. Bu dosyanın içeriğini kopyalayıp PORTAL_PUBLISH_PROFILE adlı yeni bir Gizli Diziye yapıştırın ve kaydedin.

Şimdi deponuza yeni kod gönderdiğinizde GitHub eyleminiz yeni kod tabanını derler, yayımlar ve web uygulamanız yenilenir.

Publishing changes.

Değişikliklerin otomatik olarak gerçekleşmesini gözlemlemek için bunu yeni bir modelle deneyin.