Skip to content

Commit 63f2a76

Browse files
franciscosucafranciscosuca
authored
50 publish the project on az webapp dynamic app (#54)
* 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) * chore: code refactory * fix: styles and paging for the container running. * fix: dynamic pages that were not loading on production version. * chore: clean unncesary code for debugging. * chore: update documentation and create project image for different platforms. * fix: change the vars * fix: clean pipeline trigger condition.
1 parent 86d3da8 commit 63f2a76

File tree

18 files changed

+364
-177
lines changed

18 files changed

+364
-177
lines changed

‎.env.local.example‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
# Only use NEXT_PUBLIC_ for values that are safe to expose to the browser. For sensitive data that should only be available server-side
2-
NEXT_PUBLIC_IFRAMELY_API_KEY=
1+
COSMOS_CONNECTION_STRING="<your-connection-string>"
2+
COSMOS_DATABASE="<your-database-name>"
3+
COSMOS_CONTAINER="<your-container-name>"

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@ name: Build and Deploy to Azure Container App
22

33
on:
44
push:
5-
branches: [ "main" ]
5+
branches: [ "main"]
66
workflow_dispatch:
77

8+
permissions:
9+
id-token: write
10+
contents: read
11+
812
env:
913
REGISTRY: ${{ secrets.AZURE_CONTAINER_REGISTRY }}
1014
IMAGE_NAME: onlinecv-app
11-
CONTAINER_APP_NAME: ${{ secrets.AZURE_CONTAINER_APP_NAME }}
15+
CONTAINER_APP_NAME: ${{ vars.AZURE_CONTAINER_APP_NAME }}
1216
RESOURCE_GROUP: ${{ secrets.AZURE_RESOURCE_GROUP }}
1317

1418
jobs:
@@ -24,10 +28,17 @@ jobs:
2428
username: ${{ secrets.AZURE_CONTAINER_REGISTRY_USERNAME }}
2529
password: ${{ secrets.AZURE_CONTAINER_REGISTRY_PASSWORD }}
2630

27-
- name: Build and push Docker image
31+
- name: Set up Docker Buildx
32+
uses: docker/setup-buildx-action@v3
33+
34+
- name: Build and push multi-platform Docker image
2835
run: |
29-
docker build -t $REGISTRY/$IMAGE_NAME:${{ github.sha }} .
30-
docker push $REGISTRY/$IMAGE_NAME:${{ github.sha }}
36+
docker buildx build \
37+
--platform linux/amd64,linux/arm64 \
38+
--tag $REGISTRY/$IMAGE_NAME:${{ github.sha }} \
39+
--tag $REGISTRY/$IMAGE_NAME:latest \
40+
--push \
41+
.
3142
3243
deploy:
3344
runs-on: ubuntu-latest
@@ -46,4 +57,4 @@ jobs:
4657
--name $CONTAINER_APP_NAME \
4758
--resource-group $RESOURCE_GROUP \
4859
--image $REGISTRY/$IMAGE_NAME:${{ github.sha }} \
49-
--set-env-vars COSMOS_ENDPOINT=${{ secrets.COSMOS_ENDPOINT }} COSMOS_KEY=${{ secrets.COSMOS_KEY }} COSMOS_DATABASE=${{ secrets.COSMOS_DATABASE }} COSMOS_CONTAINER=${{ secrets.COSMOS_CONTAINER }}
60+
--set-env-vars COSMOS_CONNECTION_STRING=${{ secrets.COSMOS_CONNECTION_STRING }} COSMOS_DATABASE=${{ secrets.COSMOS_DATABASE }} COSMOS_CONTAINER=${{ secrets.COSMOS_CONTAINER }}

