50 publish the project on az webapp dynamic app (#53)

* feature: create new pipeline to deploy application to azure.

* fix: package manager used.

* fix: update the nextjs files and remove old dependencies from static project.

* fix: remove condition that is skipping the deploy job.

* fix: correct  the package path

* fix: Updated the artifact upload to include the correct build output (dist) along with other necessary files

* fix: pnpm command

* fix: app name on pipeline and extend docs.

* fix: variables used on the pipeline.

* chore: Update readme.

* fix: files to start the server on az-web-app.

* fix: change the installation of packages to pnpm.

* fix: simplify and correct startup workflow for azure.

* chore: directory veerification for the pipeline.

* fix: verify installation of the packages before running the app.

* fix: use npm instead of pnpm, and create new pipeline to deploy the app as a container.

* chore: change login method for the pipe to admin one (temporarely)

Author: franciscosuca

.dockerignore

@@ -0,0 +1,26 @@
+node_modules
+npm-debug.log
+dist
+.next
+.git
+.gitignore
+Dockerfile
+docker-compose.yml
+*.md
+*.log
+test/
+coverage/
+.env
+.vscode
+.idea
+
+# Ignore OS files
+.DS_Store
+Thumbs.db
+
+# Ignore build artifacts
+build
+
+# Ignore package manager files
+pnpm-lock.yaml
+yarn.lock

.github/workflows/azure-webapp-container.yml

@@ -0,0 +1,49 @@
+name: Build and Deploy to Azure Container App
+
+on:
+  push:
+    branches: [ "main" ]
+  workflow_dispatch:
+
+env:
+  REGISTRY: ${{ secrets.AZURE_CONTAINER_REGISTRY }}
+  IMAGE_NAME: onlinecv-app
+  CONTAINER_APP_NAME: ${{ secrets.AZURE_CONTAINER_APP_NAME }}
+  RESOURCE_GROUP: ${{ secrets.AZURE_RESOURCE_GROUP }}
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Log in to Azure Container Registry
+        uses: azure/docker-login@v1
+        with:
+          login-server: ${{ env.REGISTRY }}
+          username: ${{ secrets.AZURE_CONTAINER_REGISTRY_USERNAME }}
+          password: ${{ secrets.AZURE_CONTAINER_REGISTRY_PASSWORD }}
+
+      - name: Build and push Docker image
+        run: |
+          docker build -t $REGISTRY/$IMAGE_NAME:${{ github.sha }} .
+          docker push $REGISTRY/$IMAGE_NAME:${{ github.sha }}
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build-and-push
+    steps:
+      - name: Azure Login
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
+      - name: Deploy to Azure Container App
+        run: |
+          az containerapp update \
+            --name $CONTAINER_APP_NAME \
+            --resource-group $RESOURCE_GROUP \
+            --image $REGISTRY/$IMAGE_NAME:${{ github.sha }} \
+            --set-env-vars COSMOS_ENDPOINT=${{ secrets.COSMOS_ENDPOINT }} COSMOS_KEY=${{ secrets.COSMOS_KEY }} COSMOS_DATABASE=${{ secrets.COSMOS_DATABASE }} COSMOS_CONTAINER=${{ secrets.COSMOS_CONTAINER }}

.github/workflows/azure-webapp.yml

@@ -13,18 +13,16 @@
 # For more information on the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
 # For more samples to get started with GitHub Action workflows to deploy to Azure: https://github.com/Azure/actions-workflow-samples
 
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    types: [closed]
-    branches: [ "main" ]
-  workflow_dispatch:
+# Workflow is deactivated - uncomment the lines below to reactivate
+# on:
+#   push:
+#     branches: [ "main", "50-publish-the-project-on-az-webapp-dynamic-app" ]
+#   workflow_dispatch:
 
 env:
-  AZURE_WEBAPP_NAME: your-actual-webapp-name    # ⚠️ UPDATE THIS
-  AZURE_WEBAPP_PACKAGE_PATH: './dist'
-  NODE_VERSION: '20.x'
+  AZURE_WEBAPP_NAME: ${{ vars.AZURE_WEBAPP_NAME }}
+  AZURE_WEBAPP_PACKAGE_PATH: '.'
+  NODE_VERSION: ${{ vars.NODE_VERSION }}
 
 permissions:
   id-token: write
@@ -36,15 +34,17 @@ jobs:
     steps:
     - uses: actions/checkout@v4
 
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 8
+
     - name: Set up Node.js
       uses: actions/setup-node@v4
       with:
         node-version: ${{ env.NODE_VERSION }}
         cache: 'pnpm'
 
-    - name: Install pnpm
-      run: npm install -g pnpm
-
     - name: Install dependencies and build
       run: |
         pnpm install
@@ -55,11 +55,31 @@ jobs:
         COSMOS_DATABASE: ${{ secrets.COSMOS_DATABASE }}
         COSMOS_CONTAINER: ${{ secrets.COSMOS_CONTAINER }}
 
+    - name: Create deployment package
+      run: |
+        # Create a deployment directory
+        mkdir -p deployment
+        # Copy essential files for Azure Web App
+        cp package.json deployment/
+        cp next.config.js deployment/
+        cp pnpm-lock.yaml deployment/
+        cp server.js deployment/
+        # Copy build output (check for both .next and dist directories)
+        if [ -d ".next" ]; then cp -r .next deployment/; fi
+        if [ -d "dist" ]; then cp -r dist deployment/; fi
+        cp -r public deployment/
+        cp -r app deployment/
+        # Create a startup script that installs dependencies and starts the app
+        echo '#!/bin/bash' > deployment/startup.sh
+        echo 'npm install --production' >> deployment/startup.sh
+        echo 'npm start' >> deployment/startup.sh
+        chmod +x deployment/startup.sh
+
     - name: Upload artifact for deployment job
       uses: actions/upload-artifact@v4
       with:
         name: node-app
-        path: ./dist
+        path: deployment
 
   deploy:
     permissions:
@@ -70,7 +90,7 @@ jobs:
     environment:
       name: 'production'
       url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
-    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
+    if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
 
     steps:
     - name: Download artifact from build job

.github/workflows/readme.md

@@ -46,6 +46,11 @@ az ad sp create --id <APP_ID>
 
 ## Step 3: Create Federated Credentials
 
+Check if the application has already some federated-credentials created:
+```bash
+az ad app federated-credential list --id <APP_ID>
+```
+
 Replace the following values with your actual information:
 
 - `<APP_ID>`: Application ID from Step 1
@@ -55,14 +60,28 @@ Replace the following values with your actual information:
 az ad app federated-credential create \
   --id <APP_ID> \
   --parameters '{
-    "name": "GitHub-Actions-Main",
+    "name": "GitHub-Actions-OnlineCV",
     "issuer": "https://token.actions.githubusercontent.com",
-    "subject": "repo:your-github-username/onlineCv:ref:refs/heads/main",
+    "subject": "repo:franciscosuca/onlineCv:environment:production",
     "description": "GitHub Actions deployment from main branch",
     "audiences": ["api://AzureADTokenExchange"]
   }'
 ```
 
+## Verifying Federated Credentials in Azure Portal
+
+To verify your federated credentials were created successfully:
+
+1. **Navigate to Azure Portal** - Go to [portal.azure.com](https://portal.azure.com)
+2. **Access Microsoft Entra ID** - Navigate to Microsoft Entra ID (formerly Azure Active Directory)
+3. **Find App Registrations** - Go to **App registrations**
+4. **Locate Your App** - Find your app "GitHub-Actions-OnlineCV" (App ID: `<APP_ID>)
+5. **View Credentials** - Click on **Certificates & secrets**
+6. **Check Federated Credentials** - Click on the **Federated credentials** tab
+
+You should see your "GitHub-Actions-OnlineCV" federated credential listed here.
+
+
 ## Step 4: Assign Azure Permissions
 
 ### Option A: Resource Group Level Permissions (Recommended)
