diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..273cde1 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,8 @@ +**/node_modules/ +**/dist +**/build +**/coverage +.git +npm-debug.log* +yarn-debug.log* +yarn-error.log* \ No newline at end of file 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/ 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/ 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.prod b/Dockerfile.prod new file mode 100644 index 0000000..1804471 --- /dev/null +++ b/Dockerfile.prod @@ -0,0 +1,12 @@ +FROM node:14-alpine AS build +WORKDIR /app +COPY package*.json ./ +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/Makefile b/Makefile new file mode 100644 index 0000000..fd78927 --- /dev/null +++ b/Makefile @@ -0,0 +1,44 @@ +# 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 dev container +compose-stop-dev: + @docker-compose -f ./docker-compose.dev.yml --project-directory ./ -p hazzweather_dev down + +# 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 +docker-build-prod: + @docker build -f Dockerfile.prod --target production -t hazzweather . --no-cache + +# Run docker container based on production image +docker-run-prod: + @docker run --env-file .env -d -p 80:80 --name hazzweather_prod hazzweather + +# Stop production container +docker-stop-prod: + @docker stop hazzweather_prod + +# 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/README.md b/README.md index abe7d99..2f4fb18 100644 --- a/README.md +++ b/README.md @@ -20,14 +20,45 @@ 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 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 -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 -f docker-compose.dev.yml down` or `make compose-stop-dev` + +### 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 -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 docker-stop-prod` +- If you need to delete the container, execute `docker rm hazzweather_prod` or use `make docker-rm-prod` ## REPO STATUS diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml new file mode 100644 index 0000000..813bbc6 --- /dev/null +++ b/docker-compose.dev.yml @@ -0,0 +1,19 @@ +version: '3.8' + +services: + + app: + container_name: hazzweather_dev + build: + context: . + dockerfile: Dockerfile.dev + ports: + - 3000:3000 + volumes: + - ./:/app + - /app/node_modules + environment: + - 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 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