This is an ecommerce web app for both male and female.
Make sure that you have the following installed:
cd client
npm install
npm start
cd ../backend
npm install
npm start
* BackEnd: * Nodes
* FontEnd: React
* Database * Mongo
* Docker containerization
- Create
docker-compose.yml
file - cd into backend and add
Dockerfile
and add neccessary port(5000) for nodejs - cd into front-end and add
Dockerfile
and add neccessary port(3000) for react app - ensure you have installed docker compose in your system if not follow this link for linux system.
- run
sudo docker-compose build
to start building - the run
sudo docker-compose up
to start application
npm install
npm start
cd ../backend
npm install
npm start
- Fork and Clone :
https://github.com/MishaelRatemo/yolo-commerce.git
- Change in to yolo directory :
cd yolo-commerce
- Add MongoDB configuration on server.js file
- Add
Dockerfile
- Add
docker-compose.yml
file (more details ondocker-compose.yml
anddocker file
are onexplanation.md
file) - Run docker compose to install the image and create a container :
sudo docker compose up --build
- Backend runs on port
5000
and Frontend runs on port3000
. - Push images to docker hub :
sudo docker compose push
- Go ahead a nd add a product (note that the price field only takes a numeric input )
*** Installation *** You need to install ansible, vagrant and virtualbox as per below instructions:
- Follow along with the instructions outlined here in order to install Ansible
https://docs.ansible.com/ansible/latest/installation_guide/intro_installation.html
- Instruction to install virtualbox
https://www.virtualbox.org/wiki/Linux_Downloads
- Instructions to install vagrant
https://developer.hashicorp.com/vagrant/downloads
*** Create a development environment ***
- Run
vagrant box add geerlingguy/ubuntu2004
Select the “virtualbox” option. - Run
vagrant init geerlingguy/ubuntu2004
. This will create aVagrantfile
- To boot the server run
vagrant up
- Add hosts and ansible.cfg files
Open the Vagrantfile that was created when we used the vagrant init command. Add the following lines just before the final ‘end’ (Vagrantfiles use Ruby syntax, in case you’re wondering):
# Provisioning configuration for Ansible. config.vm.provision "ansible" do |ansible| ansible.playbook = "playbook.yml" end
*** Ansible playbook ***
-
Create a file called
playbook.yml
Add name of the playbook, hosts, tasks as indicated on the playbook.yml file. -
To run the playbook on our VM. Make sure you’re in the same directory as the Vagrantfile and playbook.yml file, and enter
vagrant provision
To run the playbook : ansible-playbook playbook.yml
The playbook has 3 roles: 1). git : This is to install git . Git is installed if you want to work on your project on your computer
2). docker: This is to install docker and docker compose.This allow you to package your application in containers
3). docker-compose: it installs/download the image and container of the application
**Step1
- Create a free Google cloud account
**Step2
- Create a Project and cluster using you Google cloud account.
**Step3
-
Create a folder and name it
manifests
-
Create a deployment and service yaml files that will helps us define Kubernetes objects to create and manage a cluster.
-
In this application we have
api.yml and client.yml
api.yml
has the deployment and service object for backend andclient.yaml
has for client.
A YAML file for a Kubernetes resource typically includes the following fields: **Deployment
-
apiVersion: The version of the Kubernetes API that the resource belongs to.(app/vm1)
-
kind: The type of resource being defined (e.g. Pod, Service, Deployment).
-
metadata: Information about the resource, such as its name and labels. e.g From api.yml
metadata: name: yolo-front namespace: my-yolo-app labels: app: yolo component: front
-
spec: The desired state of the resource, including its configuration. e.g From client.yaml
spec: replicas: 3 selector: matchLabels: component: front template: metadata: labels: app: yolo component: front spec: containers: - name: clientcontainer image: mishaelr/frontend:1 ports: - containerPort: 3000
-
This
client.yml
file creates a Pod namedyolo-client
with a single container namedclientcontainer
that runs themishaelr/frontend:1
image from docker hub and exposes port3000
. -
This
api.yml
file creates a Pod namedyolo-api
with a single container namedbackendcontainer
that runs themishaelr/api:1
image from docker hub and exposes port5000
.
Service
apiVersion: v1 kind: Service metadata: name: yolo-front namespace: my-yolo-app labels: app: yolo component: front spec: type: LoadBalancer selector: app: yolo component: front ports: - port: 3000 targetPort: 3000 protocol: TCP name: http
This above client.yml file creates a Service named yolo-front
with the label app: yolo
and namespace my-yolo-app
. The Service uses the selector app: yolo
to identify the set of Pods that it should route traffic to. It has a single port named http
with a port number of 3000
and target port of 3000
, and type LoadBalancer
which exposes the service to the External network.
This api.yml file creates a Service named yolo-api
with the label app: yolo
and namespace my-yolo-app
. The Service uses the selector app: yolo
to identify the set of Pods that it should route traffic to. It has a single port named http
with a port number of 5000
and target port of 3000
, and type ClusterIP
which limits the service to the internal cluster network.
You can use the kubectl apply command to create the service from yaml file
kubectl apply -f my-service.yaml
You can also use the kubectl get svc command to check the status of your service
kubectl get svc my-service
This command will show the details of the service created by the above yaml file.
**Step 4
**Step 5
- Clone the git project repository on GKE terminal
**Step 6
- Create a namaspace :
kubectl create namespace "nameofnamespace"
**Step 7
- cd to the project that you cloned.
- To create or update the resources defined in yaml files : kubectl apply -f client.yaml and kubectl apply -f api.yaml
- This will delete the resources defined in myfile.yaml : kubectl delete -f client.yaml and kubectl delete -f api.yaml
- This will create service LoadBalancer for yolo.front and ClusterIP for yolo.api as per below table
ratemomishael@cloudshell:~ (shop-375720)$ kubectl get services
NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
kubernetes ClusterIP 10.105.0.1 <none> 443/TCP 33h
shop-846cfbf6d8-9kmzv-sdhld LoadBalancer 10.105.1.133 130.211.233.117 3000:30970/TCP 33h
shop-service LoadBalancer 10.105.1.66 34.134.45.113 80:31360/TCP 33h
yolo-app-service LoadBalancer 10.105.2.111 35.224.196.115 300:32421/TCP 38m
NB. Time show here is as per the time of creation of the service so they may differ from yours
-
Get all objects in the namespace my-yolo-app and label app=yolo
kubectl get all -n yournamespace -l app=yourapp
eg.
kubectl get all -n default -l app=shop
To view the deployed application visit shop Web link
If you have any question or contributions and support, please email me at ratemomishael@gmail.com
LinkedIn - Mishael Ratemo
Portfolio- Mishael
Click to MIT License view
Copyright (c) 2023 | Mishael Ratemo