chore(ui, api): update config for deployment (#510)

* dump

* dump

* feat(ui, api): update config

* add simple workflow

* remove redundant file

* remove redundant file

* rename flow config to reearth config

* ui: lint and better error on start.sh

* remove redundant binary

api/.env.example

@@ -1,8 +1,8 @@
 # General
-PORT=8081
+PORT=8080
 REEARTH_FLOW_DB=mongodb://localhost
-REEARTH_FLOW_HOST=https://localhost:8081
-REEARTH_FLOW_ASSETBASEURL=https://localhost:8081/assets
+REEARTH_FLOW_HOST=https://localhost:8080
+REEARTH_FLOW_ASSETBASEURL=https://localhost:8080/assets
 REEARTH_FLOW_DEV=false
 
 

api/Dockerfile

@@ -4,8 +4,9 @@ ARG VERSION
 
 RUN apk add --update --no-cache git ca-certificates build-base
 
-COPY go.mod go.sum main.go /reearth-flow/
 WORKDIR /reearth-flow
+
+COPY go.mod go.sum main.go /reearth-flow/
 RUN go mod download
 
 COPY cmd/ /reearth-flow/cmd/
@@ -17,9 +18,9 @@ RUN CGO_ENABLED=0 go build -tags "${TAG}" "-ldflags=-X main.version=${VERSION} -
 FROM scratch
 
 COPY --from=build /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
-COPY --from=build /reearth/reearth-flow /reearth/reearth-flow
-COPY ui* /reearth/ui/
+COPY --from=build /reearth-flow/reearth-flow /reearth-flow/reearth-flow
+COPY ui* /reearth-flow/ui/
 
 WORKDIR /reearth-flow
 
-CMD [ "./reearth-flow" ]
+CMD ["./reearth-flow"]

api/docker-compose.yml

@@ -2,22 +2,21 @@ version: "3"
 services:
   reearth-flow-api:
     image: reearth/reearth-flow:latest
+    build:
+      context: .
+      dockerfile: Dockerfile
     environment:
-      REEARTH_DB: mongodb://reearth-flow-mongo
+      REEARTH_FLOW_DB: mongodb://reearth-flow-mongo
+      PORT: 8080
     ports:
-      - "8081:8080"
-    # env_file:
-    #  - ./.env
-    links:
-      - reearth-flow-mongo
+      - "8080:8080"
     depends_on:
       - reearth-flow-mongo
     volumes:
-      - ./data:/reearth-flow/data
+      - ./data:/app/data
   reearth-flow-mongo:
     image: mongo:6-focal
     ports:
-      - 12345:12345
+      - 27017:27017
     volumes:
       - ./mongo:/data/db
-    command: mongod --port 12345

api/internal/app/config/config.go

@@ -23,9 +23,9 @@ func init() {
 type Mailer mailer.Mailer
 type Config struct {
 	mailer.Config
-	Port             string            `default:"8081" envconfig:"PORT"`
+	Port             string            `default:"8080" envconfig:"PORT"`
 	ServerHost       string            `pp:",omitempty"`
-	Host             string            `default:"http://localhost:8081"`
+	Host             string            `default:"http://localhost:8080"`
 	Host_Web         string            `pp:",omitempty"`
 	Dev              bool              `pp:",omitempty"`
 	DB               string            `default:"mongodb://localhost"`
@@ -37,7 +37,7 @@ type Config struct {
 	Profiler         string            `pp:",omitempty"`
 	Tracer           string            `pp:",omitempty"`
 	TracerSample     float64           `pp:",omitempty"`
-	AssetBaseURL     string            `default:"http://localhost:8081/assets"`
+	AssetBaseURL     string            `default:"http://localhost:8080/assets"`
 	Origins          []string          `pp:",omitempty"`
 	Web_Disabled     bool              `pp:",omitempty"`
 	Web_App_Disabled bool              `pp:",omitempty"`

api/internal/app/main.go

@@ -73,7 +73,7 @@ type ServerConfig struct {
 func NewServer(ctx context.Context, cfg *ServerConfig) *WebServer {
 	port := cfg.Config.Port
 	if port == "" {
-		port = "8081"
+		port = "8080"
 	}
 
 	host := cfg.Config.ServerHost

api/internal/app/repo.go

@@ -22,7 +22,7 @@ import (
 	"go.opentelemetry.io/contrib/instrumentation/go.mongodb.org/mongo-driver/mongo/otelmongo"
 )
 
-const databaseName = "flow"
+const databaseName = "reearth-flow"
 
 func initReposAndGateways(ctx context.Context, conf *config.Config, debug bool) (*repo.Container, *gateway.Container, *accountrepo.Container, *accountgateway.Container) {
 	gateways := &gateway.Container{}

ui/.env-local

@@ -1,5 +1,5 @@
 # API
-FLOW_API=http://localhost:8081
+FLOW_API=http://localhost:8080
 
 # Auth0
 FLOW_AUTH0_CLIENT_ID=samople_ID

ui/.gitignore

@@ -13,7 +13,7 @@ dist
 dist-ssr
 *.local
 .env
-flow-config.json
+reearth_config.json
 
 # Editor directories and files
 .vscode/*

ui/Dockerfile

@@ -1,19 +1,32 @@
+# syntax=docker/dockerfile:1
 FROM node:lts as build
 
-COPY package.json yarn.lock ./
-
-RUN yarn install
+WORKDIR /app
 
 COPY . .
 
+RUN corepack enable
+RUN corepack prepare yarn@4.3.1 --activate
+
+RUN yarn install
+
 RUN yarn build
 
 FROM nginx:stable
 
+COPY --from=build app/dist /usr/share/nginx/html
+
+COPY reearth_config.template.json /usr/share/nginx/html/
+
 RUN rm /etc/nginx/conf.d/default.conf
 
-COPY nginx.conf /etc/nginx/conf.d
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN apt-get update && apt-get install -y gettext-base && rm -rf /var/lib/apt/lists/*
+
+COPY start.sh /start.sh
+RUN chmod +x /start.sh
 
-COPY --from=build ./dist /usr/share/nginx/html
+EXPOSE 3000
 
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["/start.sh"]

ui/docker-compose.yml

@@ -1,11 +1,15 @@
 version: "3"
 services:
   reearth-flow-ui:
+    image: reearth/reearth-flow-ui:latest
     build:
       context: .
       dockerfile: Dockerfile
     ports:
-      - "80:80"
+      - "3000:3000"
     volumes:
-      - ./dist:/usr/share/nginx/html
-      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+      - ./ui:/app
+      - /app/node_modules
+    environment:
+      - NODE_ENV=development
+    command: ["nginx", "-g", "daemon off;"]

ui/nginx.conf

@@ -1,5 +1,5 @@
 server {
-    listen 8080;
+    listen 3000;
     server_name localhost;
 
     root /usr/share/nginx/html;
@@ -8,4 +8,17 @@ server {
     location / {
         try_files $uri $uri/ /index.html;
     }
+
+    # location /websocket {
+    #     proxy_pass http://websocket-server-url;
+    #     proxy_http_version 1.1;
+    #     proxy_set_header Upgrade $http_upgrade;
+    #     proxy_set_header Connection "upgrade";
+    #     proxy_set_header Host $host;
+    # }
+
+     location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
+        expires 1y;
+        add_header Cache-Control "public, max-age=31536000";
+    }
 }

ui/reearth_config.template.json

@@ -0,0 +1,11 @@
+{
+  "api": "${FLOW_API}",
+  "auth0Audience": "${FLOW_AUTH0_AUDIENCE}",
+  "auth0ClientId": "${FLOW_AUTH0_CLIENT_ID}",
+  "auth0Domain": "${FLOW_AUTH0_DOMAIN}",
+  "brandName": "${FLOW_BRAND_NAME}",
+  "devMode": "${FLOW_DEV_MODE}",
+  "documentationUrl": "${FLOW_DOCUMENTATION_URL}",
+  "tosUrl": "${FLOW_TOS_URL}",
+  "version": "${FLOW_VERSION}"
+}

ui/src/config/index.ts

@@ -4,7 +4,7 @@ declare global {
   let __APP_VERSION__: string;
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface Window {
-    FLOW_CONFIG?: Config;
+    REEARTH_CONFIG?: Config;
     FLOW_E2E_ACCESS_TOKEN?: string;
   }
 }
@@ -27,24 +27,24 @@ const defaultConfig: Config = {
 };
 
 export default async function loadConfig() {
-  if (window.FLOW_CONFIG) return;
+  if (window.REEARTH_CONFIG) return;
 
-  window.FLOW_CONFIG = defaultConfig;
+  window.REEARTH_CONFIG = defaultConfig;
 
   const config: Config = {
     ...defaultConfig,
-    ...(await (await fetch("/flow_config.json")).json()),
+    ...(await (await fetch("/reearth_config.json")).json()),
   };
 
-  if (window.FLOW_CONFIG.brandName) {
-    document.title = window.FLOW_CONFIG.brandName + " v" + config.version;
+  if (window.REEARTH_CONFIG.brandName) {
+    document.title = window.REEARTH_CONFIG.brandName + " v" + config.version;
   }
 
-  window.FLOW_CONFIG = config;
+  window.REEARTH_CONFIG = config;
 }
 
 export function config(): Config {
-  return window.FLOW_CONFIG ?? {};
+  return window.REEARTH_CONFIG ?? {};
 }
 
 export * from "./authInfo";

ui/start.sh

@@ -0,0 +1,20 @@
+#!/bin/sh
+
+# Signal handling
+trap 'echo "Shutting down..."; nginx -s quit; exit 0' SIGTERM SIGINT
+
+# Generate the reearth_config.json from the template
+envsubst < /usr/share/nginx/html/reearth_config.template.json > /usr/share/nginx/html/reearth_config.json
+if [ $? -ne 0 ]; then
+    echo "Error generating flow_config.json"
+    exit 1
+fi
+
+# Start nginx
+nginx -g 'daemon off;' &
+
+# Wait for any process to exit
+wait -n
+
+# Exit with status of process that exited first
+exit $?

ui/vite.config.ts

@@ -55,15 +55,15 @@ export default defineConfig(() => {
 
 function config(): Plugin {
   return {
-    name: "flow-config",
+    name: "reearth_config",
     async configureServer(server) {
       const envs = loadEnv(
         server.config.mode,
         server.config.envDir ?? process.cwd(),
         server.config.envPrefix,
       );
-      const remoteConfig = envs.FLOW_CONFIG_URL
-        ? await (await fetch(envs.FLOW_CONFIG_URL)).json()
+      const remoteConfig = envs.REEARTH_CONFIG_URL
+        ? await (await fetch(envs.REEARTH_CONFIG_URL)).json()
         : {};
 
       const configRes = JSON.stringify(
@@ -73,14 +73,14 @@ function config(): Plugin {
           ...readEnv("FLOW", {
             source: envs,
           }),
-          ...loadJSON("./flow-config.json"),
+          ...loadJSON("./reearth_config.json"),
         },
         null,
         2,
       );
 
       server.middlewares.use((req, res, next) => {
-        if (req.method === "GET" && req.url === "/flow_config.json") {
+        if (req.method === "GET" && req.url === "/reearth_config.json") {
           res.statusCode = 200;
           res.setHeader("Content-Type", "application/json");
           res.write(configRes);