Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hamdiz0/qr-code-generator
A containerized app that generates QR codes with urls as an input ,this repo contains details on running this app using docker compose along with steps to deploy it on vercel and render
https://github.com/hamdiz0/qr-code-generator
api devops docker docker-compose front jenkins nextjs postgresql python render vercel
Last synced: 22 days ago
JSON representation
A containerized app that generates QR codes with urls as an input ,this repo contains details on running this app using docker compose along with steps to deploy it on vercel and render
- Host: GitHub
- URL: https://github.com/hamdiz0/qr-code-generator
- Owner: hamdiz0
- Created: 2024-10-05T22:00:01.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-12-24T01:18:32.000Z (23 days ago)
- Last Synced: 2024-12-24T02:23:26.380Z (23 days ago)
- Topics: api, devops, docker, docker-compose, front, jenkins, nextjs, postgresql, python, render, vercel
- Language: JavaScript
- Homepage: https://qrcode-hz.vercel.app/
- Size: 1.99 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Qr-Code-Generator
Based on devops-qr-code
This app generates QR codes based on input URLs.
It is designed to be flexible, working seamlessly in both internal environments like Kubernetes and external deployments on platforms like Vercel and Render by using NextJS routing features along with environment variables to switch between the two modes
* Front-End built with NextJs
* Api built with python FastApi
* Data Base created with postgres
The user enters a url and click the button to send the url to the api ,the api checks if the url is present in the data-base or not :
* if yes it retrieves the corresponding qr-code and sends it back to the user
* if not it generates a qr-code sends it back to the user and save it in the data-base
## `Containerizing the app` :
* building and pushing both the front and api images to docker hub using JenkinsFile
* utilized a Function template to build and push the images
- hamdiz0/qr-front:latest
- hamdiz0/qr-api:latest
- postgres:15-alpine (default)
## `Runing the app using docker-compose` :
* make sure to set up the right enviroment variables in the .env file for the internal docker compose environmnet
```
NEXT_PUBLIC_USE_INTERNAL_ROUTE=true
NEXT_PUBLIC_INTERNAL_API=http://api ("api" is the service name for the api in the docker-compose.yml)
```
* the external network can be used but it's not practicle for this case
```
NEXT_PUBLIC_USE_INTERNAL_ROUTE=false
NEXT_PUBLIC_EXTERNAL_API=http://localhost:3001 (the api service must be forwarded for this to work)
```
* run the app using the Docker files in build/context folders view file here :
```
docker compose up --build
```
* run the app using the docker images from DockerHub view file here :
```
docker compose up -f ./docker-compose-images.yml up
```
## `Deploying the app using render and vercel` :
### `deploying the front end on vercel` :
* create a new project on vercel and link the gitub repo hosting the front end
* choose the right directory containing the front end files
* make sure to select the NextJs framework
* add the necessary environment variables for the external routing mode in `Settings/Environment Varaibles`
```
NEXT_PUBLIC_USE_INTERNAL_ROUTE=true
NEXT_PUBLIC_EXTERNAL_API=an external api url "https://api.onrender.com"
```
### `deploying both the api and postgres db on render` :
#### `Setting a Postgres data base` :
* create a new webservice
* make sure to select the nearest region
* add all the needed information
#### `Setting up the API` :
* create a new webservice
* make sure to select the nearest region
* select python as the language
* add the Start command :
```
uvicorn main:app --host 0.0.0.0 --port 80
```
* add the environment variables along with their values from the postgres service
```
CORS_ORIGIN // "*" to allow all traffic or set a specific url
POSTGRES_HOST // Hostname value from info/connections
POSTGRES_DB // Database value from info/connections
POSTGRES_USER // Username value from info/connections
POSTGRES_PASSWORD // Password value from info/connections
```
* the required values are present in the connections part of the postgres db info tab
#### `Results` :
## Checkout my LearningDevops repo for more details about these tools and devops in general do not hesitate to contribute