@@ -110,6 +129,20 @@ In your GitHub repository:
 | `AZURE_TENANT_ID` | Tenant ID from Step 1 | Azure tenant identifier |
 | `AZURE_SUBSCRIPTION_ID` | Subscription ID from Step 1 | Azure subscription identifier |
 
-## Step 6: Update Workflow Configuration
-
-Update the `AZURE_WEBAPP_NAME` environment variable in your GitHub Actions workflow file with your actual Azure Web App name.
+## Step 6: Create app-service-plan and  web-application in Azure (if not created yet)
+
+````bash
+az appservice plan create \
+  --name <Plan_name> \
+  --resource-group <yourResourceGroup> \
+  --sku B1 \
+  --is-linux
+````
+
+````bash
+az webapp create \
+  --name <APP_NAME> \
+  --resource-group <yourResourceGroup> \
+  --plan <your_Plan> \
+  --runtime "NODE:20-lts"
+````

Dockerfile

@@ -0,0 +1,36 @@
+# Use official Node.js LTS image
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package.json package-lock.json ./
+RUN npm install --legacy-peer-deps
+
+# Copy the rest of the app source
+COPY . .
+
+# Build the Next.js app
+RUN npm run build
+
+# Production image
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Copy only necessary files from builder
+COPY --from=builder /app/package.json ./
+COPY --from=builder /app/package-lock.json ./
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/app ./app
+COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/server.js ./
+
+RUN npm ci --only=production --legacy-peer-deps
+
+# Expose port (change if your app uses a different port)
+EXPOSE 8080
+
+# Start the app
+CMD ["node", "server.js"]

