` .
+3. Try `npm run deploy again`
+
+### [Heroku](https://www.heroku.com/)
+
+Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).React App
+
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
+
diff --git a/client/public/manifest.json b/client/public/manifest.json
new file mode 100644
index 0000000..ef19ec2
--- /dev/null
+++ b/client/public/manifest.json
@@ -0,0 +1,15 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ }
+ ],
+ "start_url": "./index.html",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/client/src/App.css b/client/src/App.css
new file mode 100644
index 0000000..c5c6e8a
--- /dev/null
+++ b/client/src/App.css
@@ -0,0 +1,28 @@
+.App {
+ text-align: center;
+}
+
+.App-logo {
+ animation: App-logo-spin infinite 20s linear;
+ height: 80px;
+}
+
+.App-header {
+ background-color: #222;
+ height: 150px;
+ padding: 20px;
+ color: white;
+}
+
+.App-title {
+ font-size: 1.5em;
+}
+
+.App-intro {
+ font-size: large;
+}
+
+@keyframes App-logo-spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
diff --git a/client/src/App.js b/client/src/App.js
new file mode 100644
index 0000000..d458180
--- /dev/null
+++ b/client/src/App.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import OtherPage from './OtherPage';
+import Fib from './Fib';
+
+class App extends Component {
+ render() {
+ return (
+
+
+
+ Welcome to React
+
+
+
+
+ );
+ }
+}
+
+export default App;
diff --git a/client/src/App.test.js b/client/src/App.test.js
new file mode 100644
index 0000000..f5f4235
--- /dev/null
+++ b/client/src/App.test.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+
+});
diff --git a/client/src/Fib.js b/client/src/Fib.js
new file mode 100644
index 0000000..dbef5e4
--- /dev/null
+++ b/client/src/Fib.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+
+class Fib extends Component {
+ state = {
+ seenIndexes: [],
+ values: {},
+ index: ''
+ };
+
+ componentDidMount() {
+ this.fetchValues();
+ this.fetchIndexes();
+ }
+
+ async fetchValues() {
+ const values = await axios.get('/api/values/current');
+ this.setState({ values: values.data });
+ }
+
+ async fetchIndexes() {
+ const seenIndexes = await axios.get('/api/values/all');
+ this.setState({
+ seenIndexes: seenIndexes.data
+ });
+ }
+
+ handleSubmit = async event => {
+ event.preventDefault();
+
+ await axios.post('/api/values', {
+ index: this.state.index
+ });
+ this.setState({ index: '' });
+ };
+
+ renderSeenIndexes() {
+ return this.state.seenIndexes.map(({ number }) => number).join(', ');
+ }
+
+ renderValues() {
+ const entries = [];
+
+ for (let key in this.state.values) {
+ entries.push(
+
+ For index {key} I calculated {this.state.values[key]}
+
+ );
+ }
+
+ return entries;
+ }
+
+ render() {
+ return (
+
+
+
+
Indexes I have seen:
+ {this.renderSeenIndexes()}
+
+ Calculated Values:
+ {this.renderValues()}
+
+ );
+ }
+}
+
+export default Fib;
diff --git a/client/src/OtherPage.js b/client/src/OtherPage.js
new file mode 100644
index 0000000..ee1ce85
--- /dev/null
+++ b/client/src/OtherPage.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export default () => {
+ return (
+
+ Im some other page
+
+ );
+};
diff --git a/client/src/index.css b/client/src/index.css
new file mode 100644
index 0000000..b4cc725
--- /dev/null
+++ b/client/src/index.css
@@ -0,0 +1,5 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+}
diff --git a/client/src/index.js b/client/src/index.js
new file mode 100644
index 0000000..afed62d
--- /dev/null
+++ b/client/src/index.js
@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+
+ReactDOM.render(
+
+
+
diff --git a/client/src/registerServiceWorker.js b/client/src/registerServiceWorker.js
new file mode 100644
index 0000000..0020239
--- /dev/null
+++ b/client/src/registerServiceWorker.js
@@ -0,0 +1,117 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+ window.location.hostname === "localhost" ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === "[::1]" ||
+ // 127.0.0.1/8 is considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
+export default function register() {
+ if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+ return;
+ }
+
+ window.addEventListener("load", () => {
+ const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+ if (isLocalhost) {
+ // This is running on localhost. Lets check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl);
+
+ // Add some additional logging to localhost, pointing developers to the
+ // service worker/PWA documentation.
+ navigator.serviceWorker.ready.then(() => {
+ console.log(
+ "This web app is being served cache-first by a service " +
+ "worker. To learn more, visit https://goo.gl/SC7cgQ"
+ );
+ });
+ } else {
+ // Is not local host. Just register service worker
+ registerValidSW(swUrl);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then((registration) => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === "installed") {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the old content will have been purged and
+ // the fresh content will have been added to the cache.
+ // It's the perfect time to display a "New content is
+ // available; please refresh." message in your web app.
+ console.log("New content is available; please refresh.");
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // "Content is cached for offline use." message.
+ console.log("Content is cached for offline use.");
+ }
+ }
+ };
+ };
+ })
+ .catch((error) => {
+ console.error("Error during service worker registration:", error);
+ });
+}
+
+function checkValidServiceWorker(swUrl) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl)
+ .then((response) => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ if (
+ response.status === 404 ||
+ response.headers.get("content-type").indexOf("javascript") === -1
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then((registration) => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
+ });
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl);
+ }
+ })
+ .catch(() => {
+ console.log(
+ "No internet connection found. App is running in offline mode."
+ );
+ });
+}
+
+export function unregister() {
+ if ("serviceWorker" in navigator) {
+ navigator.serviceWorker.ready.then((registration) => {
+ registration.unregister();
+ });
+ }
+}
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..d85607e
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,92 @@
+version: "3"
+services:
+ postgres: #service name as domain <- can be accessed
+ image: "postgres:latest"
+ environment:
+ - POSTGRES_PASSWORD=postgres_password
+ redis:
+ image: "redis:latest"
+ nginx:
+ depends_on:
+ - api
+ - client
+ restart: always
+ build:
+ dockerfile: Dockerfile.dev
+ context: ./nginx
+ ports:
+ - "3050:80"
+ api:
+ depends_on:
+ - postgres
+ build:
+ dockerfile: Dockerfile.dev
+ context: ./server
+ volumes:
+ - /app/node_modules
+ - ./server:/app
+ environment:
+ - REDIS_HOST=redis
+ - REDIS_PORT=6379
+ - PGUSER=postgres
+ - PGHOST=postgres
+ - PGDATABASE=postgres
+ - PGPASSWORD=postgres_password
+ - PGPORT=5432
+ client:
+ build:
+ dockerfile: Dockerfile.dev
+ context: ./client
+ volumes:
+ - /app/node_modules #bookmarking, prevent override
+ - ./client:/app #/app reference to ./server
+ worker:
+ environment:
+ - REDIS_HOST=redis
+ - REDIS_PORT=6379 #check from doc
+ build:
+ dockerfile: Dockerfile.dev
+ context: ./worker
+ volumes:
+ - /app/node_modules
+ - ./worker:/app
+
+
+#set env variable at run time
+#build: preparation of the image
+#run: take image an instance it as an container + set env variables to container
+
+#variableName=value (set in the container at run time)
+#variableName (set a variable in the container at run time, taking value from local)
+
+#may need start up twice
+
+
+#port mapping from nginx in dev environment
+#react: /index.html + /main.js -> /
+
+#nginx(container), mapping: req path
+#with /api/ -> route to express
+#with / -> route to react
+
+#express api: /api/values/all -> nginx(after chop) -> values/all
+#express api(cal from worker): /api/values/current -> nginx(after chop) -> /values/current
+
+#M2: react:4000 + express:3000
+# bad in production, e.g. /api/values/current:3000, because port can easily change
+
+# config rules to nginx: default.conf to
+# outside -> nginx -> server'upstream' server at client :3000
+# outside -> nginx -> server'upstream' server at server :5000
+
+# listen on port 80
+# '/' -> send to client upstream
+# '/api' -> send to server upstream
+
+#single container(problem: build in aws EB)
+#code -> github -> Travis pull(auto) -> build and test -> push to AWS EB -> build and deploy
+
+#multi container(good: no need depends on EB to build image)
+#code -> git hub -> Travis pull(auto) -> build test image and test
+# -> build prod images(a single file) -> push prod images to Docker hub
+# -> Travis pushes project to aws EB -> EB pulls images from Docker hub and deploys
\ No newline at end of file
diff --git a/nginx/Dockerfile b/nginx/Dockerfile
new file mode 100644
index 0000000..85ae399
--- /dev/null
+++ b/nginx/Dockerfile
@@ -0,0 +1,2 @@
+FROM nginx
+COPY ./default.conf /etc/nginx/conf.d/default.conf
\ No newline at end of file
diff --git a/nginx/Dockerfile.dev b/nginx/Dockerfile.dev
new file mode 100644
index 0000000..85ae399
--- /dev/null
+++ b/nginx/Dockerfile.dev
@@ -0,0 +1,2 @@
+FROM nginx
+COPY ./default.conf /etc/nginx/conf.d/default.conf
\ No newline at end of file
diff --git a/nginx/default.conf b/nginx/default.conf
new file mode 100644
index 0000000..606b5b5
--- /dev/null
+++ b/nginx/default.conf
@@ -0,0 +1,31 @@
+
+upstream client {
+ server client:3000;
+}
+
+upstream api {
+ server api:5000;
+}
+
+server {
+ listen 80;
+ #proxy / -> upstream client
+ location / {
+ proxy_pass http://client;
+ }
+
+ location /sockjs-node {
+ proxy_pass http://client;
+ proxy_http_version 1.1;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection "Upgrade";
+ }
+
+ #proxy / -> upstream api
+ location /api {
+ #match and chop /api then rewrite it by the match(/$1)
+ #break: not applying other rewrite rules after this one(futher rewrite)
+ rewrite /api/(.*) /$1 break;
+ proxy_pass http://api;
+ }
+}
\ No newline at end of file
diff --git a/notes.sh b/notes.sh
new file mode 100644
index 0000000..257e4f8
--- /dev/null
+++ b/notes.sh
@@ -0,0 +1,5 @@
+# what image to use
+
+# specify build,
+# volumes(update when what change ),
+# env variables
\ No newline at end of file
diff --git a/server/Dockerfile b/server/Dockerfile
new file mode 100644
index 0000000..dc2d1aa
--- /dev/null
+++ b/server/Dockerfile
@@ -0,0 +1,6 @@
+FROM node:alpine
+WORKDIR "/app"
+COPY ./package.json ./
+RUN npm install
+COPY . .
+CMD ["npm", "run", "start"]
\ No newline at end of file
diff --git a/server/Dockerfile.dev b/server/Dockerfile.dev
new file mode 100644
index 0000000..59807ae
--- /dev/null
+++ b/server/Dockerfile.dev
@@ -0,0 +1,6 @@
+FROM node:alpine
+WORKDIR "/app"
+COPY ./package.json ./
+RUN npm install
+COPY . ./
+CMD ["npm", "run", "dev"]
diff --git a/server/index.js b/server/index.js
new file mode 100644
index 0000000..6f3945c
--- /dev/null
+++ b/server/index.js
@@ -0,0 +1,85 @@
+const keys = require('./keys');
+//connect to FN, redis and progres
+// Express App Setup
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+
+const app = express();
+app.use(cors());
+app.use(bodyParser.json());
+
+// Postgres Client Setup
+const { Pool } = require('pg');
+const pgClient = new Pool({
+ user: keys.pgUser,
+ host: keys.pgHost,
+ database: keys.pgDatabase,
+ password: keys.pgPassword,
+ port: keys.pgPort,
+});
+
+pgClient.connect().then(async ()=>{
+ console.log('23, pg connected');
+
+ await pgClient
+ .query('CREATE TABLE IF NOT EXISTS values (number INT)')
+ .catch((err) => console.log(err));
+})
+
+// Redis Client Setup
+const redis = require('redis');
+const redisClient = redis.createClient({
+ host: keys.redisHost,
+ port: keys.redisPort,
+ retry_strategy: () => 1000, // reconnect after 1000 if lose connection
+});
+//duplicate connection
+const redisPublisher = redisClient.duplicate();
+
+// Express route handlers
+
+app.get('/hi', (req, res) => {
+ res.send('Hi');
+});
+
+app.get('/values/all', async (req, res) => {
+ // await pgClient
+ // .query('CREATE TABLE IF NOT EXISTS values (number INTEGER)')
+ // .catch((err) => console.log(err));
+
+ const values = await pgClient.query('SELECT * FROM values');
+ // no other info, just the data of rows
+ res.send(values.rows);
+});
+
+app.get('/values/current', async (req, res) => {
+ //only callback in redis
+ redisClient.hgetall('values', (err, values) => {
+ res.send(values);
+ });
+});
+
+app.post('/values', async (req, res) => {
+ const index = req.body.index;
+
+ // await pgClient
+ // .query('CREATE TABLE IF NOT EXISTS values (number INTEGER)')
+ // .catch((err) => console.log(err));
+
+ if (parseInt(index) > 40) {
+ return res.status(422).send('Index too high');
+ }
+
+ redisClient.hset('values', index, 'Nothing yet!');
+ redisPublisher.publish('insert', index);
+ pgClient.query('INSERT INTO values(number) VALUES($1)', [index]);
+
+ res.send({ working: true });
+});
+
+app.listen(5000, (err) => {
+ console.log('Listening 5000');
+});
+
+
diff --git a/server/keys.js b/server/keys.js
new file mode 100644
index 0000000..2799c41
--- /dev/null
+++ b/server/keys.js
@@ -0,0 +1,9 @@
+module.exports = {
+ redisHost: process.env.REDIS_HOST,
+ redisPort: process.env.REDIS_PORT,
+ pgUser: process.env.PGUSER,
+ pgHost: process.env.PGHOST,
+ pgDatabase: process.env.PGDATABASE,
+ pgPassword: process.env.PGPASSWORD,
+ pgPort: process.env.PGPORT
+};
diff --git a/server/package.json b/server/package.json
new file mode 100644
index 0000000..80ac0c4
--- /dev/null
+++ b/server/package.json
@@ -0,0 +1,14 @@
+{
+ "dependencies": {
+ "express": "4.16.3",
+ "pg": "8.0.3",
+ "redis": "2.8.0",
+ "cors": "2.8.4",
+ "nodemon": "1.18.3",
+ "body-parser": "*"
+ },
+ "scripts": {
+ "dev": "nodemon",
+ "start": "node index.js"
+ }
+}
diff --git a/vlc_T9jkXjXV4C.png b/vlc_T9jkXjXV4C.png
new file mode 100644
index 0000000..8ee840d
Binary files /dev/null and b/vlc_T9jkXjXV4C.png differ
diff --git a/worker/Dockerfile b/worker/Dockerfile
new file mode 100644
index 0000000..dc2d1aa
--- /dev/null
+++ b/worker/Dockerfile
@@ -0,0 +1,6 @@
+FROM node:alpine
+WORKDIR "/app"
+COPY ./package.json ./
+RUN npm install
+COPY . .
+CMD ["npm", "run", "start"]
\ No newline at end of file
diff --git a/worker/Dockerfile.dev b/worker/Dockerfile.dev
new file mode 100644
index 0000000..fd36ba1
--- /dev/null
+++ b/worker/Dockerfile.dev
@@ -0,0 +1,6 @@
+FROM node:alpine
+WORKDIR "/app"
+COPY ./package.json ./
+RUN npm install
+COPY . .
+CMD ["npm", "run", "dev"]
\ No newline at end of file
diff --git a/worker/index.js b/worker/index.js
new file mode 100644
index 0000000..408e56c
--- /dev/null
+++ b/worker/index.js
@@ -0,0 +1,21 @@
+const keys = require('./keys');
+const redis = require('redis');
+
+const redisClient = redis.createClient({
+ host: keys.redisHost,
+ port: keys.redisPort,
+ retry_strategy: () => 1000
+});
+const sub = redisClient.duplicate();
+
+function fib(index) {
+ if (index < 2) return 1;
+ return fib(index - 1) + fib(index - 2);
+}
+
+sub.on('message', (channel, message) => {
+ //hash of values
+ redisClient.hset('values', message, fib(parseInt(message)));
+});
+//any insert event incoming
+sub.subscribe('insert');
diff --git a/worker/keys.js b/worker/keys.js
new file mode 100644
index 0000000..644b531
--- /dev/null
+++ b/worker/keys.js
@@ -0,0 +1,4 @@
+module.exports = {
+ redisHost: process.env.REDIS_HOST,
+ redisPort: process.env.REDIS_PORT
+};
diff --git a/worker/package.json b/worker/package.json
new file mode 100644
index 0000000..0fdfc6e
--- /dev/null
+++ b/worker/package.json
@@ -0,0 +1,10 @@
+{
+ "dependencies": {
+ "nodemon": "1.18.3",
+ "redis": "2.8.0"
+ },
+ "scripts": {
+ "start": "node index.js",
+ "dev": "nodemon"
+ }
+}
\ No newline at end of file