updated repo

Process and Method.md

@@ -0,0 +1,80 @@
+Here is your stage 2 task:
+
+### containerisation :package:.
+
+You are provided a simple application with the frontend in JavaScript(React) and backend in Python(Django). 
+Follow instructions on how to deploy the application locally on your server. It should look like this. NB: It should have your slack display name
+
+1. You are then required to build docker images of the frontend and backend using a Dockerfile for each and push them to a docker repository eg docker hub, ecr etc.
+2. You are then required to create a docker-compose file that can spin up images into containers and are connected with one another. A simple docker-compose up should be able to start the application. If successful the frontend application should run on port 3000 of your server IP.
+3. You are then required to use reverse proxy with NGINX to point port 3000 to the IP of your server.
+Push your code to GitHub, it should be in the following format.
+
+
+### Fork the repo and clone into your system/server
+
+### customize the the name 
+
+1. Open <bold>App.js</bold> with the Frontend folder and change the name to user slack name
+
+2. You can test the frontend by running this commands
+
+```
+`$ cd frontend`
+
+`$ npm i`
+
+`$ npm start`
+
+```
+![image](https://user-images.githubusercontent.com/29310552/200212777-d5846165-7b2d-49a5-af7c-a841b678c303.png)
+
+```
+To test the backend also... Navigate into the folder api
+
+Create a virtual environment
+
+`$ python3 -m venv env`
+
+`$ source env/bin/activate`
+
+`$ pip install -r requirement`
+
+`$ python manage.py runserver`
+
+## Create a Dockerfile
+
+```
+You either do it on the CLI or open a Vscode. I will be using Vscode because of ease and accessibility to CLI also
+
+Building the image
+
+`$ docker build -t obasoro/frontend .`
+
+`$ docker run -it -p port:port image name`
+
+![image](https://user-images.githubusercontent.com/29310552/200222502-d169ad9b-e9b3-4782-83a1-19bc299ce0cb.png)
+
+
+Docker-compose.yml file
+![image](https://user-images.githubusercontent.com/29310552/200222825-47a273c8-b5a5-413d-959f-ae29de69f7c2.png)
+
+
+
+
+
+
+![image](https://user-images.githubusercontent.com/29310552/200222152-8134c863-f59c-48a4-a6bb-1b0e094a97ea.png)
+
+![image](https://user-images.githubusercontent.com/29310552/200222022-eb79812c-92be-4d5e-9da5-f3c6b7ffd4ac.png)
+
+`$ docker-compsose up`
+
+The container image would be spinned up.
+
+![image](https://user-images.githubusercontent.com/29310552/200222232-8d229414-ee23-4c1a-a65b-d2ca9306441e.png)
+
+[DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-20-04)
+
+
+

api/Dockerfile

@@ -0,0 +1,20 @@
+# pull the official base image
+FROM python:3.6-slim
+
+# set work directory
+WORKDIR /usr/src/app
+
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+# install dependencies
+RUN pip install --upgrade pip 
+COPY ./requirements.txt /usr/src/app
+RUN pip install -r requirements.txt
+
+# copy project
+COPY . /usr/src/app
+
+EXPOSE 8000
+CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

api/api/settings.py

@@ -25,7 +25,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ["*"]
 
 
 # Application definition

api/requirements.txt

@@ -1,4 +1,4 @@
 Django==2.0.1
 djangorestframework==3.7.7
-psycopg2==2.9.5
+psycopg2-binary
 pytz==2017.3

dev.yml

@@ -0,0 +1,21 @@
+version: '3'
+services:
+  api:
+    image: 'obasoro/backend'
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./api.:/api
+    restart: always
+  frontend:
+    image: 'obasoro/frontend'
+    ports:
+      - "3000:3000"
+    volumes:
+      - type: bind
+
+        source : ./nginx/default.conf
+
+        target: /etc/nginx/conf.d/default.conf
+
+    restart: always

docker-compose.yml

@@ -0,0 +1,20 @@
+
+version: "3"
+
+services:
+    frontend:
+        image: obasoro/frontend-react-new:latest
+        ports:
+          - 3000:3000
+        depends_on:
+          - backend
+
+    backend:
+        image: obasoro/api:latest
+        command: python manage.py runserver 0.0.0.0:8000
+        ports:
+            - "8000:8000"
+networks:
+  default:
+  name:
+  external:

frontend/Dockerfile

@@ -0,0 +1,8 @@
+FROM node:19-alpine3.15
+WORKDIR /frontend
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+EXPOSE 3000
+CMD ["npx", "serve", "build"]

frontend/src/components/App.js

@@ -11,7 +11,7 @@ class App extends Component {
           <h1 className="App-title">HNGi9 DevOps Stage2 Task</h1>
         </header>
         <p className="App-intro">
-          This task was submitted by <b>Mayowa</b>
+          This task was submitted by <b>Obasoro Olakunle</b>
         </p>
       </div>
     );

frontend/t.txt

@@ -0,0 +1,27 @@
+# Import BaseImage
+FROM node:alpine
+
+# Creating an application directory
+RUN mkdir -p /app
+
+# The  application working directory
+
+WORKDIR /app
+
+# Copy the app from local to the Image
+
+COPY package*.json .
+
+# Install node packages
+
+RUN npm install 
+
+# Copy directory our docker image
+
+COPY . .
+
+# Build the app
+
+RUN  npm run build
+
+CMD ["npm", "start"]