Add dockerfile

frontend/.dockerignore

@@ -0,0 +1 @@
+node_modules

frontend/Dockerfile

@@ -0,0 +1,29 @@
+# Use the official Node.js runtime as the base image
+FROM node:18 as build
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the entire application code to the container
+COPY . .
+
+# Build the React app for production
+RUN npm run build
+
+# Use Nginx as the production server
+FROM nginx:alpine
+
+# Copy the built React app to Nginx's web server directory
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Expose port 80 for the Nginx server
+EXPOSE 80
+
+# Start Nginx when the container runs
+CMD ["nginx", "-g", "daemon off;"]

frontend/README.md

@@ -68,3 +68,10 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `npm run build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+
+# Run with docker
+Make sure to run command at the root directory
+
+```docker build -t frontend .``` <br />
+```docker run --name frontend -p 8080:80 -d frontend```

frontend/docker/nginx/app.conf

@@ -0,0 +1,46 @@
+server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+
+    root /var/www;
+
+    #add_header X-Frame-Options "SAMEORIGIN";
+    #add_header X-Content-Type-Options "nosniff";
+
+    index index.html;
+
+    charset utf-8;
+
+    # _ makes sure that nginx does not try to map requests to a specific hostname
+    # This allows us to specify the urls to our application as infrastructure changes,
+    # without needing to change the application
+    server_name _;
+
+    error_log  /var/log/nginx/error.log;
+    access_log /var/log/nginx/access.log;
+
+    # Some static assets are loaded on every page load,
+    # and logging these turns into a lot of useless logs.
+    # If you would prefer to see these requests for catching 404's etc.
+    # Feel free to remove them
+    location = /favicon.ico { access_log off; log_not_found off; }
+    location = /robots.txt  { access_log off; log_not_found off; }
+
+    # When a 404 is returned, we want to display our applications 404 page,
+    # so we redirect it to index.php to load the correct page
+    error_page 404 /index.php;
+
+    location / {
+        add_header Access-Control-Allow-Origin *;
+
+        try_files $uri /index.html;
+    }
+
+    location ~ /\.ht {
+        deny all;
+    }
+
+    location ~ /\.(?!well-known).* {
+        deny all;
+    }
+}