adding Project-109

Project-109: Ansible-publish-website-postgresql-nodejs-react/README.md

@@ -0,0 +1,152 @@
+# Project-109: Web Page Application (Postgresql-Nodejs-React) deployed on EC2's with Ansible and Docker
+
+## Description
+
+The Clarusway Web-Page Application aims to deploy web-page written Nodejs and React Frameworks on AWS Cloud Infrastructure using Ansible. Building infrastructure process is managing with control node utilizing Ansible. This infrastructure has 1 control node and 3 EC2's as worker node. These EC2's will be launched on AWS console. Web-page has 3 main components which are postgresql, nodejs, and react. Each component is serving in Docker container on EC2s dedicated for them. Postgresql is serving as Database of web-page. Nodejs controls backend part of web-side and react controls frontend side of web-page. The code was written by Clarusway's Developers and architecture will be created by Clarusway's AWS & DevOps Team.
+
+## Problem Statement
+
+![Project_007](ansible.png)
+
+- Clarusway has recently ended up a project that aims to serve as web page. You and your colleagues are assigned to work on this project. Clarusway Developer team has done with code and DevOps team is going to deploy the app in production environment using ansible.
+
+- Application is coded by Clarusway Fullstack development team and given you as DevOps team. Web-page allows users to collect their infos. Registration data should be kept in separate PostgreSQL database located in one of EC2s. Nodejs framework controls backend and serves on port 5000, it is als connected to the PostgreSQL database on port 5432. React framework controls the frontend and it is also connected to the Nodejs server on port 5000. React server broadcasts web-page on port 3000. 
+
+- The Web Application will be deployed using Nodejs and React framework.
+
+- The Web Application should be accessible via web browser from anywhere on port 3000.
+
+- EC2's and their security groups should be created on AWS console.
+
+- Security groups should be attached to EC2's with at least permission rule.
+
+- The rest of the process has to be controlled with control node which is connected SSH port.
+
+- Codes written by Clarusway developers should be pulled from Clarusway Repo into the control node and sent them to the EC2's from here with Ansible.
+
+- Postgresql, Nodejs and React parts has to be placed in docker container. 
+
+- Your project manager wants the DevOps team to launch an EC2 for each postgresql, nodejs and react docker container. In addition, he asks to write three different playbook groups for this project. 
+    - First one is to write playbook to control all process for each worker instance separately. 
+    - Second one is to control all process in one playbook without using roles.
+    - Third one is to control all process in one playbook using roles
+
+In the architecture, you can configure your architecture with these conditions,
+
+  - All process has to be controlled into the `control Node`
+
+  - Dynamic inventory has to be used for inventory file.
+
+  - Ansible config file has to be placed in control node.
+
+  - Docker should be installed in all worker nodes using ansible.
+
+  - `todo-app-pern` file should be pulled from Github Repo at the beginning.
+
+  - For PostgreSQL worker node
+
+    - PostgreSQL files (Dockerfile and init.sql) should be sent into it from control node using ansible
+
+    - Docker image should be created for PostgreSQL container and init.sql file should be placed under necessary folder.
+
+    - Create PostgreSQL container. Do not forget to set password as environmental variable. This password has to be protected with ansible vault.
+
+    - Please make sure this instance's security group should be accept traffic from PostgreSQL's dedicated port from Nodejs EC2 and port 22 from anywhere.
+
+    - To keep database's data, volume has to be created with docker container and necessary file(s) should be kept under this file.
+
+  - For Nodejs worker node
+
+    - Please make sure to correct or create `.env` file under `server` folder based on PostgreSQL environmental variables
+
+    - Nodejs's `server` folder should be sent into it from control node using ansible. This file will use for docker image. You don't need any extra file for creating Nodejs image.
+
+    - Docker image should be built for Nodejs container
+
+    - Create Nodejs container and publish it on port 5000
+
+    - Please make sure this instance's security group should be accept traffic from 5000, 22 dedicated port from anywhere.
+
+  - For React worker node
+
+    - Please make sure to correct `.env` file under `client` folder based on Nodejs environmental variables 
+
+    - React's `client` folder should be sent into it from control node using ansible. This file will be used for docker image. You don't need any extra file for creating react image.
+
+    - Docker image should be created for React container
+
+    - Create React container and publish it on port 3000
+
+    - Please make sure this instance's security group should be accept traffic from 3000, and 80 dedicated port from anywhere.
+
+  - Last Step 
+
+## Project Skeleton 
+
+```text
+007:clarusway_ansible_proj (folder)
+|
+|----Readme.md               # Given to the students (Definition of the project)
+|----todo-app-perm (folder)  # Given to the students (Nodejs and React files)
+|       1.server (folder) ---> Nodejs folders and files
+|       2.client (folder) ---> React folders and files
+|       3.database (folder)--> init.sql file 
+|----developer_notes.txt     # Given to the students (txt file)
+|----Ansible-Playbook        # This will be created by student
+```
+
+## Expected Outcome
+
+![Todo Web Page](./todo_web.png)
+
+### At the end of the project, following topics are to be covered;
+
+- Ansible playbook preparation without roles
+
+- Ansible playbook preparation with roles.
+
+- Bash scripting
+
+- AWS Security groups create and attach to EC2.
+
+- Launch EC2 and it's configurations
+
+- Write dockerfile for postgresql, nodejs and react images.
+
+- Docker image creation for postgresql, nodejs and react containers with ansible playbook
+
+- Docker container launching using created image with ansible playbook
+
+- Git & Github for Version Control System
+
+### At the end of the project, students will be able to;
+
+- Write Ansible playbook in different ways which are without Roles and with Roles
+
+- Apply web programming skills, importing packages within Nodejs and React Frameworks
+
+- Write Dockerfiles for different environments
+
+- Create containers which use React, Nodejs and PostgreSQL docker images 
+
+- Configure connection to the `PostgreSQL` database.
+
+- Connect backend server to database
+
+- Configure Nodejs Framework
+
+- Connect frontend server to backend server
+
+- Configure React Framework for development environment
+
+- Configure React Framework for production environment
+
+- Demonstrate bash scripting skills using `Ansible playbook` to setup web-page on EC2 Instance.
+
+- Apply git commands (push, pull, commit, add etc.) and Github as Version Control System.
+
+## Resources
+
+- [Ansible Documentation Framework](https://docs.ansible.com/ansible/2.5/user_guide/index.html)
+
+- [AWS CLI Command Reference](https://docs.aws.amazon.com/cli/latest/index.html)

Project-109: Ansible-publish-website-postgresql-nodejs-react/student-solution/ansible-project/nodejs/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:14
+
+# Create app directory
+WORKDIR /usr/src/app
+
+
+COPY package*.json ./
+
+RUN npm install
+# If you are building your code for production
+# RUN npm ci --only=production
+
+
+# copy all files into the image
+COPY . .
+
+EXPOSE 5000
+
+CMD ["node","app.js"]

Project-109: Ansible-publish-website-postgresql-nodejs-react/student-solution/ansible-project/postgres/Dockerfile

@@ -0,0 +1,5 @@
+FROM postgres
+
+COPY ./init.sql /docker-entrypoint-initdb.d/
+
+EXPOSE 5432

Project-109: Ansible-publish-website-postgresql-nodejs-react/student-solution/ansible-project/postgres/init.sql

@@ -0,0 +1,8 @@
+CREATE DATABASE clarustodo;
+
+\c clarustodo;
+
+CREATE TABLE todo(
+    todo_id SERIAL PRIMARY KEY,
+    description VARCHAR(255)
+);

Project-109: Ansible-publish-website-postgresql-nodejs-react/student-solution/ansible-project/react/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:14
+
+# Create app directory
+WORKDIR /app
+
+
+COPY package*.json ./
+
+RUN yarn install
+
+# copy all files into the image
+COPY . .
+
+EXPOSE 3000
+
+CMD ["yarn", "run", "start"]

Project-109: Ansible-publish-website-postgresql-nodejs-react/student-solution/ansible-project/todo-app-pern/README.md

@@ -0,0 +1,12 @@
+# Clarus Todos App Using PERN
+
+## PERN : PostgreSQL - Express - ReactJS - NodeJS
+
+### server .env file content:
+
+SERVER_PORT=  
+DB_USER=  
+DB_PASSWORD=  
+DB_NAME=  
+DB_HOST=  
+DB_PORT=

Project-109: Ansible-publish-website-postgresql-nodejs-react/student-solution/ansible-project/todo-app-pern/client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Project-109: Ansible-publish-website-postgresql-nodejs-react/student-solution/ansible-project/todo-app-pern/client/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `yarn build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

Project-109: Ansible-publish-website-postgresql-nodejs-react/student-solution/ansible-project/todo-app-pern/client/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}