From 7f8efc86f092648edd31f383e0859debddca1be5 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Mon, 28 Nov 2022 00:10:00 +0300
Subject: [PATCH] docker: pass env variables to web app

---
 .env                         |  5 ++++-
 apps/web/Dockerfile          |  5 +++--
 apps/web/components/Form.jsx |  6 ++++--
 apps/web/config/constants.js |  2 --
 apps/web/next.config.js      |  9 ++++++++-
 apps/web/pages/_app.tsx      |  4 +---
 apps/web/pages/_document.tsx |  6 ++++--
 apps/web/pages/index.jsx     |  8 +++++---
 docker-compose.yml           | 11 ++++++++---
 9 files changed, 37 insertions(+), 19 deletions(-)
 delete mode 100644 apps/web/config/constants.js

diff --git a/.env b/.env
index 6c598c9..eee2926 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,8 @@
 NETWORK_NAME=
-BASE_PATH=
+
+WEB_BASE_PATH=
+WEB_APP_TITLE=
+WEB_APP_DESCRIPTION=
 
 LDAP_BIND_DN=
 LDAP_BIND_CREDENTIALS=
diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
index ea88762..43c45b0 100644
--- a/apps/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -16,6 +16,7 @@ FROM node:16-alpine AS installer
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
+
 ENV NEXT_TELEMETRY_DISABLED 1
 
 # First install the dependencies (as they change less often)
@@ -24,11 +25,10 @@ COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/yarn.lock ./yarn.lock
 RUN yarn install
 
-ARG NEXT_PUBLIC_COLOR_PRIMARY
-
 # Build the project
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
+
 RUN yarn turbo run build --filter=web...
 
 FROM node:16-alpine AS runner
@@ -42,6 +42,7 @@ RUN adduser --system --uid 1001 nextjs
 USER nextjs
 
 COPY --from=installer /app/apps/web/next.config.js .
+COPY --from=installer /app/apps/web/public ./public
 COPY --from=installer /app/apps/web/package.json .
 
 # Automatically leverage output traces to reduce image size
diff --git a/apps/web/components/Form.jsx b/apps/web/components/Form.jsx
index 0b950d7..43e07f9 100644
--- a/apps/web/components/Form.jsx
+++ b/apps/web/components/Form.jsx
@@ -2,9 +2,11 @@ import Input from 'elements/Input';
 import Button from 'elements/Button';
 import styles from './Form.module.scss';
 import { H3 } from 'elements/H';
-import { title } from 'config/constants';
 import { useRouter } from 'next/router';
 import Error from 'elements/Error';
+import getConfig from 'next/config';
+
+const { publicRuntimeConfig: config } = getConfig();
 
 export default function Form() {
   const router = useRouter();
@@ -13,7 +15,7 @@ export default function Form() {
 
   return (
     <form className={styles.form} method="post" action="/signin">
-      <H3>{title}</H3>
+      <H3>{config.appTitle}</H3>
       <Input name="login" type="text" placeholder="Логин" required autoComplete="on" />
       <Input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
       {error}
diff --git a/apps/web/config/constants.js b/apps/web/config/constants.js
deleted file mode 100644
index 5021756..0000000
--- a/apps/web/config/constants.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const title = process.env.NEXT_PUBLIC_APP_NAME;
-export const description = [process.env.NEXT_PUBLIC_APP_NAME, 'Эволюция'].join(' | ');
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index da80bb6..1697637 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -1,14 +1,21 @@
 const path = require('path');
 
+const runtimeConfig = {
+  appTitle: process.env.APP_TITLE,
+  description: process.env.APP_DESCRIPTION,
+};
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  basePath: process.env.BASE_PATH,
   output: 'standalone',
   reactStrictMode: true,
   swcMinify: true,
   eslint: {
     ignoreDuringBuilds: true,
   },
+  serverRuntimeConfig: runtimeConfig,
+  publicRuntimeConfig: runtimeConfig,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 892ce62..1cd013d 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -16,9 +16,7 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <style jsx global>{`
         :root {
-          --color-primary: ${process.env.NEXT_PUBLIC_COLOR_PRIMARY};
-          --color-secondary: ${process.env.NEXT_PUBLIC_COLOR_SECONDARY};
-          --color-tertiarty: ${process.env.NEXT_PUBLIC_COLOR_TERTIARTY};
+          --color-primary: #1c01a9;
         }
         html {
           font-size: 14px;
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index ea473c3..8c839f6 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -1,5 +1,7 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
-import { description } from '../config/constants';
+import getConfig from 'next/config';
+
+const { serverRuntimeConfig: config } = getConfig();
 
 export default class MyDocument extends Document {
   render() {
@@ -7,7 +9,7 @@ export default class MyDocument extends Document {
       <Html lang="ru" translate="no">
         <Head>
           <meta charSet="utf-8" />
-          <meta name="description" content={description} />
+          <meta name="description" content={config.description} />
 
           <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
diff --git a/apps/web/pages/index.jsx b/apps/web/pages/index.jsx
index 523aad7..2b12da3 100644
--- a/apps/web/pages/index.jsx
+++ b/apps/web/pages/index.jsx
@@ -1,11 +1,13 @@
 import Head from 'next/head';
-import { description, title } from 'config/constants';
 import Login from 'components/Login';
+import getConfig from 'next/config';
+
+const { publicRuntimeConfig: config } = getConfig();
 
 function PageHead() {
   return (
     <Head>
-      <title>{`Вход - ${title}`}</title>
+      <title>{`Вход - ${config.description}`}</title>
     </Head>
   );
 }
@@ -13,7 +15,7 @@ function PageHead() {
 export default function Home() {
   return (
     <>
-      <PageHead title={description} />
+      <PageHead title={config.description} />
       <Login />
     </>
   );
diff --git a/docker-compose.yml b/docker-compose.yml
index 22b08ff..1506270 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,8 +7,13 @@ services:
       context: .
       dockerfile: ./apps/web/Dockerfile
     environment:
-      - NEXT_PUBLIC_BASE_PATH=${BASE_PATH}
-    restart: always
+      - BASE_PATH=${WEB_BASE_PATH}
+      - APP_TITLE=${WEB_APP_TITLE}
+      - APP_DESCRIPTION=${WEB_APP_DESCRIPTION}
+    restart: always    
+    ports:
+      - 3000:3000
+    
 
   api:
     container_name: api
@@ -25,7 +30,7 @@ services:
       - SECRET=${API_SECRET}
       - TOKEN_TTL=${API_TOKEN_TTL}
       - CACHE_TTL=${API_CACHE_TTL}
-      - REDIS_HOST=${API_REDIS_HOST}
+      - REDIS_HOST=redis
     restart: always
     networks:
       - auth_network