‎.github/workflows/docker.yml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: Build and Push Multi-arch Docker Image
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- name: Checkout
14+
uses: actions/checkout@v4
15+
16+
- name: Set up Docker Buildx
17+
uses: docker/setup-buildx-action@v3
18+
19+
- name: Login to Azure Container Registry
20+
uses: docker/login-action@v3
21+
with:
22+
registry: ${{ secrets.ACR_REGISTRY }}
23+
username: ${{ secrets.ACR_USERNAME }}
24+
password: ${{ secrets.ACR_PASSWORD }}
25+
26+
- name: Build and push
27+
uses: docker/build-push-action@v5
28+
with:
29+
context: .
30+
platforms: linux/amd64,linux/arm64
31+
push: true
32+
tags: |
33+
${{ secrets.ACR_REGISTRY }}/online-cv:latest
34+
${{ secrets.ACR_REGISTRY }}/online-cv:${{ github.sha }}

‎.github/workflows/nextjs-static.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
name: Deploy Next.js site to Pages
22

33
on:
4-
push:
5-
branches:
6-
- main
4+
# push:
5+
# branches:
6+
# - main
77
workflow_dispatch: # Allows you to run this workflow manually from the Actions tab
88

99
permissions:

‎Dockerfile‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
# Use official Node.js LTS image
2-
FROM node:20-alpine AS builder
1+
# Use official Node.js LTS image with multi-arch support
2+
FROM --platform=$BUILDPLATFORM node:20-alpine AS builder
3+
4+
# Build arguments for cross-compilation
5+
ARG TARGETPLATFORM
6+
ARG BUILDPLATFORM
37

48
WORKDIR /app
59

@@ -16,21 +20,26 @@ RUN npm run build
1620
# Production image
1721
FROM node:20-alpine AS runner
1822

23+
# Install ca-certificates for SSL/TLS connections
24+
RUN apk add --no-cache ca-certificates
25+
1926
WORKDIR /app
2027

2128
# Copy only necessary files from builder
2229
COPY --from=builder /app/package.json ./
2330
COPY --from=builder /app/package-lock.json ./
24-
COPY --from=builder /app/dist ./dist
31+
COPY --from=builder /app/dist/standalone ./
32+
COPY --from=builder /app/dist/static ./dist/static
2533
COPY --from=builder /app/public ./public
26-
COPY --from=builder /app/app ./app
27-
COPY --from=builder /app/next.config.js ./
28-
COPY --from=builder /app/server.js ./
2934

30-
RUN npm ci --only=production --legacy-peer-deps
35+
# Set NODE_ENV to production
36+
ENV NODE_ENV=production
37+
38+
# Set the port that the app will listen on
39+
ENV PORT=8080
3140

32-
# Expose port (change if your app uses a different port)
41+
# Expose port
3342
EXPOSE 8080
3443

35-
# Start the app
44+
# Start the app using the Next.js standalone server
3645
CMD ["node", "server.js"]

