OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to create preview deployment instance for each pull request ( Preview Mode ) in Azure for NextJS application?

  • Thread starter Thread starter Ala Eddine Menai
  • Start date Start date
A

Ala Eddine Menai

Guest
We deployed NextJS application with Docker on Azure and we have 3 branches:

  1. Dev : for development
  2. Staging: for pre-production
  3. Main: for production

For each new feature we create a branch feature and we push changes. However, we want the stakeholders to see the live changes for this feature before merging it to dev branch.

In Vercel and Github, this feature is available :

enter image description here

enter image description here

This is our pipeline when we merge a pull request to dev branch:

Code:
trigger:
  - dev

variables:
  dockerRegistryServiceConnection: "xxx"
  imageRepository: "xxx"
  containerRegistry: "xxx"
  dockerfilePath: "$(Build.SourcesDirectory)/Dockerfile.prod"
  tag: "$(Build.BuildId)"
  vmImageName: "ubuntu-latest"

pool:
  vmImage: ubuntu-latest

stages:
  - stage: Install
    displayName: "Install"
    jobs:
      - job: InstallJob
        displayName: "Install Node.js and Dependencies"
        steps:
          - task: NodeTool@0
            inputs:
              versionSpec: "20.x"
            displayName: "Install Node.js"
          - script: |
              npm install
            displayName: "Install Node.js and Dependencies"

  - stage: UnitComponentTests
    displayName: "Run Unit and Component Tests"
    jobs:
      - job: UnitComponnentTestsJob
        displayName: "Run Unit  and Component Tests"
        steps:
          - script: |
              npm install
              npm run test
            displayName: "Run Unit and Component Tests"

  - stage: E2ETests
    displayName: "Run E2E Tests"
    jobs:
      - job: E2ETestsJob
        displayName: "Run E2E Tests"
        steps:
          - script: |
              npm install
              npx playwright install
              npm run test-e2e
            displayName: "Run E2E Tests"

  - stage: Build
    displayName: Build
    jobs:
      - job: Build
        displayName: Build
        pool:
          vmImage: $(vmImageName)
        steps:
          - task: Docker@2
            displayName: Build and push an image to container registry
            inputs:
              command: buildAndPush
              repository: $(imageRepository)
              dockerfile: $(dockerfilePath)
              buildContext: "./"
              containerRegistry: $(dockerRegistryServiceConnection)
              tags: |
                $(tag)
                latest

I want to have the same file that run for each pull request. After we merge the pull request, the deployment instance should be deleted.
<p>We deployed NextJS application with Docker on Azure and we have 3 branches:</p>
<ol>
<li>Dev : for development</li>
<li>Staging: for pre-production</li>
<li>Main: for production</li>
</ol>
<p>For each new feature we create a branch <code>feature</code> and we push changes. However, we want the stakeholders to see the live changes for this feature before merging it to <code>dev</code> branch.</p>
<p>In <a href="https://vercel.com/" rel="nofollow noreferrer">Vercel</a> and Github, this feature is available :</p>
<p><a href="https://i.sstatic.net/WxOAT8Vw.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WxOAT8Vw.png" alt="enter image description here" /></a></p>
<p><a href="https://i.sstatic.net/BKO4alzu.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/BKO4alzu.png" alt="enter image description here" /></a></p>
<p>This is our pipeline when we merge a pull request to dev branch:</p>
<pre><code>trigger:
- dev

variables:
dockerRegistryServiceConnection: "xxx"
imageRepository: "xxx"
containerRegistry: "xxx"
dockerfilePath: "$(Build.SourcesDirectory)/Dockerfile.prod"
tag: "$(Build.BuildId)"
vmImageName: "ubuntu-latest"

pool:
vmImage: ubuntu-latest

stages:
- stage: Install
displayName: "Install"
jobs:
- job: InstallJob
displayName: "Install Node.js and Dependencies"
steps:
- task: NodeTool@0
inputs:
versionSpec: "20.x"
displayName: "Install Node.js"
- script: |
npm install
displayName: "Install Node.js and Dependencies"

- stage: UnitComponentTests
displayName: "Run Unit and Component Tests"
jobs:
- job: UnitComponnentTestsJob
displayName: "Run Unit and Component Tests"
steps:
- script: |
npm install
npm run test
displayName: "Run Unit and Component Tests"

- stage: E2ETests
displayName: "Run E2E Tests"
jobs:
- job: E2ETestsJob
displayName: "Run E2E Tests"
steps:
- script: |
npm install
npx playwright install
npm run test-e2e
displayName: "Run E2E Tests"

- stage: Build
displayName: Build
jobs:
- job: Build
displayName: Build
pool:
vmImage: $(vmImageName)
steps:
- task: Docker@2
displayName: Build and push an image to container registry
inputs:
command: buildAndPush
repository: $(imageRepository)
dockerfile: $(dockerfilePath)
buildContext: "./"
containerRegistry: $(dockerRegistryServiceConnection)
tags: |
$(tag)
latest

</code></pre>
<p>I want to have the same file that run for each pull request. After we merge the pull request, the deployment instance should be deleted.</p>
Continue reading...
 

Latest posts

I
Replies
0
Views
1
Isaac P. Liu
I
U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top