Set up docker environment for production

app-reverse-proxy/nginx.conf

@@ -1,4 +1,5 @@
 server {
+    access_log stdout;
     listen 80;
     server_name reverse-proxy;
 
@@ -25,7 +26,8 @@ server {
 
     ## access backend api
     location /api/ {
-        proxy_pass http://$backend/;
+        rewrite ^/api(/.*)$ $1 break;
+        proxy_pass http://$backend;
     }
 
     ## access backend static files

backend/portfolify/settings.py

@@ -41,7 +41,8 @@
     "django.contrib.sites",
     "django.contrib.flatpages",
     "rest_framework",
-    "blog.apps.BlogConfig"
+    "blog.apps.BlogConfig",
+    "portfolify"
 ]
 
 MIDDLEWARE = [

docker-compose.prod.yml

@@ -34,7 +34,7 @@ services:
 
   ## entry point for portfolify app containers
   app-reverse-proxy:
-    image: jermytan/portfolify-reverse-proxy
+    image: jermytan/portfolify-reverse-proxy:production
     volumes:
       - static-volume:/app/static
     networks:
@@ -50,14 +50,14 @@ services:
 
   ## can only be accessed within frontend network
   frontend:
-    image: jermytan/portfolify-frontend
+    image: jermytan/portfolify-frontend:production
     networks:
       - frontend
     restart: always
 
   ## can only be accessed within backend network
   backend:
-    image: jermytan/portfolify-backend
+    image: jermytan/portfolify-backend:production
     command: gunicorn portfolify.wsgi:application --bind 0.0.0.0:8000
     volumes:
       - static-volume:/app/static

docker-compose.stage.yml

@@ -0,0 +1,64 @@
+version: "3.8"
+
+services:
+  ## entry point for portfolify app containers
+  app-reverse-proxy:
+    image: jermytan/portfolify-reverse-proxy:production
+    build:
+      context: ./app-reverse-proxy
+    volumes:
+      - static-volume:/app/static
+    networks:
+      - frontend
+      - backend
+    restart: always
+    ports:
+      - "80:80"
+    depends_on:
+      - frontend
+      - backend
+
+  ## can only be accessed from same network
+  frontend:
+    image: jermytan/portfolify-frontend:production
+    build:
+      context: ./frontend
+      args:
+        REACT_APP_API_URL: portfolify.jermytan.com/api
+    networks:
+      - frontend
+    restart: always
+
+  ## can only be accessed from same network
+  backend:
+    image: jermytan/portfolify-backend:production
+    build:
+      context: ./backend
+    command: gunicorn portfolify.wsgi:application --bind 0.0.0.0:8000
+    volumes:
+      - static-volume:/app/static
+    networks:
+      - backend
+    restart: always
+    env_file:
+      - ./backend/.env.backend.dev
+    depends_on:
+      - db
+
+  db:
+    image: postgres:12-alpine
+    networks:
+      - backend
+    volumes:
+      - postgres-data:/var/lib/postgresql/data/
+    env_file:
+      - ./backend/.env.db.dev
+    restart: always
+
+networks:
+  frontend:
+  backend:
+
+volumes:
+  postgres-data:
+  static-volume:

docker-compose.yml

@@ -23,6 +23,8 @@ services:
     image: jermytan/portfolify-frontend
     build:
       context: ./frontend
+      args:
+        REACT_APP_API_URL: http://localhost/api
     networks:
       - frontend
     restart: always

frontend/Dockerfile

@@ -1,4 +1,5 @@
 FROM node:14.8.0-alpine AS build
+ARG REACT_APP_API_URL
 
 ## set custom working directory
 WORKDIR /app
@@ -10,7 +11,7 @@ COPY . .
 RUN yarn install
 
 ## build project
-RUN yarn build
+RUN REACT_APP_API_URL=${REACT_APP_API_URL} yarn build
 
 
 ## prepare nginx

frontend/src/components/app-home-body/index.tsx

@@ -16,7 +16,7 @@ function AppHomeBody() {
       <LoaderWrapper
         isLoading={isLoading}
         loadingMessage="Retrieving all posts"
-        showDefaultMessage={!!error}
+        showDefaultMessage={!!error || posts.length === 0}
         defaultMessage="No posts found"
       >
         <Grid

frontend/src/components/app-post-body/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import useAxios from "axios-hooks";
 import { useParams } from "react-router-dom";
 import { Container, Segment } from "semantic-ui-react";
@@ -12,7 +12,7 @@ function AppPostBody() {
   const { id } = useParams();
   const [isEditing, setEditing] = useState(false);
   const [{ data: response, loading, error }, getPost] = useAxios({
-    url: `/posts/${id}`,
+    url: `/posts/${id}/`,
     method: "get",
     baseURL: process.env.REACT_APP_API_URL,
   });
@@ -27,6 +27,12 @@ function AppPostBody() {
     { manual: true }
   );
 
+  useEffect(() => {
+    if (error) {
+      console.log(error, error?.response);
+    }
+  }, [error]);
+
   const onSaveChanges = async (data: FormFieldProps) => {
     const { encodedImageData, title, content } = data;
     await putPost({

frontend/src/components/delete-post-button/index.tsx

@@ -28,7 +28,7 @@ function DeletePostButton({ className, id }: Props) {
       setDeleting(false);
       history.push("/");
     } catch (error) {
-      console.log(error);
+      console.log(error, error?.response);
       toast.error("An unkown error has occurred.");
     }
   };

frontend/src/components/image-cropper/index.tsx

@@ -72,7 +72,7 @@ function ImageCropper({
         (await getCroppedImage(image, croppedAreaPixels, rotation)) ?? "";
       onCropImage(croppedImage);
     } catch (error) {
-      console.log(error);
+      console.log(error, error?.response);
     }
     setCropping(false);
   };
@@ -95,11 +95,11 @@ function ImageCropper({
           onCropChange={setCrop}
           onZoomChange={setZoom}
           onCropComplete={(croppedArea, croppedAreaPixels) => {
-            console.log(croppedArea, croppedAreaPixels);
             setCroppedAreaPixes(croppedAreaPixels);
           }}
           showGrid={false}
           minZoom={0.75}
+          maxZoom={4}
           restrictPosition={false}
           rotation={rotation}
           onRotationChange={onRotationChange}

frontend/src/components/image-upload-cropper/index.tsx

@@ -88,7 +88,6 @@ function ImageUploadCropper({
             onFinalizeImage?.({ ...uploadedImageData, data: image });
           }}
           onCancel={() => setUploadedImageData(undefined)}
-          enableRotation={true}
         />
       );
     } else {

frontend/src/components/post-form/index.tsx

@@ -51,7 +51,7 @@ function PostForm({
       });
       reset();
     } catch (error) {
-      console.log(error);
+      console.log(error, error?.response);
       toast.error("An unkown error has occurred.");
     }
 

frontend/src/context-providers/post-provider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext } from "react";
+import React, { createContext, useEffect } from "react";
 import useAxios from "axios-hooks";
 import { AxiosError } from "axios";
 
@@ -37,13 +37,19 @@ type Props = {
 function PostProvider({ children }: Props) {
   const [{ data: response, loading, error }, refetch] = useAxios(
     {
-      url: "/posts",
+      url: "/posts/",
       method: "get",
       baseURL: process.env.REACT_APP_API_URL,
     },
     { manual: true }
   );
 
+  useEffect(() => {
+    if (error) {
+      console.log(error, error?.response);
+    }
+  }, [error]);
+
   return (
     <PostContext.Provider
       value={{

frontend/src/index.tsx

@@ -4,6 +4,8 @@ import "./index.scss";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
+console.log(process.env);
+
 ReactDOM.render(
   <React.StrictMode>
     <App />