https://github.com/yousabu/contacts-system-frontend
contacts-system-frontend
https://github.com/yousabu/contacts-system-frontend
angular nginx-proxy
Last synced: about 1 year ago
JSON representation
contacts-system-frontend
- Host: GitHub
- URL: https://github.com/yousabu/contacts-system-frontend
- Owner: yousabu
- Created: 2024-08-11T06:14:20.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-12T07:44:13.000Z (almost 2 years ago)
- Last Synced: 2025-02-15T13:18:06.015Z (over 1 year ago)
- Topics: angular, nginx-proxy
- Language: HTML
- Homepage:
- Size: 165 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# APP (Angular)
This project contains the Angular Application
## Features
- Docker Compose for Angular and Nginx service
- Dockerfile to create a Docker image for the app
- Azure Pipeline to build and push the image
- The pipeline will use a Helm chart template located in another repo, update the values.yaml, and then deploy
## Development server
Run `npm start` to start the api server in development mode (using nodemon).
### Dockerfile Production
```dockerfile
FROM node:21-alpine as builder
# Copy dependency definitions
COPY package.json package-lock.json ./
RUN npm i && mkdir /app && mv ./node_modules ./app
# Change directory so that our commands run inside this new directory
WORKDIR /app
# Get all the code needed to run the app
COPY . /app/
# Build server side bundles
RUN npm run build
FROM node:21-alpine
## From 'builder' copy published folder
COPY --from=builder /app /app
WORKDIR /app
# Expose the port the app runs in
EXPOSE 4000
USER node
CMD ["node", "dist/contacts/server/server.mjs"]
```
## Nginx
- We use Nginx to Manage Connection Between Frontend And Backend.
```nginx.conf
events {
worker_connections 1024;
}
http {
upstream frontend {
# These are references to our backend containers, facilitated by
# Compose, as defined in docker-compose.yml
server contacts_angular:4000;
}
upstream backend {
# These are references to our backend containers, facilitated by
# Compose, as defined in docker-compose.yml
server contacts_express:3000;
}
server {
listen 80;
server_name frontend;
server_name backend;
location / {
resolver 127.0.0.11 valid=30s;
proxy_pass http://frontend;
proxy_set_header Host $host;
}
location /api {
resolver 127.0.0.11 valid=30s;
proxy_pass http://backend;
proxy_set_header Host $host;
}
}
}
```
## Run Docker Compose
Run `docker-compose up -d` to start the backend express service and MongoDB.
- The backend service will now be available at :80, and the frontend can start using it.
Run `docker-compose down` to stop.
### Azure Pipeline
``` azure-pipelines.yml
Pipeline
│
├── Trigger: Branches include 'main'
│
├── Pool: yarb
│
├── Resources
│ └── Repositories
│ └── helmchart-repo (GitHub)
│
├── Steps
│ │
│ ├── Check Helm Installation
│ │
│ ├── Set Image Tags
│ │
│ ├── Build and Push Docker Image with Unique Tag
│ │
│ ├── Tag and Push Docker Image with Latest Tag
│ │
│ ├── Checkout helmchart-repo
│ │
│ ├── Check Directory Files
│ │
│ ├── Update Image Tag in values.yaml
│ │
│ ├── Deploy Express HelmChart
│ │
│ ├── Rollback Helm Deployment (on deployment failure)
│ │
│ ├── Clean Up Old Docker Images Locally
│ │
│ ├── Clean WORKDIR
│ └── Clean Workspace
```
* HelmChart URL: https://github.com/yousabu/contacts-system-helmchart.git
* Backend URL : https://github.com/yousabu/contacts-system-backend.git
## Now Let's Move to Helm Repo "https://github.com/yousabu/contacts-system-helmchart.git" ##