app/config.ts

@@ -0,0 +1 @@
+export const baseUrl = "https://portfolio-blog-starter.vercel.app";

app/layout.tsx

@@ -6,8 +6,7 @@ import { Navbar } from './components/nav'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 import Footer from './components/footer'
-
-export const baseUrl = "https://portfolio-blog-starter.vercel.app";
+import { baseUrl } from './config'
 
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),

app/utils/cosmosDB.ts

@@ -1,20 +1,27 @@
 import { CosmosClient, Database, Container } from '@azure/cosmos';
 
-if (!process.env.COSMOS_ENDPOINT || !process.env.COSMOS_KEY) {
-  throw new Error('Missing required environment variables for Cosmos DB');
-}
+// Check if we're in build mode or runtime mode
+const isBuildTime = process.env.NODE_ENV === undefined || process.env.NEXT_PHASE === 'phase-production-build';
 
-const client = new CosmosClient({
-  endpoint: process.env.COSMOS_ENDPOINT,
-  key: process.env.COSMOS_KEY,
-});
+// Initialize client only if not in build time and env vars are available
+let client: CosmosClient | null = null;
+if (!isBuildTime && process.env.COSMOS_ENDPOINT && process.env.COSMOS_KEY) {
+  client = new CosmosClient({
+    endpoint: process.env.COSMOS_ENDPOINT,
+    key: process.env.COSMOS_KEY,
+  });
+}
 
 const databaseId = process.env.COSMOS_DATABASE || 'onlineCv';
 const containerId = process.env.COSMOS_CONTAINER || 'experience';
 let databaseInstance: Database | null = null;
 let containerInstance: Container | null = null;
 
 async function initializeCosmosDB() {
+  if (!client) {
+    throw new Error('Cosmos DB client not initialized. Missing environment variables.');
+  }
+  
   if (!databaseInstance || !containerInstance) {
     try {
       databaseInstance = client.database(databaseId);
@@ -27,6 +34,10 @@ async function initializeCosmosDB() {
 }
 
 export async function getItem<T>(id: string, partitionKey: string): Promise<T | null> {
+  if (!client) {
+    return null; // Return null during build time
+  }
+  
   const { container } = await initializeCosmosDB();
   try {
     const { resource } = await container.item(id, partitionKey).read();
@@ -40,6 +51,10 @@ export async function getItem<T>(id: string, partitionKey: string): Promise<T |
 }
 
 export async function queryItems<T>(partitionKey: string): Promise<T[]> {
+  if (!client) {
+    return []; // Return empty array during build time
+  }
+  
   const { container } = await initializeCosmosDB();
   const { resources } = await container.items
     .query("SELECT * FROM c", {