Merge develop to main

README.md

@@ -11,10 +11,10 @@
 ### Contributing
 
 1. Fork this repo and make changes in your own fork.
-2. Commit your changes and push to your fork `git push origin master`
+2. Commit your changes and push to your fork `git push origin main`
 3. Create a new pull request and submit it back to the project.
 
 
 ### Bugs & Issues
 
-To report bugs (or any other issues), use the [issues page](https://github.com/Wanekeya/safe-secure-password-generator/issues).
+To report bugs (or any other issues), use the [issues page](https://github.com/SamWanekeya/dockerizing-react-js-with-nginx-and-self-signed-ssl-certificate/issues).

docker-compose.yml

@@ -1,13 +1,19 @@
-version: "3.7"
+version: "3.9"
 
 services:
-  dkrz_frt:
-    container_name: dockerized_frontend
-    image: dockerized_frontend_web
+  reactapp_svc:
+    container_name: reactapp_svc
+    image: reactapp_svc_img
+    hostname: reactapp_svc
     build:
       context: .
       dockerfile: docker/Dockerfile
     ports:
       - "80:80"
       - "443:443"
-    restart: "always"
+    restart: "always"
+    volumes:
+      - reactapp_volume:/reactapp
+
+volumes:
+  reactapp_volume:

docker/Dockerfile

@@ -1,25 +1,25 @@
 # base image
-FROM node:13.10.1-alpine as builder
+FROM node:16.2.0-alpine as builder
 
 # send signal to containers to stop them
 STOPSIGNAL SIGTERM
 # create working directory
-RUN mkdir -p /usr/src/app
+RUN mkdir -p /usr/src/reactapp
 # set working directory
-WORKDIR /usr/src/app
+WORKDIR /usr/src/reactapp
 # copy package.json file to working directory
 COPY package*.json ./
 # install dependencies with precise, for more stories visit - https://yarnpkg.com/lang/en/docs/cli/install/
 RUN yarn install --silent --non-interactive --frozen-lockfile --ignore-optional
 COPY . .
 RUN PUBLIC_URL=/ yarn run build
 
-FROM nginx:1.18.0-alpine as app
+FROM nginx:1.21.0-alpine as reactapp
 
 # Add bash
 RUN apk add --no-cache bash
 
-FROM debian:10.4-slim
+FROM debian:10.10-slim
 
 RUN apt-get update \
     && apt-get install -y nginx openssl \
@@ -33,11 +33,11 @@ RUN apt-get update \
       -out /etc/ssl/certs/nginx-selfsigned.crt
 
 RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /usr/src/app/docker/nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder /usr/src/app/docker/nginxconfig/general.conf /etc/nginx/general.conf
-COPY --from=builder /usr/src/app/docker/nginxconfig/security.conf /etc/nginx/security.conf
-COPY --from=builder /usr/src/app/build /usr/share/nginx/html
-COPY --from=builder /usr/src/app/.env /usr/share/nginx/html/.env
+COPY --from=builder /usr/src/reactapp/docker/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /usr/src/reactapp/docker/nginxconfig/general.conf /etc/nginx/general.conf
+COPY --from=builder /usr/src/reactapp/docker/nginxconfig/security.conf /etc/nginx/security.conf
+COPY --from=builder /usr/src/reactapp/build /usr/share/nginx/html
+COPY --from=builder /usr/src/reactapp/.env /usr/share/nginx/html/.env
 
 EXPOSE 80 443
-CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]
+CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]

docker/nginx.conf

@@ -1,17 +1,20 @@
 #https://wiki.owasp.org/index.php/SCG_WS_nginx#SSL_Module
-
-# This value auto allows binding worker processes automatically to available CPU
+# This value auto allows binding worker processes automatically to available CPUs
 worker_processes auto;
 # Allows binding worker processes automatically to available CPUs
 worker_cpu_affinity auto;
-# The number of simultaneous connections is limited by the number of file descriptors available on the system as each socket will open a file descriptor. If NGINX tries to open more sockets than the available file descriptors, it will lead to the Too many opened files message in the error.log.
+# The number of simultaneous connections is limited by the number of file descriptors available on the system as each socket will open a file descriptor. If NGINX tries to open more sockets than the available file descriptors, it will lead to the too many opened files message in the error.log.
 worker_rlimit_nofile 65535;
-
-# logging
+# error logging
 error_log  /var/log/nginx/error.log;
+# log warning errors
 error_log /var/log/nginx/error.log warn;
