Split nginx config; added start of gateway routing

.dockerignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

.gitignore

@@ -0,0 +1,15 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production

Dockerfile

@@ -1,3 +1,25 @@
+# ======Building the project=====
+FROM node:17.2.0 AS builder
+
+WORKDIR /usr/src/app
+
+# Install Node dependencies
+COPY package.json yarn.lock ./
+RUN yarn install
+
+# Copy over source code & build project
+COPY astro.config.mjs tsconfig.json ./
+COPY src/ ./src
+RUN yarn run build
+
+
+# =====Packaging inside an Nginx container=====
 FROM nginx:1.21.4-alpine
 
-COPY default.conf.template /etc/nginx/templates/default.conf.template
+# Copy over the Nginx config files
+COPY nginx/nginx.conf /etc/nginx/nginx.conf
+COPY nginx/*.conf.template /etc/nginx/templates/
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+
+# Copy over build artifacts
+COPY --from=builder /usr/src/app/dist /usr/share/nginx/html

astro.config.mjs

@@ -0,0 +1,13 @@
+// Full Astro Configuration API Documentation:
+// https://docs.astro.build/reference/configuration-reference
+
+// @type-check enabled!
+// VSCode and other TypeScript-enabled text editors will provide auto-completion,
+// helpful tooltips, and warnings if your exported object is invalid.
+// You can disable this by removing "@ts-check" and `@type` comments below.
+
+// @ts-check
+export default /** @type {import('astro').AstroUserConfig} */ ({
+    // Enable the Vue renderer to support Vue components.
+    renderers: ['@astrojs/renderer-vue'],
+});

nginx/default.conf

@@ -0,0 +1,20 @@
+# vim: ft=nginx
+server {
+    listen      80;
+    listen [::]:80;
+
+
+    # =====FRONTEND HOSTING=====
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+    }
+
+    error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

nginx/gateway.conf.template

@@ -0,0 +1,13 @@
+# vim: ft=nginx
+server {
+    listen      80;
+    listen [::]:80;
+
+    location ~ /api/v1/posts/ {
+        proxy_pass http://${RB_BLOG}/api/v1/posts/;
+    }
+
+    location ~ /api/v1/sections/ {
+        proxy_pass http://${RB_BLOG}/api/v1/sections/;
+    }
+}

nginx/matrix.conf.template

@@ -1,14 +1,15 @@
 # vim: ft=nginx
 server {
-    listen 80;
+    listen      80;
     listen [::]:80;
 
+
+    # =====MATRIX WELL-KNOWN FILES=====
     # Used for server federation
-    location ~^/\.well-known/matrix/server$ {
+    location = /.well-known/matrix/server {
         charset utf-8;
         default_type application/json;
 
-
         if ($request_method = 'GET') {
             add_header Access-Control-Allow-Origin '*';
             add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
@@ -28,11 +29,10 @@ server {
         return 405;
     }
 
-    location ~^/\.well-known/matrix/client$ {
+    location = /.well-known/matrix/client {
         charset utf-8;
         default_type application/json;
 
-
         if ($request_method = 'GET') {
             add_header Access-Control-Allow-Origin '*';
             add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
@@ -51,4 +51,5 @@ server {
 
         return 405;
     }
+
 }

nginx/nginx.conf

@@ -0,0 +1,33 @@
+user  nginx;
+worker_processes  auto;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+
+    keepalive_timeout  65;
+
+    gzip  on;
+
+    # This order is important, as the Matrix matches should be evaluated first
+    include /etc/nginx/conf.d/matrix.conf;
+    include /etc/nginx/conf.d/gateway.conf;
+    include /etc/nginx/conf.d/default.conf;
+}

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "rb-web",
+  "version": "0.2.0",
+  "description": "Frontend for the Rusty Bever blogging software.",
+  "repository": "https://git.rustybever.be/rusty-bever/web",
+  "author": "Jef Roosens",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+      "dev": "astro dev",
+      "start": "astro dev",
+      "build": "astro build",
+      "preview": "astro preview",
+      "image": "docker build -t chewingbever/rb-web:0.2.0 ."
+  },
+  "devDependencies": {
+      "astro": "0.21.13",
+      "miragejs": "0.1.43"
+  }
+}

src/components/MenuBar.vue

@@ -0,0 +1,42 @@
+<template>
+    <ul>
+        <li v-for="section in sections">
+            {{ section.title }}
+        </li>
+    </ul>
+</template>
+
+<script setup>
+import { makeServer } from "../mirage/index.js"
+const environment = 'development'
+makeServer({ environment })
+
+/* let sections = [ */
+/*     {"title": "Loading..."} */
+/* ] */
+
+/* fetch("/api/v1/test").then( */
+/*     (res) => { */
+/*         if (res.ok()) { */
+/*             return res.json() */
+/*         }else{ */
+/*             sections = [{"title": "Error"}] */
+/*         } */
+/*     } */
+/* ).then( */
+/*     res => sections = res */
+/* ) */
+</script>
+
+<script>
+export default {
+    data() {
+        return {
+            sections: [{"title": "Loading..."}]
+        }
+    },
+    mounted() {
+        fetch("/api/v1/test").then(res => res.json()).then(res => sections = res)
+    }
+}
+</script>

src/mirage/index.js

@@ -0,0 +1,12 @@
+import { createServer } from 'miragejs';
+
+export function makeServer({ environment = 'test' }) {
+    return createServer({
+        environment,
+        routes() {
+            this.namespace = "api/v1";
+
+            this.get("/test", () => "yeet");
+        }
+    })
+}

src/pages/index.astro

@@ -0,0 +1,14 @@
+---
+import MenuBar from "../components/MenuBar.vue";
+---
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+    </head>
+    <body>
+        <MenuBar client:load />
+        <h1>Hi!</h1>
+    </body>
+</html>
+

tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "moduleResolution": "node"
+}