Adds a docker build (#4121)

* Adds a docker build

* Adds the correct tags

* Sets up the studio port

* Adds quotes around false

* hide local env

* make sure we cover all env files

* only run sentry & analyzer on platform

* Update withAuth

* fixing multi-stage

* fix usage commands

* adds some fake service and anon keys

* Small fix

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

docker/.env.example

@@ -1,7 +1,10 @@
-# Secrets
+# Secrets 
+# YOU MUST CHANGE THESE BEFORE GOING INTO PRODUCTION
 
 POSTGRES_PASSWORD=your-super-secret-and-long-postgres-password
 JWT_SECRET=your-super-secret-jwt-token-with-at-least-32-characters-long
+ANON_KEY=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYyNzIwODU0MCwiZXhwIjoxOTc0MzYzNzQwfQ.zcaQfHd3VA7XgJmdGfmV86OLVJT9s2MTmSy-e69BpUY
+SERVICE_ROLE_KEY=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoic2VydmljZV9yb2xlIiwiaWF0IjoxNjI3MjA4NTQwLCJleHAiOjE5NzQzNjM3NDB9.pkT3PNpO4DtO45Ac5HK_TKCx8sGLgNtV__pr_ZrRSAU
 
 # Auth
 
@@ -27,6 +30,9 @@ ENABLE_PHONE_AUTOCONFIRM=false
 
 # Ports
 
+## Studio port
+STUDIO_PORT=3000
+
 ## API endpoint ports
 KONG_HTTP_PORT=8000
 KONG_HTTPS_PORT=8443

docker/docker-compose.yml

@@ -8,6 +8,17 @@
 version: "3.8"
 
 services:
+  studio:
+    container_name: supabase-studio
+    image: supabase/studio:latest
+    restart: unless-stopped
+    ports:
+      - ${STUDIO_PORT}:3000/tcp
+    environment:
+      SUPABASE_URL: http://kong:8000
+      STUDIO_PG_META_URL: http://meta:8080
+      SUPABASE_SERVICE_KEY: ${SERVICE_ROLE_KEY}
+
   kong:
     container_name: supabase-kong
     image: kong:2.1
@@ -99,8 +110,8 @@ services:
       - rest
     restart: unless-stopped
     environment:
-      ANON_KEY: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYyNzIwODU0MCwiZXhwIjoxOTc0MzYzNzQwfQ.zcaQfHd3VA7XgJmdGfmV86OLVJT9s2MTmSy-e69BpUY
-      SERVICE_KEY: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoic2VydmljZV9yb2xlIiwiaWF0IjoxNjI3MjA4NTQwLCJleHAiOjE5NzQzNjM3NDB9.pkT3PNpO4DtO45Ac5HK_TKCx8sGLgNtV__pr_ZrRSAU
+      ANON_KEY: ${ANON_KEY}
+      SERVICE_KEY: ${SERVICE_ROLE_KEY}
       POSTGREST_URL: http://rest:3000
       PGRST_JWT_SECRET: ${JWT_SECRET}
       DATABASE_URL: postgres://postgres:${POSTGRES_PASSWORD}@db:5432/postgres

studio/.dockerignore

@@ -0,0 +1,7 @@
+node_modules/
+.vercel
+.next
+.env.local
+.env.production
+.env.dev
+.env.*

studio/Dockerfile

@@ -1,24 +1,29 @@
-# Extermely simple setup - should be optimized before sending
-# to docker hub
-
 ## USAGE:
-# docker build -t next .
-# docker run -p 3010:3000 next
+# Build:        docker build --target production -t supabase/studio:latest . 
+# Run:          docker run -p 3000:3000 supabase/studio
+# Deploy:       docker push supabase/studio:latest
+# Clean build:  
+#    docker build --target production --no-cache -t supabase/studio:latest .
+#    docker builder prune
 
-FROM node:16
 
-RUN mkdir -p /home/app/ && chown -R node:node /home/app
-WORKDIR /home/app
-COPY --chown=node:node . .
+FROM node:14 as base
+WORKDIR /usr/src/app
+COPY package*.json ./
 
-# Sometimes need this for the pg-parser
-# RUN apk add --no-cache python build-base gcc g++ libpq
-
-USER node
-
-# Can change to "npm ci" eventually
-RUN npm install 
+FROM base as build
+ENV NODE_ENV=build
+RUN npm install
+COPY . .
 RUN npm run build
 
+FROM build as dev
+ENV NODE_ENV=dev
 EXPOSE 8082
-CMD [ "npm", "start" ]
+CMD [ "npm", "run", "dev" ]
+
+FROM build as production
+ENV NODE_ENV=production
+COPY . .
+EXPOSE 3000
+CMD ["npm", "start"]

studio/hooks/misc/withAuth.tsx

@@ -1,6 +1,6 @@
 import { useProfile, useStore } from 'hooks'
 import { ComponentType, useEffect, useState } from 'react'
-import { flatten } from 'lodash'
+import { flatten, isUndefined } from 'lodash'
 import { NextRouter, useRouter } from 'next/router'
 import { IS_PLATFORM } from 'lib/constants'
 import Connecting from 'components/ui/Loading'
@@ -15,9 +15,6 @@ export function withAuth(
     redirectIfFound?: boolean
   }
 ) {
-  const redirectTo = options?.redirectTo ?? '/'
-  const redirectIfFound = options?.redirectIfFound
-
   return (props: any) => {
     const router = useRouter()
     const rootStore = useStore()
@@ -25,21 +22,19 @@ export function withAuth(
 
     const { ref, slug } = router.query
     const { app, ui } = rootStore
+    const page = router.pathname.split('/')[3]
+
+    const redirectTo = options?.redirectTo ?? (!isUndefined(ref) ? `/project/${ref}` : '/')
+    const redirectIfFound = options?.redirectIfFound
 
     const returning =
       app.projects.isInitialized && app.organizations.isInitialized ? 'minimal' : undefined
     const { profile, isLoading } = useProfile(returning)
 
-    const isRedirecting = checkRedirectTo(isLoading, router, profile, redirectTo, redirectIfFound)
-
-    // We might probably be able to bring this into a _middleware with next 12
-    if (!IS_PLATFORM) {
-      // Hide routes for self-hosted version until features are functionally ready
-      const page = router.pathname.split('/')[3]
-      if (PLATFORM_ONLY_PAGES.includes(page)) {
-        router.push(`/project/${ref}`)
-      }
-    }
+    const isAccessingBlockedPage = !IS_PLATFORM && PLATFORM_ONLY_PAGES.includes(page)
+    const isRedirecting =
+      isAccessingBlockedPage ||
+      checkRedirectTo(isLoading, router, profile, redirectTo, redirectIfFound)
 
     useEffect(() => {
       // this should run before redirecting

studio/next.config.js

@@ -55,4 +55,6 @@ const sentryWebpackPluginOptions = {
 
 // Make sure adding Sentry options is the last code to run before exporting, to
 // ensure that your source maps include changes from all other Webpack plugins
-module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions)
+module.exports = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
+  ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
+  : nextConfig

studio/package.json

@@ -12,6 +12,7 @@
     "@auth0/nextjs-auth0": "^1.6.1",
     "@headlessui/react": "^1.4.1",
     "@monaco-editor/react": "^4.3.1",
+    "@next/bundle-analyzer": "^12.0.4",
     "@radix-ui/react-portal": "^0.1.1",
     "@sentry/browser": "^6.15.0",
     "@sentry/nextjs": "^6.15.0",
@@ -59,7 +60,6 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^12.0.4",
     "@types/crypto-js": "^4.0.2",
     "@types/lodash": "^4.14.172",
     "@types/markdown-table": "^3.0.0",

studio/pages/project/[ref]/sql/index.tsx

@@ -93,7 +93,7 @@ const SqlEditor = observer(() => {
     if (monaco) {
       // Enable pgsql format
       const formatprovider = monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
-        async provideDocumentFormattingEdits(model) {
+        async provideDocumentFormattingEdits(model: any) {
           const value = model.getValue()
           const formatted = await formatPgsql(value)
           return [