Dockerise project + attempt to configure LetsEncrypt

- got ratelimited while messing about with certbot volume not updating
  so will try again tomorrow

.gitignore

@@ -123,16 +123,15 @@ node_modules/
 
 # App config
 /config.json
-
-# Generated by build
-/src/rikk.it/wwwroot/css/less
-min/
-out/
-public/
-typings/
-/src/generator/config.json
+.env
 
 # Terraform
 /terraform/.terraform/
 /terraform/terraform.tfvars
 /terraform/terraform.tf
+
+# Certbot data
+data/certbot/conf/*
+!data/certbot/conf/letsencrypt-recommended-ssl.conf
+!data/certbot/conf/letsencrypt-dhparams.pem
+data/certbot/www/*

README.md

@@ -2,21 +2,15 @@
 
 This is the source for [rikk.it](http://rikk.it). The site is built using JQuery/TypeScript and a static site generator written in C#.
 
-# Setup (PowerShell/ Windows)
+# Setup (dev)
 
-```
-# first install npm and MSBuild for C# 6
+Run in WSL 2 (Ubuntu)
 
-Set-Alias msbuild "C:\Program Files (x86)\MSBuild\14.0\Bin\MSBuild.exe"
+## Containers
 
-npm install -g brunch
-npm install -g typings
-npm install
-typings install
-nuget restore
-
-./build.ps1
-```
+1. Get DO API key and save to ~/.digitalocean.ini `dns_digitalocean_token = xxxxx`
+1. Create SSL cert for local dev `dc run --entrypoint certbot certbot certonly  --dns-digitalocean --dns-digitalocean-credentials /root/.digitalocean.ini --agree-tos --email [email protected] --domain dev.rikk.it`
+1. 
 
 # Licence
 

data/certbot/conf/letsencrypt-dhparams.pem

@@ -0,0 +1,8 @@
+-----BEGIN DH PARAMETERS-----
+MIIBCAKCAQEA//////////+t+FRYortKmq/cViAnPTzx2LnFg84tNpWp4TZBFGQz
++8yTnc4kmz75fS/jY2MMddj2gbICrsRhetPfHtXV/WVhJDP1H18GbtCFY2VVPe0a
+87VXE15/V8k1mE8McODmi3fipona8+/och3xWKE2rec1MKzKT0g6eXq8CrGCsyT7
+YdEIqUuyyOP7uWrat2DX9GgdT0Kj3jlN9K5W7edjcrsZCwenyO4KbXCeAvzhzffi
+7MA0BM0oNC9hkXL+nOmFg/+OTxIy7vKBg8P+OxtMb61zO7X8vC7CIAXFjvGDfRaD
+ssbzSibBsu/6iGtCOGEoXJf//////////wIBAg==
+-----END DH PARAMETERS-----

data/certbot/conf/letsencrypt-recommended-ssl.conf

@@ -0,0 +1,14 @@
+# This file contains important security parameters. If you modify this file
+# manually, Certbot will be unable to automatically provide future security
+# updates. Instead, Certbot will print and log an error message with a path to
+# the up-to-date file that you will need to refer to when manually updating
+# this file.
+
+ssl_session_cache shared:le_nginx_SSL:10m;
+ssl_session_timeout 1440m;
+ssl_session_tickets off;
+
+ssl_protocols TLSv1.2 TLSv1.3;
+ssl_prefer_server_ciphers off;
+
+ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384";

docker-compose.override.yml

@@ -0,0 +1,39 @@
+version: '3.3'
+
+services:
+  frontend:
+    command: yarn dev
+    volumes:
+      - ./node_modules:/usr/src/backend/node_modules
+    environment:
+      HTTPS_PROXY: https://proxy
+  backend:
+    command: yarn dev
+    volumes:
+      - ./node_modules:/usr/src/backend/node_modules
+      - ./src/backend/.tmp:/usr/src/backend/.tmp
+      - ./src/backend/public:/usr/src/backend/public
+    ports:
+      - "1337:1337"
+  proxy:
+    volumes:
+      - ./src/proxy/nginx.dev.conf:/etc/nginx/conf.d/nginx.conf
+      - ./data/certbot/conf:/etc/letsencrypt
+      - ./data/certbot/www:/var/www/certbot
+    networks:
+      default:
+        ipv4_address: 172.33.0.80
+    extra_hosts:
+      - "dev.rikk.it:172.33.0.80"
+      - "api-dev.rikk.it:172.33.0.80"
+  certbot:
+    volumes:
+      - ~/.digitalocean.ini:/root/.digitalocean.ini
+      - ./data/certbot/conf:/etc/letsencrypt
+      - ./data/certbot/www:/var/www/certbot
+networks:
+  default:
+    ipam:
+      driver: default
+      config:
+        - subnet: 172.33.0.0/16

docker-compose.yml

@@ -0,0 +1,27 @@
+version: '3.3'
+
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: src/frontend/Dockerfile
+    environment:
+      STRAPI_PREVIEW_SECRET:
+      NEXT_PUBLIC_STRAPI_API_URL:
+  backend:
+    build:
+      context: .
+      dockerfile: src/backend/Dockerfile
+  proxy:
+    image: nginx:1.19-alpine
+    ports:
+      - "80:80"
+      - "443:443"
+    command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"
+    depends_on:
+      - frontend
+      - backend
+  # https://medium.com/@pentacent/nginx-and-lets-encrypt-with-docker-in-less-than-5-minutes-b4b8a60d3a71
+  certbot:
+    image: certbot/dns-digitalocean
+    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"

package.json

@@ -7,11 +7,6 @@
   },
   "version": "0.0.1",
   "dependencies": {
-    "jquery": "3.5.0",
-    "jquery-cycle": "3.0.3",
-    "jquery-easing": "*",
-    "mousetrap": "^1.6.0",
-    "nprogress": "0.2.0"
   },
   "devDependencies": {
     "typescript": "~3.9"

src/backend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:12
+RUN yarn global add package-json-merge
+
+RUN mkdir /usr/src/backend
+WORKDIR /usr/src/backend
+
+COPY /src/backend/api api
+COPY /src/backend/config config
+COPY /src/backend/extensions extensions
+COPY /src/backend/favicon.ico favicon.ico
+
+COPY /src/backend/package.json package.local.json
+COPY package.json package.root.json
+RUN package-json-merge package.local.json package.root.json > package.json
+
+COPY yarn.lock yarn.lock
+RUN yarn install
+
+CMD ["yarn", "dev"]

src/backend/public/robots.txt

@@ -0,0 +1,3 @@
+# To prevent search engines from seeing the site altogether, uncomment the next two lines:
+# User-Agent: *
+# Disallow: /

src/frontend/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:12
+RUN yarn global add package-json-merge
+
+RUN mkdir /usr/src/frontend
+WORKDIR /usr/src/frontend
+
+COPY src/frontend/components components
+COPY src/frontend/lib lib
+COPY src/frontend/pages pages
+COPY src/frontend/styles styles
+COPY src/frontend/public public
+COPY src/frontend/next-env.d.ts next-env.d.ts
+COPY src/frontend/postcss.config.js postcss.config.js
+COPY src/frontend/tailwind.config.js tailwind.config.js
+COPY src/frontend/tsconfig.json tsconfig.json
+
+COPY /src/frontend/package.json package.local.json
+COPY package.json package.root.json
+RUN package-json-merge package.local.json package.root.json > package.json
+
+COPY yarn.lock yarn.lock
+RUN yarn install
+
+CMD ["yarn", "dev"]

src/frontend/components/post-header.js

@@ -11,7 +11,7 @@ export default function PostHeader({ title, coverImage, date, author }) {
         <Avatar name={author.name} picture={author.picture} />
       </div>
       <div className="mb-8 md:mb-16 -mx-5 sm:mx-0">
-        <CoverImage title={title} url={coverImage.url} />
+        <CoverImage title={title} url={coverImage?.url} />
       </div>
       <div className="max-w-2xl mx-auto">
         <div className="block md:hidden mb-6">

src/frontend/components/post-preview.js

@@ -14,7 +14,7 @@ export default function PostPreview({
   return (
     <div>
       <div className="mb-5">
-        <CoverImage slug={slug} title={title} url={coverImage.url} />
+        <CoverImage slug={slug} title={title} url={coverImage?.url} />
       </div>
       <h3 className="text-3xl mb-3 leading-snug">
         <Link as={`/posts/${slug}`} href="/posts/[slug]">

src/frontend/lib/api.js

@@ -89,9 +89,6 @@ export async function getPostAndMorePosts(slug, preview) {
       created_at
       excerpt
       content
-      ogImage: coverImage{
-        url
-      }
       coverImage {
         url
       }

src/frontend/package.json

@@ -1,6 +1,7 @@
 {
-  "name": "cms-strapi",
+  "name": "frontend",
   "version": "1.0.0",
+  "private": true,
   "scripts": {
     "dev": "next",
     "build": "next build",
@@ -17,6 +18,8 @@
     "remark-html": "11.0.2"
   },
   "devDependencies": {
+    "@types/node": "~12",
+    "@types/react": "^16.9.41",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^1.4.6"

src/frontend/pages/posts/[slug].tsx

@@ -25,26 +25,28 @@ export default function Post({ post, morePosts, preview }) {
         {router.isFallback ? (
           <PostTitle>Loading…</PostTitle>
         ) : (
-          <>
-            <article>
-              <Head>
-                <title>
-                  {post.title} | Next.js Blog Example with {CMS_NAME}
-                </title>
-                <meta property="og:image" content={post.ogImage.url} />
-              </Head>
-              <PostHeader
-                title={post.title}
-                coverImage={post.coverImage}
-                date={post.date}
-                author={post.author}
-              />
-              <PostBody content={post.content} />
-            </article>
-            <SectionSeparator />
-            {morePosts.length > 0 && <MoreStories posts={morePosts} />}
-          </>
-        )}
+            <>
+              <article>
+                <Head>
+                  <title>
+                    {post.title} | Next.js Blog Example with {CMS_NAME}
+                  </title>
+                  {post.coverImage &&
+                    <meta property="og:image" content={post.coverImage.url} />
+                  }
+                </Head>
+                <PostHeader
+                  title={post.title}
+                  coverImage={post.coverImage}
+                  date={post.date}
+                  author={post.author}
+                />
+                <PostBody content={post.content} />
+              </article>
+              <SectionSeparator />
+              {morePosts.length > 0 && <MoreStories posts={morePosts} />}
+            </>
+          )}
       </Container>
     </Layout>
   )

src/frontend/public/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicons/mstile-150x150.png"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

src/frontend/public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Next.js",
+  "short_name": "Next.js",
+  "icons": [
+    {
+      "src": "/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone"
+}