‎Docs/CONTENT_MANAGEMENT.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Content Generation - Cosmos DB Version
2+
3+
## How to add data for the projects/volunteering/workExperience pages
4+
5+
### Overview
6+
7+
Content is now managed through **Azure Cosmos DB**. Each item is stored as a JSON document in the Cosmos DB container.
8+
9+
### Required JSON Document Format
10+
11+
Each document in Cosmos DB must follow this structure:
12+
13+
```json
14+
{
15+
"id": "unique-identifier",
16+
"type": "workexperience|project|volunteering",
17+
"sdate": "MM.YYYY",
18+
"edate": "MM.YYYY|Present",
19+
"company": "Company/Organization Name",
20+
"location": "City, Country",
21+
"title": "Position/Project Title",
22+
"summary": "Description of the role/project",
23+
"skills": "Comma-separated skills used",
24+
"link": "https://optional-external-link.com"
25+
}
26+
```
27+
28+
### Field Descriptions
29+
30+
| Field | Type | Required | Description | Example |
31+
|-------|------|----------|-------------|---------|
32+
| `id` | string | ✅ | Unique identifier for the document | `"work-gea-2022"` |
33+
| `type` | string | ✅ | Category of content (determines which page it appears on) | `"workexperience"`, `"project"`, `"volunteering"` |
34+
| `sdate` | string | ✅ | Start date in MM.YYYY format | `"02.2022"` |
35+
| `edate` | string | ✅ | End date in MM.YYYY format or "Present" | `"Present"` or `"08.2024"` |
36+
| `company` | string | ✅ | Company or organization name | `"GEA"` |
37+
| `location` | string | ✅ | Location (City, Country format recommended) | `"Germany"` |
38+
| `title` | string | ✅ | Job title, project name, or role | `"IoT Software Engineer"` |
39+
| `summary` | string | ✅ | Detailed description of responsibilities/achievements | `"Built systems for device health monitoring..."` |
40+
| `skills` | string | ✅ | Technologies, tools, or skills used | `"IoT, Azure, Node.js, Docker"` |
41+
| `link` | string | ❌ | Optional external link (portfolio, GitHub, etc.) | `"https://github.com/user/project"` |
42+
43+
### How to Add New Content
44+
45+
1. **Access Azure Cosmos DB**: Use Azure Portal, Azure CLI, or Cosmos DB SDK
46+
2. **Navigate to your container**: Access your configured database and container
47+
3. **Create new document**: Add a new JSON document with the required fields
48+
4. **Set the correct type**: Ensure the `type` field matches the page where you want it to appear
49+
5. **Save the document**: The content will automatically appear on your website
50+
51+
### Environment Variables Required
52+
53+
```bash
54+
COSMOS_CONNECTION_STRING="your-cosmos-connection-string"
55+
# OR alternatively:
56+
COSMOS_ENDPOINT="https://your-account.documents.azure.com:443/"
57+
COSMOS_KEY="your-cosmos-primary-key"
58+
COSMOS_DATABASE="your-database-name"
59+
COSMOS_CONTAINER="your-container-name"
60+
```

project-plan.md renamed to Docs/project-plan.md

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
# Project Plan Backlog
22

3+
## v2.0.0
34

