Add frontend setting to docker-compose

Author: Hironsan

docker-compose.prod.yml

@@ -17,10 +17,16 @@ services:
     depends_on:
       - postgres
 
+  frontend:
+    build: ./frontend
+    volumes:
+      - www:/app/dist
+
   nginx:
     build: ./nginx
     volumes:
       - static_volume:/home/app/web/staticfiles
+      - www:/var/www/html:ro
     ports:
       - 1337:80
     depends_on:
@@ -40,3 +46,4 @@ services:
 volumes:
   postgres_data:
   static_volume:
+  www:

frontend/.dockerignore

@@ -0,0 +1,6 @@
+**/bundle/
+**/node_modules/
+**/webpack-stats.json
+
+**/.env
+**/coverage/

frontend/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:13.1.0
+
+# set work directory
+WORKDIR /app
+
+# set environment variables
+# ENV PYTHONDONTWRITEBYTECODE 1
+
+# copy project
+COPY . /app/
+
+# install dependencies
+RUN npm install -g npm@latest
+RUN npm install
+
+# build project
+RUN npm run build
+RUN ls -l

frontend/services/api.service.js

@@ -1,5 +1,6 @@
 import axios from 'axios'
 const baseURL = 'http://127.0.0.1:8000/v1' // Todo: change URL by development/staging/production.
+// const baseURL = '/v1'
 
 class ApiService {
   constructor() {

nginx/nginx.conf

@@ -2,6 +2,11 @@ server {
     listen 80;
     charset utf-8;
 
+    location / {
+        root /var/www/html;
+        try_files $uri $uri/ /index.html;
+    }
+
     location /v1/ {
         proxy_pass http://backend:8000/v1/;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;