Merge pull request 'Docker compose changes ' (#9204) from chimiana/calckey:develop into develop

Reviewed-on: https://codeberg.org/thatonecalculator/calckey/pulls/9204

README.md

@@ -98,7 +98,7 @@ psql postgres -c "create database calckey with encoding = 'UTF8';"
 ## 💅 Customize
 
 - To add custom CSS for all users, edit `./custom/assets/instance.css`.
-- To add static assets (such as images for the splash screen), place them in the `./custom/assets/` directory. They'll then be avaliable on `https://yourinstance.tld/static-assets/filename.ext`.
+- To add static assets (such as images for the splash screen), place them in the `./custom/assets/` directory. They'll then be available on `https://yourinstance.tld/static-assets/filename.ext`.
 - To add custom locales, place them in the `./custom/locales/` directory. If you name your custom locale the same as an existing locale, it will overwrite it. If you give it a unique name, it will be added to the list. Also make sure that the first part of the filename matches the locale you're basing it on. (Example: `en-FOO.yml`)
 - To update custom assets without rebuilding, just run `yarn run gulp`.
 
@@ -139,20 +139,9 @@ NODE_ENV=production yarn run rebuild && yarn run migrate
 pm2 start "NODE_ENV=production yarn start" --name Calckey
 ```
 
-### 🐋 Prebuilt Docker image
+### 🐋 Docker
 
-```sh
+[How to run Calckey with Docker](./docker-README.md).
-docker pull thatonecalculator/calckey
-docker up -d
-```
-
-### 🐳 Docker Compose
-
-```sh
-docker-compose build
-docker-compose run --rm web yarn run init
-docker-compose up -d
-```
 
 ## 😉 Tips & Tricks
 

dev/docker-compose.yml

@@ -0,0 +1,50 @@
+version: "3"
+
+services:
+  web:
+    image: docker.io/thatonecalculator/calckey
+    build: ..
+    restart: always
+    depends_on:
+      - db
+      - redis
+#      - es
+    ports:
+      - "3000:3000"
+    networks:
+      - network
+    volumes:
+      - ../files:/calckey/files
+      - ../.config:/calckey/.config:ro
+
+  redis:
+    restart: always
+    image: docker.io/redis:7.0-alpine
+    networks:
+      - network
+    volumes:
+      - ../redis:/data
+
+  db:
+    restart: always
+    image: docker.io/postgres:12.2-alpine
+    networks:
+      - network
+    env_file:
+      - ../.config/docker.env
+    volumes:
+      - ../db:/var/lib/postgresql/data
+
+#  es:
+#    restart: always
+#    image: docker.elastic.co/elasticsearch/elasticsearch-oss:6.4.2
+#    environment:
+#      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
+#      - "TAKE_FILE_OWNERSHIP=111"
+#    networks:
+#      - network
+#    volumes:
+#      - ./elasticsearch:/usr/share/elasticsearch/data
+
+networks:
+  network:

docker-README.md

@@ -0,0 +1,46 @@
+# 🐳 Docker Compose for Development
+
+```sh
+cd dev/
+docker-compose build
+docker-compose run --rm web yarn run init
+docker-compose up -d
+```
+
+# Running a Calckey instance with Docker
+
+## Pre-built docker container
+[thatonecalculator/calckey](https://hub.docker.com/r/thatonecalculator/calckey)
+## docker-compose
+You can find a `docker-compose.yml` file in the same folder as this `README`, along with a folder called `.config` containing two **example** files needed to get the instance running:
+- .config/docker.env (**db config settings**)
+- .config/default.yml (**calckey instance settings**)
+
+## configuring calckey
+
+Rename the files:
+
+`cp .config/default_example.yml .config/default.yml`
+
+`cp .config/example.env .config/docker.env`
+
+then edit them according to your environment.
+You can configure `docker.env` with anything you like, but you will have to pay attention to the `default.yml` file:
+- `url` should be set to the URL you will be hosting the web interface for the instance at.
+- `host`, `db`, `user`, `pass` will have to be configured in the `PostgreSQL configuration` section - `host` is the name of the postgres container (eg: *calckey_db_1*), and the others should match your `docker.env`.
+- `host`will need to be configured in the *Redis configuration* section - it is the name of the redis container (eg: *calckey_redis_1*)
+
+Everything else can be left as-is.
+
+## Running docker-compose
+The [prebuilt container for calckey](https://hub.docker.com/r/thatonecalculator/calckey) is fairly large, and may take a few minutes to download and extract using docker.
+
+Copy `docker-compose.yml` and the `config/` to a directory, then run the **docker-compose** command:
+`docker-compose up -d`.
+
+NOTE: This will take some time to come fully online, even after download and extracting the container images, and it may emit some error messages before completing successfully. Specifically, the `db` container needs to initialize and so isn't available to the `web` container right away. Only once the `db` container comes online does the `web` container start building and initializing the calckey tables.
+
+Once the instance is up you can use a web browser to access the web interface at `http://serverip:3000` (where `serverip` is the IP of the server you are running the calckey instance on).
+
+## Securing your instance with a reverse proxy
+On its own *calckey* serves itself with HTTP, and does not support SSL. In order to support encrypted connections via HTTPS - an absolute necessity if you intend to host an instance accessible from the public internet - you need to add a reverse proxy to your setup.

docker-compose.yml

@@ -3,8 +3,7 @@ version: "3"
 services:
   web:
     image: docker.io/thatonecalculator/calckey
-    build: .
+    restart: unless-stopped
-    restart: always
     depends_on:
       - db
       - redis
@@ -12,39 +11,45 @@ services:
     ports:
       - "3000:3000"
     networks:
-      - network
+      - calcnet
+#     - web
+    environment:
+      NODE_ENV: production
     volumes:
       - ./files:/calckey/files
-      - ./.config:/calckey/.config:ro
+      - ./config:/calckey/.config:ro
 
   redis:
-    restart: always
+    restart: unless-stopped
     image: docker.io/redis:7.0-alpine
     networks:
-      - network
+      - calcnet
     volumes:
       - ./redis:/data
 
   db:
-    restart: always
+    restart: unless-stopped
     image: docker.io/postgres:12.2-alpine
     networks:
-      - network
+      - calcnet
     env_file:
-      - .config/docker.env
+      - config/docker.env
     volumes:
       - ./db:/var/lib/postgresql/data
 
 #  es:
-#    restart: always
+#   restart: unless-stopped
 #   image: docker.elastic.co/elasticsearch/elasticsearch-oss:6.4.2
 #   environment:
 #      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
 #      - "TAKE_FILE_OWNERSHIP=111"
 #    networks:
-#      - network
+#      - calcnet
 #    volumes:
 #      - ./elasticsearch:/usr/share/elasticsearch/data
 
 networks:
-  network:
+  calcnet:
+    #  web:
+    #    external:
+    #      name: web

packages/client/package.json

@@ -15,7 +15,7 @@
 		"@vitejs/plugin-vue": "3.2.0",
 		"@vue/compiler-sfc": "3.2.45",
 		"autobind-decorator": "2.4.0",
-		"autosize": "5.0.1",
+		"autosize": "5.0.2",
 		"blurhash": "1.1.5",
 		"broadcast-channel": "4.18.1",
 		"browser-image-resizer": "https://github.com/misskey-dev/browser-image-resizer.git#commit=0380d12c8e736788ea7f4e6e985175521ea7b23c",

packages/client/src/style.scss

@@ -94,7 +94,6 @@ a {
 	text-decoration: none;
 	cursor: pointer;
 	color: inherit;
-	tap-highlight-color: transparent;
 	-webkit-tap-highlight-color: transparent;
 }
 
@@ -103,7 +102,6 @@ a {
 // }
 
 textarea, input {
-	tap-highlight-color: transparent;
 	-webkit-tap-highlight-color: transparent;
 }
 
@@ -166,7 +164,6 @@ hr {
 	cursor: pointer;
 	color: inherit;
 	touch-action: manipulation;
-	tap-highlight-color: transparent;
 	-webkit-tap-highlight-color: transparent;
 	font-size: 1em;
 	font-family: inherit;

packages/client/src/ui/_common_/navbar.vue

@@ -29,14 +29,14 @@
 				</component>
 			</template>
 			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item _button" active-class="active" to="/admin">
 				<span v-if="thereIsUnresolvedAbuseReport || noMaintainerInformation || noBotProtection || noEmailServer || updateAvailable" class="indicator"></span><i class="icon ph-door-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
 				<i class="icon ph-dots-three-outline-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
 				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon ph-circle-fill"></i></span>
 			</button>
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
+			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item _button" active-class="active" to="/settings">
 				<i class="icon ph-gear-six-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>