4-
## v1.3.0 --> Time to work with AZ stuff for Az204
5-
6-
- Manually add old version details to the project (changelog)
7-
- Replace react webpage icon
85
- Create CosmoDB and create connector on the project to fetch data from there
96
- Create AZ function that updates/create cosmosDB item(s) once the blob is update
107
- Retrieve data from cosmosDB
11-
- Make sure that it will continue working despite of using a static website
12-
13-
❓- Migrate static_page to App Service on [Azure](https://learn.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=openid%2Caspnetcore)
14-
❓- Create pipeline on Github to connect with AZ (Deploy webapp to azure static webapp)
8+
- Create pipeline on Github to connect with AZ (Deploy webapp to azure static webapp)
159

1610
## vX.0.0 --> Time to create your own NPM
1711

12+
- Replace react webpage icon
1813
- Version uses the component as a NPM package
1914
-- IMPORTANT: Perhaps this could be its own project! To give it an input and create a graph based on the year of experience in different positions for different technologies
2015

‎README.md‎

Lines changed: 90 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,123 @@
11
# Portfolio Starter
22

3-
This is my starter portfolio that I worked on based on the template from [Vercel](https://portfolio-blog-starter.vercel.app).
3+
This is my start### Build the Docker image
44

5-
## Versioning
5+
```bash
6+
docker build -t online-cv .
7+
```
8+
9+
### Build Multi-platform Docker image (AMD64 + ARM64)
10+
11+
For compatibility with both Intel/AMD and Apple Silicon (M1/M2) processors:
612

7-
I follow the format from [semantic-release](https://semantic-release.gitbook.io/semantic-release).
13+
```bash
14+
# Create a new builder instance (one-time setup)
15+
docker buildx create --name multiplatform --use
16+
17+
# Build for multiple platforms
18+
docker buildx build --platform linux/amd64,linux/arm64 -t online-cv:latest .
19+
```rtfolio that I worked on based on the template from [Vercel](https://portfolio-blog-starter.vercel.app).
820
9-
## Demo
21+
## Progress (Temporal)
1022
11-
Demonstration of the original website cloned from Vercel, with the blogs pages.
23+
- 🕐Adapt pipeline
24+
- 🚧Test container in the cloud
25+
- ✅Solve issue to fetch experiences from container
26+
- ✅Solve styles missed when running container
1227
13-
https://portfolio-blog-starter.vercel.app
28+
## Documentation
1429
15-
**NOTE**: This URL will be updated with a website that relies on the code used by this project.
30+
- [Content Management](./Docs/CONTENT_MANAGEMENT.md)
1631
1732
## How to Use
1833
1934
Clone this repository and then run:
2035
```bash
21-
pnpm install
36+
npm install --legacy-peer-deps
2237
```
2338

2439
Afterwards
2540
```bash
26-
pnpm dev
41+
npm run dev
42+
```
43+
44+
### Test build before triggering Github actions
45+
46+
```bash
47+
npm run build
48+
```
49+
50+
## Run with Docker
51+
52+
To run the application using Docker:
53+
54+
### Build the Docker image
55+
56+
```bash
57+
docker build -t onlinecv .
2758
```
2859

29-
## Test build before triggering Github actions
60+
### Run the Docker container
3061

31-
````
32-
pnpm build
33-
````
62+
```bash
63+
docker run -p 3000:8080
64+
-e COSMOS_ENDPOINT=https://your-cosmos-account.documents.azure.com:443/
65+
-e COSMOS_KEY=your_cosmos_key_here
66+
-e COSMOS_DATABASE=your_db_here
67+
-e COSMOS_CONTAINER=your_container_here
68+
-e NODE_ENV=production
69+
onlinecv
70+
```
71+
72+
**Important**: Do not use quotes around the environment variable values when using `-e` flag.
73+
74+
**Environment Variables:**
75+
76+
- `COSMOS_ENDPOINT`: Your Azure Cosmos DB endpoint URL (without quotes)
77+
- `COSMOS_KEY`: Your Azure Cosmos DB access key (without quotes)
78+
- `COSMOS_DATABASE`: Database name (defaults to "onlineCv")
79+
- `COSMOS_CONTAINER`: Container name (defaults to "experience")
80+
- `NODE_ENV`: Set to "production" for production builds
81+
82+
**Alternative with .env file:**
83+
84+
Create a `.env` file with these variables (without quotes):
85+
```env
86+
COSMOS_ENDPOINT=https://your-cosmos-account.documents.azure.com:443/
87+
COSMOS_KEY=your_cosmos_key_here
88+
COSMOS_DATABASE=onlineCv
89+
COSMOS_CONTAINER=experience
90+
NODE_ENV=production
91+
```
3492

35-
**Not using pnpm?** Check [pnpm's website](https://pnpm.io/installation) to know how to install it.
93+
Then run:
94+
```bash
95+
docker run -p 3000:8080 --env-file .env onlinecv
96+
```
3697

37-
## How to generate data for the projects/volunteering/workExperience page(s)
98+
The application will be available at `http://localhost:3000`
3899

39-
### Create a file
100+
## Deploy to Azure Container Registry
40101

41-
On the path '/app/<folder>/posts', create a file with any name but in format '.mdx'
102+
To deploy your Docker image to Azure Container Registry for use with Azure services:
42103

43-
### Populate the file
104+
### Login to Azure Container Registry
44105

45-
On the file created on the previous step, fill the file with the following format:
106+
```bash
107+
az acr login --name <your-registry-name>
108+
```
46109

47-
```
48-
---
49-
sdate: '<start_month.year>'
50-
edate: '<end_month.year>'
51-
company: '<company_name>'
52-
location: '<location>'
53-
jobTitle: '<jot_title>'
54-
---
110+
### Tag your image for Azure Container Registry
55111

56-
* <Description about the position.>
112+
```bash
113+
docker tag <local-container-name> <your-registry-name>.azurecr.io<remote-container-name>:latest
57114
```
58115

116+
### Push the image to Azure Container Registry
117+
118+
```bash
119+
docker push <your-registry-name>.azurecr.io<remote-container-name>:latest
120+
```
59121

60122
## Contact
61123

‎app/components/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ArrowIcon } from 'app/components/arrowIcon';
1+
import { ArrowIcon } from './arrowIcon';
22

33
export default function Footer() {
44
return (

0 commit comments

Comments
 (0)