From dcda4c0f1635fc6b39187bd6aad492b18d098c5d Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 19:06:45 -0300 Subject: [PATCH 1/9] Include .env.example file --- .env.example | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..5785ec3 --- /dev/null +++ b/.env.example @@ -0,0 +1,3 @@ +REACT_APP_API_KEY=56c3c8b64be7b289d39ee39bda35dcf7 +REACT_APP_URL=https://api.openweathermap.org/data/2.5/forecast? +REACT_APP_ICON_URL=http://openweathermap.org/img/wn/ From 44f83a18002d29948fa4f1a7441b6ff294cd15de Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 19:07:05 -0300 Subject: [PATCH 2/9] Format .env variables for Docker --- .env | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.env b/.env index 50c0bcc..5785ec3 100644 --- a/.env +++ b/.env @@ -1,4 +1,3 @@ -REACT_APP_API_KEY = 56c3c8b64be7b289d39ee39bda35dcf7 -REACT_APP_URL = https://api.openweathermap.org/data/2.5/forecast? -REACT_APP_ICON_URL = http://openweathermap.org/img/wn/ - +REACT_APP_API_KEY=56c3c8b64be7b289d39ee39bda35dcf7 +REACT_APP_URL=https://api.openweathermap.org/data/2.5/forecast? +REACT_APP_ICON_URL=http://openweathermap.org/img/wn/ From 543324cd79c6791d6918125f2efff33776a91808 Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 19:07:40 -0300 Subject: [PATCH 3/9] Include Docker files neccesary for building and deployment --- .dockerignore | 8 ++++++++ Dockerfile | 20 ++++++++++++++++++++ docker-compose.yml | 19 +++++++++++++++++++ nginx/nginx.conf | 8 ++++++++ 4 files changed, 55 insertions(+) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100644 docker-compose.yml create mode 100644 nginx/nginx.conf diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..342e653 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,8 @@ +/build +/node_modules +.env +.vscode/ + +npm-debug.log* +yarn-debug.log* +yarn-error.log* \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..b048f65 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,20 @@ +FROM node:14-alpine AS base +WORKDIR /app +COPY package*.json ./ + +FROM base AS development +RUN npm i +COPY . . +EXPOSE 3000 +CMD ["npm", "run", "start"] + +FROM base AS build +RUN npm ci --production +COPY . . +RUN npm run build + +FROM nginx:1.23.2-alpine AS production +COPY --from=build /app/build /usr/share/nginx/html +COPY --from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf +EXPOSE 80 +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..711c7c8 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,19 @@ +version: '3.8' + +services: + + app: + container_name: hazzweather_dev + build: + context: . + dockerfile: Dockerfile + target: development + ports: + - 3000:3000 + volumes: + - ./:/app + - /app/node_modules + environment: + - REACT_APP_API_KEY + - REACT_APP_URL + - REACT_APP_ICON_URL diff --git a/nginx/nginx.conf b/nginx/nginx.conf new file mode 100644 index 0000000..5bae785 --- /dev/null +++ b/nginx/nginx.conf @@ -0,0 +1,8 @@ +server { + listen 80; + location / { + root /usr/share/nginx/html; + index index.html index.htm; + try_files $uri $uri/ /index.html =404; + } +} \ No newline at end of file From b34e20960db6c30edaab81cdafea0a3bb2c9e0ae Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 19:08:11 -0300 Subject: [PATCH 4/9] Creation of makefile to run the docker commands more easy --- Makefile | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 Makefile diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..e1fde60 --- /dev/null +++ b/Makefile @@ -0,0 +1,29 @@ +# Stop, build and run the container in detached mode +run-dev: + @docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev down && \ + docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev build --no-cache && \ + docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev up -d + +# Stop the container +stop-dev: + @docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev down + +# Stop the container, and remove the volumes (if any) and any orphan existant +rm-dev: + @docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev down -v --remove-orphans + +# Build docker image for production +build-prod: + @docker build --target production -t hazzweather . --no-cache + +# Run docker container based on production image +run-prod: + @docker run -d -p 80:80 --env-file .env --name hazzweather_prod hazzweather + +# Stop production container +stop-prod: + @docker stop hazzweather_prod + +# Remove production container +rm-prod: + @docker rm hazzweather_prod \ No newline at end of file From 7c71a7b0266da2e846ba52404fefe92433744e3c Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 19:08:51 -0300 Subject: [PATCH 5/9] Update in the Setup instructions to include Docker and other steps --- README.md | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index abe7d99..f1c0ef2 100644 --- a/README.md +++ b/README.md @@ -20,14 +20,37 @@ Weather Application created using ReactJS and APIs provided by OpenAPI.org. ## Setup Guide -- Make a `.env` file. +- Copy the `.env.example` file and rename it to `.env`. - Make an account on [OpenWeather.org](https://openweathermap.org/) - Click on your `avatar/uesrName` in navbar. - Click on `My API Keys`. - Generate a `key` if there is none. - Copy the `Key` and paste in `.env` file. + +### For local development / deployment + - Install the node modules with `npm i`. - Run the application using `npm start`. +- Access to the application with http://localhost:3000 +- To exit press CTRL+C + +### For local development / deployment using Docker and Docker-Compose + +- Install Docker and Docker-Compose. The best way is to install Docker Desktop, please refer to the docs at https://docs.docker.com/get-docker/. +- Execute `docker-compose up` or use `make run-dev` to deploy a local container. +- Access to the application with http://localhost:3000 +- To see the actual log of the container, run `docker logs -f hazzweather_dev`, to exit press CTRL+C +- To stop the container, execute `docker-compose down` or `make stop-dev` + +### For build and run a production container using `Docker + +- Install Docker. The best way is to install Docker Desktop, please refer to the docs at https://docs.docker.com/get-docker/. +- Execute `docker build --target production -t hazzweather . --no-cache` or use `make build-prod` to build the image +- Execute `docker run -d -p 80:80 --env-file .env --name hazzweather_prod hazzweather` or use `make run-prod` to run the container +- Access to the application with http://localhost +- To see the actual log of the container, run `docker logs -f hazzweather_prod`, to exit press CTRL+C +- To stop the container, execute `docker stop hazzweather_prod` or `make stop-prod` +- If you need to delete the container, execute `docker rm hazzweather_prod` or use `make rm-prod` ## REPO STATUS From c95cb8605ee3070d61f4d9b37d830ae0bb0db113 Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 22:11:50 -0300 Subject: [PATCH 6/9] Update folders and files to ignore into docker --- .dockerignore | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.dockerignore b/.dockerignore index 342e653..273cde1 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,8 +1,8 @@ -/build -/node_modules -.env -.vscode/ - +**/node_modules/ +**/dist +**/build +**/coverage +.git npm-debug.log* yarn-debug.log* yarn-error.log* \ No newline at end of file From 30ef71ab1cf89bd805369e5debb04f0a762ba677 Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 22:12:15 -0300 Subject: [PATCH 7/9] Update Docker files for building, now is separated for dev and prod --- Dockerfile.dev | 13 +++++ Dockerfile => Dockerfile.prod | 10 +--- Makefile | 53 +++++++++++++------- docker-compose.yml => docker-compose.dev.yml | 4 +- docker-compose.prod.yml | 16 ++++++ 5 files changed, 66 insertions(+), 30 deletions(-) create mode 100644 Dockerfile.dev rename Dockerfile => Dockerfile.prod (68%) rename docker-compose.yml => docker-compose.dev.yml (80%) create mode 100644 docker-compose.prod.yml diff --git a/Dockerfile.dev b/Dockerfile.dev new file mode 100644 index 0000000..c9fad27 --- /dev/null +++ b/Dockerfile.dev @@ -0,0 +1,13 @@ +FROM node:14-alpine + +WORKDIR /app + +COPY package*.json ./ + +RUN npm i + +COPY . . + +EXPOSE 3000 + +CMD ["npm", "run", "start"] \ No newline at end of file diff --git a/Dockerfile b/Dockerfile.prod similarity index 68% rename from Dockerfile rename to Dockerfile.prod index b048f65..1804471 100644 --- a/Dockerfile +++ b/Dockerfile.prod @@ -1,14 +1,6 @@ -FROM node:14-alpine AS base +FROM node:14-alpine AS build WORKDIR /app COPY package*.json ./ - -FROM base AS development -RUN npm i -COPY . . -EXPOSE 3000 -CMD ["npm", "run", "start"] - -FROM base AS build RUN npm ci --production COPY . . RUN npm run build diff --git a/Makefile b/Makefile index e1fde60..fd78927 100644 --- a/Makefile +++ b/Makefile @@ -1,29 +1,44 @@ -# Stop, build and run the container in detached mode -run-dev: - @docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev down && \ - docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev build --no-cache && \ - docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev up -d +# Stop, build and run the dev container in detached mode +compose-run-dev: + @docker-compose -f ./docker-compose.dev.yml --project-directory ./ -p hazzweather_dev down && \ + docker-compose -f ./docker-compose.dev.yml --project-directory ./ -p hazzweather_dev build --no-cache && \ + docker-compose -f ./docker-compose.dev.yml --project-directory ./ -p hazzweather_dev up -d -# Stop the container -stop-dev: - @docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev down +# Stop the dev container +compose-stop-dev: + @docker-compose -f ./docker-compose.dev.yml --project-directory ./ -p hazzweather_dev down -# Stop the container, and remove the volumes (if any) and any orphan existant -rm-dev: - @docker-compose -f ./docker-compose.yml --project-directory ./ -p hazzweather_dev down -v --remove-orphans +# Stop the dev container, and remove the volumes (if any) and any orphan existant +compose-rm-dev: + @docker-compose -f ./docker-compose.dev.yml --project-directory ./ -p hazzweather_dev down -v --remove-orphans + +# Stop, build and run the dev container in detached mode +compose-run-prod: + @docker-compose -f ./docker-compose.prod.yml --project-directory ./ -p hazzweather_prod down && \ + docker-compose -f ./docker-compose.prod.yml --project-directory ./ -p hazzweather_prod build --no-cache && \ + docker-compose -f ./docker-compose.prod.yml --project-directory ./ -p hazzweather_prod up -d + +# Stop the prod container +compose-stop-prod: + @docker-compose -f ./docker-compose.prod.yml --project-directory ./ -p hazzweather_prod down + +# Stop the prod container, and remove the volumes (if any) and any orphan existant +compose-rm-prod: + @docker-compose -f ./docker-compose.prod.yml --project-directory ./ -p hazzweather_prod down -v --remove-orphans # Build docker image for production -build-prod: - @docker build --target production -t hazzweather . --no-cache +docker-build-prod: + @docker build -f Dockerfile.prod --target production -t hazzweather . --no-cache # Run docker container based on production image -run-prod: - @docker run -d -p 80:80 --env-file .env --name hazzweather_prod hazzweather +docker-run-prod: + @docker run --env-file .env -d -p 80:80 --name hazzweather_prod hazzweather # Stop production container -stop-prod: +docker-stop-prod: @docker stop hazzweather_prod -# Remove production container -rm-prod: - @docker rm hazzweather_prod \ No newline at end of file +# Stop and remove production container +docker-rm-prod: + @docker stop hazzweather_prod && \ + docker rm hazzweather_prod \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.dev.yml similarity index 80% rename from docker-compose.yml rename to docker-compose.dev.yml index 711c7c8..813bbc6 100644 --- a/docker-compose.yml +++ b/docker-compose.dev.yml @@ -6,8 +6,7 @@ services: container_name: hazzweather_dev build: context: . - dockerfile: Dockerfile - target: development + dockerfile: Dockerfile.dev ports: - 3000:3000 volumes: @@ -17,3 +16,4 @@ services: - REACT_APP_API_KEY - REACT_APP_URL - REACT_APP_ICON_URL + - CHOKIDAR_USEPOOLING=true diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml new file mode 100644 index 0000000..9a375b1 --- /dev/null +++ b/docker-compose.prod.yml @@ -0,0 +1,16 @@ +version: '3.8' + +services: + + app: + container_name: hazzweather_prod + build: + context: . + dockerfile: Dockerfile.prod + target: production + ports: + - 80:80 + environment: + - REACT_APP_API_KEY + - REACT_APP_URL + - REACT_APP_ICON_URL From a5d00e665d12716b7dfec869df90b04ec4a710e1 Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 22:12:28 -0300 Subject: [PATCH 8/9] Update in the README.md --- README.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f1c0ef2..4664e42 100644 --- a/README.md +++ b/README.md @@ -34,18 +34,26 @@ Weather Application created using ReactJS and APIs provided by OpenAPI.org. - Access to the application with http://localhost:3000 - To exit press CTRL+C -### For local development / deployment using Docker and Docker-Compose +### For build and run a local development / deployment container using Docker and Docker-Compose - Install Docker and Docker-Compose. The best way is to install Docker Desktop, please refer to the docs at https://docs.docker.com/get-docker/. -- Execute `docker-compose up` or use `make run-dev` to deploy a local container. +- Execute `docker-compose -f docker-compose.dev.yml up` or use `make compose-run-dev` to deploy a local container. - Access to the application with http://localhost:3000 - To see the actual log of the container, run `docker logs -f hazzweather_dev`, to exit press CTRL+C -- To stop the container, execute `docker-compose down` or `make stop-dev` +- To stop the container, execute `docker-compose -f docker-compose.dev.yml down` or `make compose-stop-dev` -### For build and run a production container using `Docker +### For build and run a local production container using Docker and Docker-Compose + +- Install Docker and Docker-Compose. The best way is to install Docker Desktop, please refer to the docs at https://docs.docker.com/get-docker/. +- Execute `docker-compose -f docker-compose.prod.yml up` or use `make compose-run-prod` to deploy a local container. +- Access to the application with http://localhost:3000 +- To see the actual log of the container, run `docker logs -f hazzweather_prod`, to exit press CTRL+C +- To stop the container, execute `docker-compose -f docker-compose.prod.yml down` or `make compose-stop-prod` + +### For build and run a production container using Docker (intented for orchestration or deployment in the cloud) - Install Docker. The best way is to install Docker Desktop, please refer to the docs at https://docs.docker.com/get-docker/. -- Execute `docker build --target production -t hazzweather . --no-cache` or use `make build-prod` to build the image +- Execute `docker build -f Dockerfile.prod --target production -t hazzweather . --no-cache` or use `make build-prod` to build the image - Execute `docker run -d -p 80:80 --env-file .env --name hazzweather_prod hazzweather` or use `make run-prod` to run the container - Access to the application with http://localhost - To see the actual log of the container, run `docker logs -f hazzweather_prod`, to exit press CTRL+C From a5ccb433b12d5ed26ae8032f4c5bc28bfcd8e56d Mon Sep 17 00:00:00 2001 From: Pedro Pablo Pastene Date: Sat, 22 Oct 2022 22:13:28 -0300 Subject: [PATCH 9/9] Update missing commands --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 4664e42..2f4fb18 100644 --- a/README.md +++ b/README.md @@ -53,12 +53,12 @@ Weather Application created using ReactJS and APIs provided by OpenAPI.org. ### For build and run a production container using Docker (intented for orchestration or deployment in the cloud) - Install Docker. The best way is to install Docker Desktop, please refer to the docs at https://docs.docker.com/get-docker/. -- Execute `docker build -f Dockerfile.prod --target production -t hazzweather . --no-cache` or use `make build-prod` to build the image -- Execute `docker run -d -p 80:80 --env-file .env --name hazzweather_prod hazzweather` or use `make run-prod` to run the container +- Execute `docker build -f Dockerfile.prod --target production -t hazzweather . --no-cache` or use `make docker-build-prod` to build the image +- Execute `docker run -d -p 80:80 --env-file .env --name hazzweather_prod hazzweather` or use `make docker-run-prod` to run the container - Access to the application with http://localhost - To see the actual log of the container, run `docker logs -f hazzweather_prod`, to exit press CTRL+C -- To stop the container, execute `docker stop hazzweather_prod` or `make stop-prod` -- If you need to delete the container, execute `docker rm hazzweather_prod` or use `make rm-prod` +- To stop the container, execute `docker stop hazzweather_prod` or `make docker-stop-prod` +- If you need to delete the container, execute `docker rm hazzweather_prod` or use `make docker-rm-prod` ## REPO STATUS