Host React SPA with docker

docker-compose.yml

@@ -1,6 +1,19 @@
 version: '3.7'
 
 services:
+  conduit-www:
+    build:
+      context: ./nginx
+      args:
+        - UPSTREAM=http://conduit-server:8080/api
+    depends_on:
+      - conduit-server
+    ports:
+      - "8000:80"
+    restart: on-failure
+    networks:
+      - intranet
+
   conduit-server:
     build: .
     depends_on:

nginx/Dockerfile

@@ -0,0 +1,26 @@
+FROM node:lts-slim as builder
+
+ARG DEBIAN_FRONTEND=noninteractive
+
+RUN apt update
+
+RUN apt install git -y
+
+WORKDIR /app
+
+RUN git clone --depth=1 https://github.com/khaledosman/react-redux-realworld-example-app.git .
+RUN sed -i "s#https://conduit.productionready.io/api#/api#" ./src/agent.js
+
+RUN yarn install
+
+RUN yarn build
+
+FROM nginx:1.21.6-alpine
+
+ARG UPSTREAM="http://localhost:8080"
+
+COPY --from=builder /app/build /srv
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+RUN sed -i "s#<upstream>#$UPSTREAM#" /etc/nginx/conf.d/default.conf
+
+EXPOSE 80

nginx/nginx.conf

@@ -0,0 +1,14 @@
+server{
+	listen 80;
+	server_name _;
+
+	location / {
+		root /srv;
+		index index.html;
+		try_files $uri $uri/ /index.html;
+	}
+
+	location /api {
+		proxy_pass <upstream>;
+	}
+}

src/Conduit/Api/Tag.hs

@@ -16,7 +16,10 @@ import Conduit.Db
 import Conduit.App
 
 newtype TagsResponse = TagsResponse
-    { tags :: [Text] } deriving (Generic, ToJSON)
+    { tags :: [Text] } deriving (Generic)
+
+instance ToJSON TagsResponse where
+    toJSON (TagsResponse a) = object ["tags" .= a]
 
 type TagApi = "tags" :> Get '[JSON] TagsResponse