# Deploy to Azure with Blob Storage Learn how to deploy your customization to [Azure with Blob Storage](https://azure.microsoft.com/en-us/services/storage/blobs/). ## Prerequisites Before you get started, you need to have: - An [Azure](https://azure.microsoft.com/en-us/free/) account. - A Project - A Merchant Center account, or an [Identity account](https://docs.commercetools.com/docs/identity/overview.md) - A customization configured in the Merchant Center: - For Custom Applications, see [Managing Custom Applications](https://docs.commercetools.com/merchant-center/managing-custom-applications.md). - For Custom Views, see [Managing Custom Views](https://docs.commercetools.com/merchant-center/managing-custom-views.md). ## Configuration ### Add the customization identifier and URL Depending on the customization type, you'll need to specify either the Custom Application ID or the Custom View ID that was provided to you when you added the customization in the Merchant Center. You'll also need to specify the production URL from your Azure project. You can keep the standard Azure Blob Storage Static Website URL `https://.z13.web.core.windows.net/` or provide your custom domain. For Custom Applications, make the following changes to the [Custom Application config](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-application-config.md): - Add the Custom Application ID to [`env.production.applicationId`](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-application-config.md#envproductionapplicationid). - Add the production URL from your Azure project to [`env.production.url`](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-application-config.md#envproductionurl). ```json title="custom-application-config.json" { "env": { "production": { "applicationId": "ckvtahxl90097sys6har1e6n3", "url": "https://.z13.web.core.windows.net/" } } } ``` For Custom Views, make the following changes to the [Custom View config](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-view-config.md): - Add the Custom View ID to [`env.production.customViewId`](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-view-config.md#envproductioncustomviewid). - Add the production URL from your Azure project to [`env.production.url`](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-view-config.md#envproductionurl). ```js title="custom-view-config.mjs" const config = { env: { production: { customViewId: 'ckvtahxl90097sys6har1e6n3', url: 'https://.z13.web.core.windows.net/', }, }, // ... }; ``` ### Use environment variables To avoid hardcoding values (such as the customization identifier or the Project key), you can use variable placeholders in your [Custom Application config](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-application-config.md#use-variable-placeholders) or [Custom View config](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/custom-view-config.md#use-variable-placeholders). Example of environment variables with Custom Applications: ```json title="custom-application-config.json" highlightLines="4" { "env": { "production": { "applicationId": "${env:APPLICATION_ID}", "url": "https://.z13.web.core.windows.net/" } } } ``` Example of environment variables with Custom Views: ```js title="custom-view-config.mjs" highlightLines="4" { "env": { "production": { "customViewId": "${env:CUSTOM_VIEW_ID}", "url": "https://.z13.web.core.windows.net/" } } } ``` ## Connect Azure Blob Storage with GitHub Actions One of the ways to deploy to Azure is to use [Blob Storage](https://azure.microsoft.com/en-us/services/storage/blobs/). This service allows hosting a static website, but this needs to be enabled and configured in the storage account. Follow the steps in the [Azure Storage Account creator](https://portal.azure.com/#create/Microsoft.StorageAccount) to create a new storage account. ### Configure static website hosting Once the storage account is created, go to `Static website` section of the storage account and provide the following settings: - Static website: `enabled` - Index document name: `index.html` - Error document path: `index.html` ### Generate deployment credentials Follow [the Azure instruction](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blobs-static-site-github-actions?tabs=userlevel#generate-deployment-credentials) to generate deployment credentials. This step will result with the following JSON object as output in the command-line: ```bash { "clientId": "598...6fe", "clientSecret": "OfU...cmr", "subscriptionId": "c43...c21", "tenantId": "591...e24", ... } ``` ### Configure GitHub Action workflow In your repository [configure the GitHub secret](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blobs-static-site-github-actions?tabs=openid#configure-github-secrets) named `AZURE_CREDENTIALS` and paste the whole JSON object from the previous step as the secret value. As the next step, [add a GitHub Action workflow](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blobs-static-site-github-actions?tabs=userlevel#add-your-workflow). For the basic GitHub Action workflow you might want to use the following content in the `yaml` file or change it according to your needs: ```yaml name: Blob storage website CI on: push: branches: [main] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Install dependencies run: yarn install --immutable - name: Building run: yarn build - uses: azure/login@v1 with: creds: ${{ secrets.AZURE_CREDENTIALS }} - name: Upload to blob storage uses: azure/CLI@v1 with: inlineScript: | az storage blob delete-batch --account-name --auth-mode key -s '$web' # update with your az storage blob upload-batch --account-name --auth-mode key -d '$web' -s public/ # update with your - name: logout run: | az logout if: always() ``` If your customization config [requires environment variables](https://docs.commercetools.com/merchant-center-customizations/deployment/azure-blob-storage.md#use-environment-variables), make sure to provide them in the [GitHub Action workflow file](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration?tabs=github-actions#environment-variables). You can define the environment variables either as plain text or using [GitHub encrypted secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets). See example below for defining environment variables for the GitHub action:: ```yaml highlightLines="3-4" --- - name: Building env: APPLICATION_ID: ${{ secrets.APPLICATION_ID }} run: yarn build ``` ## Test your deployment Install your customization in the Merchant Center to access it within your Projects: - For Custom Applications, see [Managing Custom Applications](https://docs.commercetools.com/merchant-center/managing-custom-applications.md). You can also use [deployment previews](https://docs.commercetools.com/merchant-center-customizations/concepts/deployment-previews.md) to test the application before releasing it to the production environment. - For Custom Views, see [Managing Custom Views](https://docs.commercetools.com/merchant-center/managing-custom-views.md). ## Related pages - [Section overview page](https://docs.commercetools.com/merchant-center-customizations.md) - [Previous page: Deploy to Azure with Static Web Apps](https://docs.commercetools.com/merchant-center-customizations/deployment/azure-static-web-apps.md) - [Next page: Deploy to Surge](https://docs.commercetools.com/merchant-center-customizations/deployment/surge.md)