diff --git a/Process and Method.md b/Process and Method.md new file mode 100644 index 000000000..5fdc2c890 --- /dev/null +++ b/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 App.js 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) + + + diff --git a/api/Dockerfile b/api/Dockerfile new file mode 100644 index 000000000..8b5b16794 --- /dev/null +++ b/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"] diff --git a/api/api/settings.py b/api/api/settings.py index 22bc4381f..12666faaf 100644 --- a/api/api/settings.py +++ b/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 diff --git a/api/requirements.txt b/api/requirements.txt index 4ba2cf2e6..284f30f99 100644 --- a/api/requirements.txt +++ b/api/requirements.txt @@ -1,4 +1,4 @@ Django==2.0.1 djangorestframework==3.7.7 -psycopg2==2.9.5 +psycopg2-binary pytz==2017.3 diff --git a/dev.yml b/dev.yml new file mode 100644 index 000000000..7e7da137b --- /dev/null +++ b/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 \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 000000000..5b0c0b837 --- /dev/null +++ b/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: diff --git a/frontend/.dockerignore b/frontend/.dockerignore new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 000000000..5fc9ab51a --- /dev/null +++ b/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"] diff --git a/frontend/new.txt b/frontend/new.txt new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/nginx.conf b/frontend/nginx.conf new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index d7d3bc5d9..c190622d9 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -11,7 +11,7 @@ class App extends Component {

HNGi9 DevOps Stage2 Task

- This task was submitted by Mayowa + This task was submitted by Obasoro Olakunle

); diff --git a/frontend/t.txt b/frontend/t.txt new file mode 100644 index 000000000..6f62db299 --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 000000000..e69de29bb