Commit 6e677a72 authored by Markus Mößler's avatar Markus Mößler
Browse files

included nginx as reverse proxy between front and backend

parent e3751725

docker-compose.yml

+13 −0
Original line number Diff line number Diff line
@@ -46,6 +46,19 @@ services: 
    networks:

      - app-network      



  nginx:

    image: nginx:latest

    ports:

      - "80:80"

    volumes:

      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro

      - ./react-frontend/my-react-app/build:/usr/share/nginx/html:ro

    depends_on:

      - react-frontend

      - tornado-backend

    networks:

      - app-network



networks:

  app-network:

    driver: bridge
 
 No newline at end of file

nginx/nginx.conf

0 → 100644
+48 −0
Original line number Diff line number Diff line 
 

# nginx/nginx.conf



events { }



http {

    

    # upstream react {

    #     server react-frontend:3000;

    # }



    upstream tornado {

        server tornado-backend:8888;

    }



    server {

        listen 80;



        include /etc/nginx/mime.types; # after this serving of static .css works! (are included by default in nginx container)



        # Serve static frontend files

        root /usr/share/nginx/html;

        index index.html;



        location / {

            try_files $uri /index.html;

        }



        # # Proxy frontend

        # location / {

        #     proxy_pass http://react;

        #     proxy_http_version 1.1;

        #     proxy_set_header Upgrade $http_upgrade;

        #     proxy_set_header Connection 'upgrade';

        #     proxy_set_header Host $host;

        #     proxy_cache_bypass $http_upgrade;

        # }



        # Proxy API calls to backend

        location /tornado-backend/ {

            proxy_pass http://tornado;

            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;

        }

    }

}

react-frontend/my-react-app/package.json

+0 −1
Original line number Diff line number Diff line
@@ -2,7 +2,6 @@ 
  "name": "app",

  "version": "0.1.0",

  "private": true,

  "proxy": "http://tornado-backend:8888",

  "dependencies": {

    "bootstrap": "^5.3.3",

    "cra-template": "1.2.0",

react-frontend/my-react-app/src/components/BlogEntries.js

+2 −1
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ 


import React, { useState, useEffect } from "react";

import { NavLink } from "react-router-dom";

import config from '../config';



const BlogEntries = () => {

  const [entries, setEntries] = useState([]);
@@ -12,7 +13,7 @@ const BlogEntries = () => { 
    // Fetch blog entries from the backend

    const fetchEntries = async () => {

      try {

        const response = await fetch("/tornado-backend/blog-entries"); // Replace with your actual API endpoint

        const response = await fetch(`${config.backendBaseUrl}/blog-entries`); // Replace with your actual API endpoint

        if (!response.ok) {

          throw new Error(`HTTP error! Status: ${response.status}`);

        }

react-frontend/my-react-app/src/components/CreateBlogEntry.js

+2 −1
Original line number Diff line number Diff line
@@ -3,6 +3,7 @@ 
import React, { useState } from 'react';

import { Link } from "react-router-dom";

import Cookies from 'js-cookie';

import config from '../config';



const CreateBlogEntry = () => {

  const [title, setTitle] = useState('');
@@ -31,7 +32,7 @@ const CreateBlogEntry = () => { 
        headers['X-XSRFToken'] = csrfToken; // Add the CSRF token to the headers

      }      



      const response = await fetch('/tornado-backend/create-blog-entry', {

      const response = await fetch(`${config.backendBaseUrl}/create-blog-entry`, {

        method: 'POST',

        headers: headers,

        credentials: 'include', // To include cookies for authentication