-error_log  /var/log/nginx/error.log  notice;
-error_log  /var/log/nginx/error.log  info;
+# log notice errors
+error_log  /var/log/nginx/error.log notice;
+# log info errors
+error_log  /var/log/nginx/error.log info;
+# log critical errors
+error_log /var/log/nginx/error.log crit;
 
 pid        /var/run/nginx.pid;
 
@@ -32,15 +35,37 @@ events {
 }
 
 http {
+    # cache informations about FDs, frequently accessed files
+    # can boost performance, but you need to test those values
+    # This directive is disabled by default. Enable it if you want implement caching in Nginx. This directive stores metadata of files and directories commonly requested by users.
+    open_file_cache max=200000 inactive=20s;
+    # This directive contains backup information inside the open_file_cache directive. You can use this directive to set a valid period usually in seconds after which the information related to files and directories is re-validated again.
+    open_file_cache_valid 30s;
+    # Nginx usually clear information inside the open_file_cache directive after a period of inactivity based on the open_file_cache_min_uses. You can use this directive to set a minimum number of access to identify which files and directories are actively accessed.
+    open_file_cache_min_uses 4;
+    # You can make use of this directive to allow Nginx to cache errors  such as “permission denied” or “can’t access this file” when files are accessed. So anytime a resource is accessed by a user who does not have the right to do so, Nginx displays the same error report “permission denied”.
+    open_file_cache_errors on;
     # To support larger number of server names that are defined
     server_names_hash_bucket_size  64;
     # Sets the bucket size for the server names hash tables. The default value depends on the size of the processor’s cache line.
     server_names_hash_max_size 512;
+    log_format upstreamlog '$server_name to: $upstream_addr [$request] '
+    'upstream_response_time $upstream_response_time '
+    'msec $msec response_time $request_time ';
+
+    upstream reactapp_service {
+        # Load balancing method
+        least_conn;
+        # Defines a shared memory zone with the zone directive
+        zone reactapp_service 64k;
+        server reactapp_svc weight=10 max_fails=10 fail_timeout=60;
+    }
+
     # redirect all http traffic to https
     server {
         listen 80 default_server;
         listen [::]:80 default_server ipv6only=on;
-        server_name samwanekeya.com;
+        server_name *.samwanekeya.com *.samwanekeya.co.ke;
         root /usr/share/nginx/html;
         index index.html index.htm index.nginx-debian.html;
         return 301 https://$host$request_uri;
@@ -49,13 +74,13 @@ http {
     server {
         listen 443 ssl;
         listen [::]:443 ssl ipv6only=on;
-        server_name samwanekeya.com;
+        server_name *.samwanekeya.com *.samwanekeya.co.ke;
         # MIME
         include /etc/nginx/mime.types;
         default_type application/octet-stream;
         # Display nginx Version number in error or http header may result in hacker to search for known vulnerability. Therefore, the version number should be removed for every http response.
-        server_tokens "off";
-        #charset utf-8;
+        server_tokens off;
+        charset utf-8;
         # This directive, by default, is disabled to allow small packets to wait for a specified period before they are sent at once. To allow all data to be sent at once, this directive is enabled.
         tcp_nodelay on;
         #  Because we have enabled tcp_nodelay directive, small packets are sent at once. However, if you still want to make use of John Nagle’s buffering algorithm, we can also enable the tcp_nopush to add packets to each other and send them all at once.
@@ -82,17 +107,18 @@ http {
         #keepalive_disable;
         #Sets a timeout for transmitting a response to the client. The timeout is set only between two successive write operations, not for the transmission of the whole response. If the client does not receive anything within this time, the connection is closed.
         send_timeout 75s;
-        # TLS certificate and key
         ssl_certificate           /etc/ssl/certs/nginx-selfsigned.crt;
         ssl_certificate_key       /etc/ssl/private/nginx-selfsigned.key;
         # enable session resumption to improve https performance
         # http://vincent.bernat.im/en/blog/2011-ssl-session-reuse-rfc5077.html
         ssl_session_cache shared:SSL:10m;
+        # Specifies a time during which a client may reuse the session parameters.
         ssl_session_timeout 10m;
         ssl_buffer_size 1400;
         # generated using:# openssl dhparam -dsaparam -out /etc/ssl/dh4096.pem 4096
-        ssl_ecdh_curve secp384r1;
-        ssl_session_tickets off;
+        ssl_ecdh_curve prime256v1:secp384r1;
+        # Enables or disables session resumption through TLS session tickets.
+        ssl_session_tickets on;
         # enables server-side protection from BEAST attacks
         # http://blog.ivanristic.com/2013/09/is-beast-still-a-threat.html
         ssl_prefer_server_ciphers on;
@@ -113,14 +139,45 @@ http {
         # enable ocsp stapling (mechanism by which a site can convey certificate revocation information to visitors in a privacy-preserving, scalable manner)
         # http://blog.mozilla.org/security/2013/07/29/ocsp-stapling-in-firefox/
         #Cloudflare resolver 1dot1dot1dot1.cloudflare-dns.com
-        resolver 1.1.1.1 1.0.0.1 [2606:4700:4700::1111] [2606:4700:4700::1001];
-        resolver_timeout 5s;
+        # Enables or disables stapling of OCSP responses by the server.
         ssl_stapling off;
         ssl_stapling_verify on;
+        resolver             1.1.1.1 1.0.0.1 [2606:4700:4700::1111] [2606:4700:4700::1001] 8.8.8.8 8.8.4.4 [2001:4860:4860::8888] [2001:4860:4860::8844] 208.67.222.222 208.67.220.220 [2620:119:35::35] [2620:119:53::53] 9.9.9.9 149.112.112.112 [2620:fe::fe] [2620:fe::9] 64.6.64.6 64.6.65.6 [2620:74:1b::1:1] [2620:74:1c::2:2] valid=60s;
+        resolver_timeout 5s;
+
+        access_log /var/log/nginx/access.log upstreamlog;
+
+        location / {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            # Allows passing requests to another server
+            proxy_pass  http://reactapp_service;
+            # Sets the size of the buffer used for reading the first part of the response received from the proxied server.
+            proxy_buffer_size 2k;
+            # Enables or disables buffering of responses from the proxied server.
+            proxy_buffering on;
+            # Sets the number and size of the buffers used for reading a response from the proxied server, for a single connection.
+            proxy_buffers 4 2k;
+            # Limits the total size of buffers that can be busy sending a response to the client while the response is not yet fully read.
+            proxy_busy_buffers_size 4k;
+            # Defines a shared memory zone used for caching.
+            proxy_cache off;
+            # Allows starting a background subrequest to update an expired cache item, while a stale cached response is returned to the client.
+            proxy_cache_background_update off;
+            # Can be used along with the proxy_no_cache directive.
+            proxy_cache_bypass $cookie_nocache $arg_nocache $arg_comment;
+            proxy_cache_bypass $http_pragma $http_authorization;
+            proxy_no_cache $cookie_nocache $arg_nocache $arg_comment;
+            proxy_no_cache $http_pragma $http_authorization;
+            # Disable directory listing
+            autoindex off;
+            autoindex_exact_size off;
+        }
 
         # additional config
         include /etc/nginx/general.conf;
         include /etc/nginx/security.conf;
-    }
-
+        }
 }

docker/nginxconfig/general.conf

@@ -5,11 +5,6 @@ location = /public/favicon.ico {
 	error_log off;
 }
 
-# Disable directory listing
-location / {
-	autoindex  off;
-}
-
 # assets, media, and Static File Caching while allowing safe files
 location ~* \.(?:css(\.map)?|js(\.map)?|ttf|ttc|otf|eot|woff2?|svgz?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv|pdf|docx?|dotx?|docm|dotm|xlsx?|xltx?|xlsm|xltm|pptx?|potx?|pptm|potm|ppsx?)$ {
 	add_header Access-Control-Allow-Origin "*";
@@ -19,21 +14,6 @@ location ~* \.(?:css(\.map)?|js(\.map)?|ttf|ttc|otf|eot|woff2?|svgz?|jpe?g|png|g
 	access_log on;
 }
 
-# deny access to .htaccess files
-location ~ /\.ht {
-	deny  all;
-	error_log off;
-	log_not_found off;
-}
-
-# Deny access to hidden files (beginning with a period)
-location ~ /\. {
-	deny all;
-	error_log off;
-	log_not_found off;
-}
-
-
 location /video/ {
 	# To utilize operating system resources, set the value of this directive to on. sendfile transfers data between file descriptors within the OS kernel space without sending it to the application buffers. This directive will be used to serve small files.
 	sendfile       on;
@@ -88,12 +68,3 @@ if ($host !~ ^(samwanekeya.com|localhost)$ ) {
 #gzip_vary  on;
 # Some browsers such as Internet Explorer 6 do not have support for gzip compression. This directive make use of User-Agent request header field to disable compression for certain browsers.
 #gzip_disable "MSIE [4-6] \.";
-
-# This directive is disabled by default. Enable it if you want implement caching in Nginx. This directive stores metadata of files and directories commonly requested by users.
-open_file_cache max=1000 inactive=30s;
-# This directive contains backup information inside the open_file_cache directive. You can use this directive to set a valid period usually in seconds after which the information related to files and directories is re-validated again.
-open_file_cache_valid 30s;
-# Nginx usually clear information inside the open_file_cache directive after a period of inactivity based on the open_file_cache_min_uses. You can use this directive to set a minimum number of access to identify which files and directories are actively accessed.
-open_file_cache_min_uses 4;
-# You can make use of this directive to allow Nginx to cache errors  such as “permission denied” or “can’t access this file” when files are accessed. So anytime a resource is accessed by a user who does not have the right to do so, Nginx displays the same error report “permission denied”.
-open_file_cache_errors on;

docker/nginxconfig/security.conf

@@ -1,8 +1,33 @@
+# deny access to .htaccess files
+location ~ /\.ht {
+	deny  all;
+	error_log off;
+	log_not_found off;
+}
+
+# Deny access to hidden files (beginning with a period)
+location ~ /\. {
+	deny all;
+	error_log off;
+	log_not_found off;
+}
+
+# Deny access to hidden files (beginning with a period)
+location ~ /\. {
+  deny all;
+  error_log off;
+  log_not_found off;
+}
+
+# Deny access to . files
+location ~ /\.(?!well-known) {
+  deny all;
+}
 # config to don't allow the browser to render the page inside an frame or iframe
 # and avoid clickjacking http://en.wikipedia.org/wiki/Clickjacking
 # if you need to allow [i]frames, you can use SAMEORIGIN or even set an uri with ALLOW-FROM uri
 # https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options
-add_header X-Frame-Options "SAMEORIGIN";
+add_header X-Frame-Options "SAMEORIGIN" always;
 add_header X-XSS-Protection "1; mode=block";
 #Handled by CDN admin
 # when serving user-supplied content, include a X-Content-Type-Options: nosniff header along with the Content-Type: header,
@@ -11,13 +36,12 @@ add_header X-XSS-Protection "1; mode=block";
 # currently suppoorted in IE > 8 http://blogs.msdn.com/b/ie/archive/2008/09/02/ie8-security-part-vi-beta-2-update.aspx
 # http://msdn.microsoft.com/en-us/library/ie/gg622941(v=vs.85).aspx
 # 'soon' on Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=471020
-add_header X-Content-Type-Options "nosniff";
+add_header X-Content-Type-Options "nosniff" always;
 # This header enables the Cross-site scripting (XSS) filter built into most recent web browsers.
 # It's usually enabled by default anyway, so the role of this header is to re-enable the filter for
 # this particular website if it was disabled by the user.
 # https://www.owasp.org/index.php/List_of_useful_HTTP_headers
-add_header X-XSS-Protection "1; mode=block";
-
+add_header X-XSS-Protection "1; mode=block" always;
 add_header Referrer-Policy "no-referrer-when-downgrade";
 # with Content Security Policy (CSP) enabled(and a browser that supports it(http://caniuse.com/#feat=contentsecuritypolicy),
 # you can tell the browser that it can only download content from the domains you explicitly allow
@@ -27,7 +51,7 @@ add_header Referrer-Policy "no-referrer-when-downgrade";
 # directives for css and js(if you have inline css or js, you will need to keep it too).
 # more: http://www.html5rocks.com/en/tutorials/security/content-security-policy/#inline-code-considered-harmful
 # add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'";
-#For Clouflare users comment this out as it's handle from the admin UI
+#Disable this when using Cloudflare CDN as it is already taken care of
 add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
 # Prevent search engine indexing
-#add_header  X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";
+#add_header  X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";

frontend_deploy.sh

@@ -1,3 +1,8 @@
 #!/usr/bin/env bash
+# safety switch, exit script if there's error.
 set -e
-docker-compose -f docker-compose.yml up -d --build --remove-orphans
+# safety switch, uninitialized variables will stop script.
+set -u
+docker-compose -f docker-compose.yml build
+docker-compose -f docker-compose.yml down
+docker-compose -f docker-compose.yml up -d

frontend_destroy.sh

@@ -1,3 +1,6 @@
 #!/usr/bin/env bash
+# safety switch, exit script if there's error.
 set -e
-docker-compose -f docker-compose.yml down -v --rmi local
+# safety switch, uninitialized variables will stop script.
+set -u
+docker-compose -f docker-compose.yml down --rmi=all --volumes --remove-orphans

package.json

@@ -1,14 +1,16 @@
 {
-  "name": "my-app",
-  "version": "0.1.0",
-  "private": true,
+  "name": "react-js-hello-world",
+  "description": "A simple example of a dockerized default create React app with Nginx and self signed SSL certificate",
+  "version": "0.0.4",
+  "private": false,
+  "license": "MIT",
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",