Dockerized App for development and production

.dockerignore

@@ -0,0 +1,8 @@
+**/node_modules/
+**/dist
+**/build
+**/coverage
+.git
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.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/

.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/

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"]

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;"]

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

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
 

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

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

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;
+    }
+}