Bugfixes package docker upgrades jan2023 (#37)

* Dependency upgrades to latest stable version

* Remove unnecessary docker compose version declaration

* Added more nginx configurations

* Upgraded nginx and debian docker images to latest stable release

docker-compose.yml

@@ -1,5 +1,3 @@
-version: "3.9"
-
 services:
   reactapp_svc:
     container_name: reactapp_svc

docker/Dockerfile

@@ -1,6 +1,5 @@
 # base image
-FROM node:16.2.0-alpine as builder
-
+FROM node:19.4.0-alpine as builder
 # send signal to containers to stop them
 STOPSIGNAL SIGTERM
 # create working directory
@@ -13,31 +12,27 @@ COPY package*.json ./
 RUN yarn install --silent --non-interactive --frozen-lockfile --ignore-optional
 COPY . .
 RUN PUBLIC_URL=/ yarn run build
-
-FROM nginx:1.21.0-alpine as reactapp
-
-# Add bash
-RUN apk add --no-cache bash
-
-FROM debian:10.10-slim
-
-RUN apt-get update \
-    && apt-get install -y nginx openssl \
+FROM nginx:1.23.3-alpine as reactapp
+# Install a self signed SSL certificate with no locally cached packages
+FROM debian:11.6-slim
+# Open SSL Version pinning - https://debian.pkgs.org/11/debian-main-amd64/openssl_1.1.1n-0+deb11u3_amd64.deb.html
+RUN apt-get update && apt-get install -y --no-install-recommends nginx openssl=1.1.1n-0+deb11u3 \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/* \
     && openssl req \
       -x509 \
-      -subj "/C=US/ST=TX/L=Austin/O=Home/CN=samwanekeya.com" \
+      -subj "/C=KE/ST=Nairobi/L=Nairobi/O=Company Name Ltd/OU=Portfolio website/CN=samwanekeya.com" \
       -nodes \
       -days 365 \
+      -new \
       -newkey rsa:2048 \
       -keyout /etc/ssl/private/nginx-selfsigned.key \
       -out /etc/ssl/certs/nginx-selfsigned.crt
 
 RUN rm -rf /usr/share/nginx/html/*
-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/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /usr/src/reactapp/nginx/nginxconfig/general.conf /etc/nginx/general.conf
+COPY --from=builder /usr/src/reactapp/nginx/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;\""]

docker/nginxconfig/general.conf

@@ -1,58 +1,56 @@
-# favicon.ico
-location = /public/favicon.ico {
-	log_not_found off;
-	access_log off;
-	error_log 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 "*";
+  add_header Cache-Control "public";
+  expires 30d;
+  # Nginx logs every request that hits the server to a log file. If you use analytics to monitor this, you may want to turn this functionality off. Simply edit the access_log directive:
+  access_log 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 "*";
-	add_header Cache-Control "public";
-	expires 365d;
-	# Nginx logs every request that hits the server to a log file. If you use analytics to monitor this, you may want to turn this functionality off. Simply edit the access_log directive:
-	access_log on;
+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;
+  # This directive enables multi-threading when set to on for write and read operation. Multi-threading is an execution model that allows multiple threads to execute separately from each other whilst sharing their hosting process resources.
+  aio threads;
+  # This directive improves cache effectiveness by allowing read and write to be sent directly to the application.  directio is a filesystem feature of every modern operating system. This directive will be used to serve larger files like videos.
+  directio 8m;
+  # This directive assigns a block size value to the data transfer. It related to the directio  directive.
+  directio_alignment 1024;
 }
-
-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;
-	# This directive enables multi-threading when set to on for write and read operation. Multi-threading is an execution model that allows multiple threads to execute separately from each other whilst sharing their hosting process resources.
-	aio            threads;
-	# This directive improves cache effectiveness by allowing read and write to be sent directly to the application.  directio is a filesystem feature of every modern operating system. This directive will be used to serve larger files like videos.
-	directio       8m;
-	# This directive assigns a block size value to the data transfer. It related to the directio  directive.
-	directio_alignment 1024;
-}
-
 # define error pages
-error_page 401 403 404  /index.html;
-location = /index.html {
-	root /usr/share/nginx/html;
-	internal;
+error_page 401 403 404 /index.html;
+location = /index.html
+{
+  root /usr/share/nginx/html;
+  internal;
+}
+# Redirect server error pages
+error_page 500 502 503 504 /index.html;
+location = /
+{
+  root /usr/share/nginx/html;
+  internal;
 }
-
-# redirect server error pages
-error_page   500 502 503 504  /index.html;
-location = / {
-	root   /usr/share/nginx/html;
-	internal;
+# Log all not found errors for robots.txt but not found notifications
+location = /robots.txt
+{
+  log_not_found on;
+  access_log off;
 }
-
 ## Only GET, POST, PUT are allowed##
-if ($request_method !~ ^(GET|PUT|POST)$ ) {
-	return 444;
+if ($request_method !~ ^(GET|PUT|POST)$ )
+{
+  return 444;
 }
 ## In this case, it does not accept other HTTP method such as HEAD, DELETE, SEARCH, TRACE ##
-
-##  Only allow access to these domains/sub-domains samwanekeya.com and localhost
-if ($host !~ ^(samwanekeya.com|localhost)$ ) {
-	return 444;
-}
-
+##  Only allow access to these domains/sub-domains kakbima.com and localhost
+#if ($host !~ ^(accounts.kakbima.com|accounts.kakbima.dev|mua.kakbima.co.ke)$ )
+#{
+#  return 444;
+#}
 #Gzip can help reduce the amount of network transfer Nginx deals with. However, be careful increasing the gzip_comp_level too high as the server will begin wasting cpu cycles.
 #For those using Cloudflare as their CDN this is already taken care of - https://support.cloudflare.com/hc/en-us/articles/200168086-Does-Cloudflare-compress-resources-
-
 #If you want to enable compression, set the value of this directive to on. By default, it is disabled.
 #gzip             on;
 # You can make use of this directive to set the compression level. In order not to waste CPU resources, you need not set the compression level too high. Between 1 and 9, you can set the compression level to 2 or 3.

docker/nginxconfig/security.conf

@@ -1,42 +1,35 @@
-# 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 access to filenames starting with dot(.)
+location ~ /\.
+{
   deny all;
   error_log off;
   log_not_found off;
 }
-
-# Deny access to . files
-location ~ /\.(?!well-known) {
-  deny all;
+# Deny access to specific files/folders
+location ~ /(log|README\.md|README\.html|README\.txt|license\.txt|cdn-cgi|yarn\.lock|package\.json|jsconfig\.json|Dockerfile|docker-compose\.yml|craco.config\.js|scripts|nginx) {
+    deny all;
+}
+# Allow access to .well-known folder
+# For more as to why this is necessary - https://www.rfc-editor.org/rfc/rfc8615
+location ~ /\.well-known {
+    allow 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" always;
+# Enable the XSS filter provided by modern web browsers
 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,
 # to disable content-type sniffing on some browsers.
 # https://www.owasp.org/index.php/List_of_useful_HTTP_headers
-# currently suppoorted in IE > 8 http://blogs.msdn.com/b/ie/archive/2008/09/02/ie8-security-part-vi-beta-2-update.aspx
+# currently supported 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" always;
+# Enable the XSS filter provided by modern web browsers. Can be disabled when using Cloudflare CDN as it is already taken care of
+#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.
@@ -52,6 +45,6 @@ add_header Referrer-Policy "no-referrer-when-downgrade";
 # 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'";
 #Disable this when using Cloudflare CDN as it is already taken care of
-add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
+#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";

package.json

@@ -1,16 +1,15 @@
 {
   "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": "^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"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",