├── docker-full-stack-app-master ├── mysql │ ├── .gitignore │ ├── Dockerfile │ ├── my.cnf │ └── sqls │ │ └── initialize.sql ├── backend │ ├── .gitignore │ ├── Dockerfile │ ├── Dockerfile.dev │ ├── db.js │ ├── package.json │ └── server.js ├── nginx │ ├── Dockerfile │ └── default.conf ├── frontend │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── Dockerfile.dev │ ├── src │ │ ├── App.test.js │ │ ├── setupTests.js │ │ ├── index.css │ │ ├── index.js │ │ ├── App.css │ │ ├── App.js │ │ ├── logo.svg │ │ └── serviceWorker.js │ ├── nginx │ │ └── default.conf │ ├── Dockerfile │ ├── .gitignore │ ├── package.json │ └── README.md ├── Dockerrun.aws.json ├── .travis.yml └── docker-compose.yml ├── docker-react-app-master ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── Dockerfile.dev ├── Dockerfile ├── src │ ├── setupTests.js │ ├── index.css │ ├── index.js │ ├── App.js │ ├── App.css │ ├── App.test.js │ ├── logo.svg │ └── serviceWorker.js ├── .gitignore ├── docker-compose.yml ├── .travis.yml ├── package.json └── README.md ├── docker-compose-app ├── Dockerfile ├── docker-compose.yml ├── package.json ├── .gitignore └── server.js ├── dockerfile-folder └── Dockerfile ├── nodejs-docker-app ├── Dockerfile ├── server.js ├── package.json └── .gitignore └── README.md /docker-full-stack-app-master/mysql/.gitignore: -------------------------------------------------------------------------------- 1 | mysql_data -------------------------------------------------------------------------------- /docker-full-stack-app-master/backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /docker-full-stack-app-master/mysql/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM mysql:5.7 2 | 3 | ADD ./my.cnf /etc/mysql/conf.d/my.cnf -------------------------------------------------------------------------------- /docker-full-stack-app-master/nginx/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM nginx 2 | COPY ./default.conf /etc/nginx/conf.d/default.conf -------------------------------------------------------------------------------- /docker-react-app-master/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /docker-react-app-master/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emewjin/docker-codes/HEAD/docker-react-app-master/public/favicon.ico -------------------------------------------------------------------------------- /docker-react-app-master/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emewjin/docker-codes/HEAD/docker-react-app-master/public/logo192.png -------------------------------------------------------------------------------- /docker-react-app-master/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emewjin/docker-codes/HEAD/docker-react-app-master/public/logo512.png -------------------------------------------------------------------------------- /docker-compose-app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:10 2 | 3 | WORKDIR /usr/src/app 4 | 5 | COPY ./ ./ 6 | 7 | RUN npm install 8 | 9 | CMD ["node", "server.js"] -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emewjin/docker-codes/HEAD/docker-full-stack-app-master/frontend/public/favicon.ico -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emewjin/docker-codes/HEAD/docker-full-stack-app-master/frontend/public/logo192.png -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emewjin/docker-codes/HEAD/docker-full-stack-app-master/frontend/public/logo512.png -------------------------------------------------------------------------------- /docker-compose-app/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | services: 3 | redis-server: 4 | image: "redis" 5 | node-app: 6 | build: . 7 | ports: 8 | - "5000:8080" -------------------------------------------------------------------------------- /docker-full-stack-app-master/mysql/my.cnf: -------------------------------------------------------------------------------- 1 | [mysqld] 2 | character-set-server=utf8 3 | 4 | [mysql] 5 | default-character-set=utf8 6 | 7 | [client] 8 | default-character-set=utf8 -------------------------------------------------------------------------------- /dockerfile-folder/Dockerfile: -------------------------------------------------------------------------------- 1 | #베이스 이미지를 명시해준다. 2 | FROM alpine 3 | 4 | # 추가적으로 필요한 파일들을 다운로드 받는다. 5 | # RUN command 6 | 7 | # 컨테이너 시작시 실행 될 명령어를 명시해준다. 8 | CMD ["echo", "hello"] -------------------------------------------------------------------------------- /docker-full-stack-app-master/backend/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY ./package.json ./ 6 | 7 | RUN npm install 8 | 9 | COPY . . 10 | 11 | CMD ["npm", "run", "start"] -------------------------------------------------------------------------------- /docker-react-app-master/Dockerfile.dev: -------------------------------------------------------------------------------- 1 | FROM node:alpine 2 | 3 | WORKDIR /usr/src/app 4 | 5 | COPY package.json ./ 6 | 7 | RUN npm install 8 | 9 | COPY ./ ./ 10 | 11 | CMD ["npm", "run", "start"] -------------------------------------------------------------------------------- /nodejs-docker-app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:10 2 | 3 | WORKDIR /usr/src/app 4 | 5 | COPY package.json ./ 6 | 7 | RUN npm install 8 | 9 | COPY ./ ./ 10 | 11 | CMD ["nodemon", "server.js"] 12 | 13 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/Dockerfile.dev: -------------------------------------------------------------------------------- 1 | FROM node:alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY package.json ./ 6 | 7 | RUN npm install 8 | 9 | COPY ./ ./ 10 | 11 | CMD [ "npm", "run", "start" ] -------------------------------------------------------------------------------- /docker-full-stack-app-master/backend/Dockerfile.dev: -------------------------------------------------------------------------------- 1 | FROM node:alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY ./package.json ./ 6 | 7 | RUN npm install 8 | 9 | COPY . . 10 | 11 | CMD ["npm", "run", "dev"] 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # docker-codes 2 | 인프런에서 하고 있는 도커 강의입니다. 3 | 최신 소스 코드 업데이트는 인프런 강의에 올리고 있습니다. 4 | 감사합니다. 5 | 6 | https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%8F%84%EC%BB%A4-ci 7 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/mysql/sqls/initialize.sql: -------------------------------------------------------------------------------- 1 | DROP DATABASE IF EXISTS myapp; 2 | 3 | CREATE DATABASE myapp; 4 | USE myapp; 5 | 6 | CREATE TABLE lists ( 7 | id INTEGER AUTO_INCREMENT, 8 | value TEXT, 9 | PRIMARY KEY (id) 10 | ); -------------------------------------------------------------------------------- /nodejs-docker-app/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const PORT = 8080; 4 | 5 | //APP 6 | const app = express(); 7 | app.get('/', (req,res) => { 8 | res.send("반가워요!!!!!!!") 9 | }); 10 | 11 | app.listen(PORT); 12 | console.log("Server is running") -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/nginx/default.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 3000; 3 | 4 | location / { 5 | 6 | root /usr/share/nginx/html; 7 | 8 | index index.html index.htm; 9 | 10 | try_files $uri $uri/ /index.html; 11 | 12 | } 13 | } -------------------------------------------------------------------------------- /docker-react-app-master/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:alpine as builder 2 | WORKDIR '/usr/src/app' 3 | COPY package.json . 4 | RUN npm install 5 | COPY ./ ./ 6 | RUN npm run build 7 | 8 | FROM nginx 9 | EXPOSE 80 10 | COPY --from=builder /usr/src/app/build /usr/share/nginx/html 11 | 12 | 13 | -------------------------------------------------------------------------------- /docker-react-app-master/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:alpine as builder 2 | WORKDIR /app 3 | COPY ./package.json ./ 4 | RUN npm install 5 | COPY . . 6 | RUN npm run build 7 | 8 | FROM nginx 9 | EXPOSE 3000 10 | COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf 11 | COPY --from=builder /app/build /usr/share/nginx/html 12 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/backend/db.js: -------------------------------------------------------------------------------- 1 | const mysql = require("mysql"); 2 | const pool = mysql.createPool({ 3 | connectionLimit: 10, 4 | host: process.env.MYSQL_HOST, 5 | user: process.env.MYSQL_USER, 6 | password: process.env.MYSQL_ROOT_PASSWORD, 7 | database: process.env.MYSQL_DATABASE, 8 | port: process.env.MYSQL_PORT 9 | }); 10 | exports.pool = pool; -------------------------------------------------------------------------------- /nodejs-docker-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs-docker-app", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "dependencies": { 10 | "express":"4.17.1", 11 | "nodemon":"2.0.4" 12 | }, 13 | "author": "", 14 | "license": "ISC" 15 | } 16 | -------------------------------------------------------------------------------- /docker-compose-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docker-compose-app", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "start": "node server.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "dependencies": { 11 | "express": "4.17.1", 12 | "redis": "2.8.0" 13 | }, 14 | "author": "", 15 | "license": "ISC" 16 | } 17 | -------------------------------------------------------------------------------- /docker-compose-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /nodejs-docker-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /docker-react-app-master/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /docker-react-app-master/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.js", 9 | "dev": "nodemon server.js" 10 | }, 11 | "dependencies": { 12 | "express": "4.16.3", 13 | "mysql": "2.16.0", 14 | "nodemon": "1.18.3", 15 | "body-parser": "1.19.0" 16 | }, 17 | "author": "", 18 | "license": "ISC" 19 | } 20 | -------------------------------------------------------------------------------- /docker-react-app-master/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | services: 3 | react: 4 | build: 5 | context: . 6 | dockerfile: Dockerfile.dev 7 | ports: 8 | - "3000:3000" 9 | volumes: 10 | - /usr/src/app/node_modules 11 | - ./:/usr/src/app 12 | stdin_open: true 13 | tests: 14 | build: 15 | context: . 16 | dockerfile: Dockerfile.dev 17 | volumes: 18 | - /usr/src/app/node_modules 19 | - ./:/usr/src/app 20 | command: ["npm", "run", "test"] 21 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/nginx/default.conf: -------------------------------------------------------------------------------- 1 | upstream frontend { 2 | server frontend:3000; 3 | } 4 | 5 | upstream backend { 6 | server backend:5000; 7 | } 8 | 9 | server { 10 | listen 80; 11 | 12 | location / { 13 | proxy_pass http://frontend; 14 | } 15 | 16 | location /api { 17 | proxy_pass http://backend; 18 | } 19 | 20 | location /sockjs-node { 21 | proxy_pass http://frontend; 22 | proxy_http_version 1.1; 23 | proxy_set_header Upgrade $http_upgrade; 24 | proxy_set_header Connection "Upgrade"; 25 | } 26 | 27 | } -------------------------------------------------------------------------------- /docker-react-app-master/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /docker-compose-app/server.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const redis = require("redis"); 3 | //레디스 클라이언트 생성 4 | const client = redis.createClient({ 5 | host: "redis-server", 6 | port: 6379 7 | }) 8 | 9 | const app = express(); 10 | 11 | //숫자는 0 부터 시작합니다. 12 | client.set("number", 0); 13 | 14 | app.get('/', (req, res) => { 15 | client.get("number", (err, number) => { 16 | //현재 숫자를 가져온 후에 1씩 올려줍니다. 17 | res.send("숫자가 1씩 올라갑니다. 숫자: " + number) 18 | client.set("number", parseInt(number) + 1) 19 | }) 20 | }) 21 | 22 | 23 | app.listen(8080); 24 | console.log('Server is running'); -------------------------------------------------------------------------------- /docker-react-app-master/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /docker-react-app-master/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 |
9 | logo 10 |

11 | Edit src/App.js and save to reload.... 12 |

13 | 19 | Learn React 20 | 21 |
22 |
23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /docker-react-app-master/.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | 3 | language: generic 4 | 5 | services: 6 | - docker 7 | 8 | before_install: 9 | - echo "start creating an image with dockerfile" 10 | - docker build -t smileajw1004/docker-react-app -f Dockerfile.dev . 11 | 12 | script: 13 | - docker run -e CI=true smileajw1004/docker-react-app npm run test -- --coverage 14 | 15 | deploy: 16 | edge: true 17 | provider: elasticbeanstalk 18 | region: ap-northeast-2 19 | app: docker-react-app 20 | env: DockerReactApp-env 21 | bucket_name: elasticbeanstalk-ap-northeast-2-972153559337 22 | bucket_path: docker-react-app 23 | on: 24 | branch: master 25 | access_key_id: $AWS_ACCESS_KEY 26 | secret_access_key: $AWS_SECRET_ACCESS_KEY 27 | -------------------------------------------------------------------------------- /docker-react-app-master/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /docker-react-app-master/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docker-react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1", 12 | "axios": "0.19.2" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /docker-react-app-master/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | 11 | test('renders learn react link', () => { 12 | const { getByText } = render(); 13 | const linkElement = getByText(/learn react/i); 14 | expect(linkElement).toBeInTheDocument(); 15 | }); 16 | 17 | 18 | test('renders learn react link', () => { 19 | const { getByText } = render(); 20 | const linkElement = getByText(/learn react/i); 21 | expect(linkElement).toBeInTheDocument(); 22 | }); 23 | 24 | 25 | test('renders learn react link', () => { 26 | const { getByText } = render(); 27 | const linkElement = getByText(/learn react/i); 28 | expect(linkElement).toBeInTheDocument(); 29 | }); 30 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/Dockerrun.aws.json: -------------------------------------------------------------------------------- 1 | { 2 | "AWSEBDockerrunVersion": 2, 3 | "containerDefinitions": [ 4 | { 5 | "name": "frontend", 6 | "image": "smileajw1004/docker-frontend", 7 | "hostname": "frontend", 8 | "essential": false, 9 | "memory": 128 10 | }, 11 | { 12 | "name": "backend", 13 | "image": "smileajw1004/docker-backend", 14 | "hostname": "backend", 15 | "essential": false, 16 | "memory": 128 17 | }, 18 | { 19 | "name": "nginx", 20 | "image": "smileajw1004/docker-nginx", 21 | "hostname": "nginx", 22 | "essential": true, 23 | "portMappings": [ 24 | { 25 | "hostPort": 80, 26 | "containerPort": 80 27 | } 28 | ], 29 | "links": ["frontend", "backend"], 30 | "memory": 128 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /docker-full-stack-app-master/.travis.yml: -------------------------------------------------------------------------------- 1 | language: generic 2 | 3 | sudo: required 4 | 5 | services: 6 | - docker 7 | 8 | before_install: 9 | - docker build -t smileajw1004/react-test-app -f ./frontend/Dockerfile.dev ./frontend 10 | 11 | script: 12 | - docker run -e CI=true smileajw1004/react-test-app npm test 13 | 14 | after_success: 15 | - docker build -t smileajw1004/docker-frontend ./frontend 16 | - docker build -t smileajw1004/docker-backend ./backend 17 | - docker build -t smileajw1004/docker-nginx ./nginx 18 | 19 | - echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_ID" --password-stdin 20 | 21 | - docker push smileajw1004/docker-frontend 22 | - docker push smileajw1004/docker-backend 23 | - docker push smileajw1004/docker-nginx 24 | 25 | deploy: 26 | provider: elasticbeanstalk 27 | region: "ap-northeast-2" 28 | app: "docker-fullstack-app" 29 | env: "DockerFullstackApp-env" 30 | bucket_name: elasticbeanstalk-ap-northeast-2-972153559337 31 | bucket_path: "docker-fullstack-app" 32 | on: 33 | branch: master 34 | 35 | access_key_id: $AWS_ACCESS_KEY 36 | secret_access_key: $AWS_SECRET_ACCESS_KEY -------------------------------------------------------------------------------- /docker-full-stack-app-master/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | services: 3 | frontend: 4 | build: 5 | dockerfile: Dockerfile.dev 6 | context: ./frontend 7 | volumes: 8 | - /app/node_modules 9 | - ./frontend:/app 10 | stdin_open: true 11 | 12 | nginx: 13 | restart: always 14 | build: 15 | dockerfile: Dockerfile 16 | context: ./nginx 17 | ports: 18 | - "3000:80" 19 | 20 | backend: 21 | build: 22 | dockerfile: Dockerfile.dev 23 | context: ./backend 24 | container_name: app_backend 25 | volumes: 26 | - /app/node_modules 27 | - ./backend:/app 28 | environment: 29 | MYSQL_HOST: mysql 30 | MYSQL_USER: root 31 | MYSQL_ROOT_PASSWORD: johnahn777 32 | MYSQL_DATABASE: myapp 33 | MYSQL_PORT: 3306 34 | 35 | 36 | 37 | 38 | # mysql: 39 | # build: ./mysql 40 | # restart: unless-stopped 41 | # container_name: app_mysql 42 | # ports: 43 | # - "3306:3306" 44 | # volumes: 45 | # - ./mysql/mysql_data:/var/lib/mysql 46 | # - ./mysql/sqls/:/docker-entrypoint-initdb.d/ 47 | # environment: 48 | # MYSQL_ROOT_PASSWORD: johnahn 49 | # MYSQL_DATABASE: myapp -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | } 9 | 10 | .App-header { 11 | background-color: #282c34; 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | 34 | .container { 35 | width: 375px; 36 | } 37 | 38 | form.example input { 39 | padding: 10px; 40 | font-size: 17px; 41 | border: 1px solid grey; 42 | float: left; 43 | width: 74%; 44 | background: #f1f1f1; 45 | } 46 | 47 | form.example button { 48 | float: left; 49 | width: 20%; 50 | padding: 10px; 51 | background: #2196F3; 52 | color: white; 53 | font-size: 17px; 54 | border: 1px solid grey; 55 | border-left: none; 56 | cursor: pointer; 57 | } 58 | 59 | form.example button:hover { 60 | background: #0b7dda; 61 | } 62 | 63 | form.example::after { 64 | content: ""; 65 | clear: both; 66 | display: table; 67 | } 68 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/backend/server.js: -------------------------------------------------------------------------------- 1 | //필요한 모듈들을 가져오기 2 | const express = require("express"); 3 | const bodyParser = require('body-parser'); 4 | 5 | const db = require('./db'); 6 | 7 | //Express 서버를 생성 8 | const app = express(); 9 | 10 | // json 형대토 오는 요청의 본문을 해석해줄수있게 등록 11 | app.use(bodyParser.json()); 12 | 13 | // 테이블 생성하기 14 | db.pool.query(`CREATE TABLE lists ( 15 | id INTEGER AUTO_INCREMENT, 16 | value TEXT, 17 | PRIMARY KEY (id) 18 | )`, (err, results, fileds) => { 19 | console.log('results', results) 20 | }) 21 | 22 | 23 | //DB lists 테이블에 있는 모든 데이터를 프론트 서베에 보내주기 24 | app.get('/api/hi', function (req, res) { 25 | //데이테베이스에서 모든 정보 가져오기 26 | res.status(200).send('good') 27 | }) 28 | 29 | 30 | 31 | //DB lists 테이블에 있는 모든 데이터를 프론트 서베에 보내주기 32 | app.get('/api/values', function (req, res) { 33 | //데이테베이스에서 모든 정보 가져오기 34 | db.pool.query('SELECT * FROM lists;', 35 | (err, results, fileds) => { 36 | if (err) 37 | return res.status(500).send(err) 38 | else 39 | return res.json(results) 40 | }) 41 | }) 42 | 43 | // 클라이언트에서 입력한 값을 데이터베이스 lists 테이블에 넣어주기 44 | app.post('/api/value', function (req, res, next) { 45 | //데이터베이스에 값 넣어주기 46 | db.pool.query(`INSERT INTO lists (value) VALUES("${req.body.value}")`, 47 | (err, results, fileds) => { 48 | if (err) 49 | return res.status(500).send(err) 50 | else 51 | return res.json({ success: true, value: req.body.value }) 52 | }) 53 | }) 54 | 55 | 56 | 57 | 58 | app.listen(5000, () => { 59 | console.log('애플리케이션이 5000번 포트에서 시작되었습니다.') 60 | }) 61 | -------------------------------------------------------------------------------- /docker-react-app-master/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | import axios from 'axios'; 5 | 6 | function App() { 7 | 8 | useEffect(() => { 9 | axios.get('/api/hi') 10 | .then(response => { 11 | console.log('response', response) 12 | }) 13 | }, []) 14 | 15 | useEffect(() => { 16 | //여기서 데이터베이스에 있는 값을 가져온다. 17 | axios.get('/api/values') 18 | .then(response => { 19 | console.log('response', response) 20 | setLists(response.data) 21 | }) 22 | }, []) 23 | 24 | 25 | const [lists, setLists] = useState([]) 26 | const [value, setValue] = useState("") 27 | 28 | 29 | const changeHandler = (event) => { 30 | setValue(event.currentTarget.value) 31 | } 32 | 33 | const submitHandler = (event) => { 34 | event.preventDefault(); 35 | 36 | axios.post('/api/value', { value: value }) 37 | .then(response => { 38 | if (response.data.success) { 39 | console.log('response', response) 40 | setLists([...lists, response.data]) 41 | setValue(""); 42 | } else { 43 | alert('값을 DB에 넣는데 실패했습니다.') 44 | } 45 | }) 46 | } 47 | 48 | 49 | return ( 50 |
51 |
52 | logo 53 |
54 | 55 | {lists && lists.map((list, index) => ( 56 |
  • {list.value}
  • 57 | ))} 58 |
    59 | 안녕하세요. 60 |
    61 | 67 | 68 |
    69 |
    70 |
    71 |
    72 | ); 73 | } 74 | 75 | export default App; 76 | -------------------------------------------------------------------------------- /docker-react-app-master/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docker-react-app-master/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
    10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
    13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
    18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
    23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
    26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
    10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
    13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
    18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
    23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
    26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /docker-react-app-master/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /docker-full-stack-app-master/frontend/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | --------------------------------------------------------------------------------