Add joplin web article (#9)

This commit is contained in:
deytenit authored and GitHub committed 2026-03-20 01:32:26 +03:00
1 parent 90bf68c4c8
commit 575959ffa2
38 files changed
+1043 -554

No files matched your search

@@ -0,0 +1,227 @@
---
title: 'Руководство по развертыванию Joplin Web'
description: 'Развертывание Joplin Server и веб-приложения с нуля'
createdDate: 2026-03-20
tags: ['joplin', 'deployment', 'guide']
---
Это руководство описывает, как развернуть приватную инфраструктуру для заметок, используя Joplin Server и его веб-клиент.
## Почему я выбрал Joplin?
Я давно пользуюсь Joplin, и он стал моим основным инструментом для ведения заметок. Есть несколько причин, по которым я выбрал его среди других альтернатив:
- **Local-First**: Заметки хранятся локально на вашем устройстве, что обеспечивает быстрый доступ и полное владение данными (особенно когда интернет недоступен).
- **Формат Markdown**: Joplin использует Markdown для всех заметок, что позволяет невероятно легко экспортировать, импортировать или переносить данные на другую платформу при необходимости.
- **Удобный обмен**: Возможность делиться заметками через веб делает совместную работу или публичный доступ простыми.
- **Резервное копирование**: Joplin предоставляет надежные варианты резервного копирования, давая мне уверенность в сохранности моих данных.
Одной вещи мне не хватало — возможности быстро добавить или просмотреть заметки, когда у меня нет доступа к моим основным устройствам (например, на работе). Эта статья предлагает решение: самостоятельно размещенный (self-hosted) веб-клиент.
## Обзор технологического стека
1. **Joplin Server**: Сервер синхронизации. Он обрабатывает протокол синхронизации Joplin, логику учетных записей и синхронизацию заметок между устройствами.
2. **Postgres**: База данных. Необходима для производительности в рабочей среде.
3. **Joplin Web App**: Браузерный клиент, созданный из исходного кода мобильного приложения Joplin с использованием React Native for Web.
## 1. Стек развертывания
Эта конфигурация является универсальной, использует **Docker Volumes** и предоставляет минимальную настройку для развертывания полного стека.
### Основной docker-compose.yml
Этот compose-файл представляет собой минимальную конфигурацию для запуска Joplin Server и веб-приложения. Предполагается, что вы понимаете, как настроить обратный прокси-сервер, или, что еще лучше, у вас уже есть собственная установка Joplin.
```yaml
x-environment: &shared-environment
TZ: 'Europe/Moscow'
POSTGRES_DB: 'joplin'
POSTGRES_USER: ${SHARED_USERNAME?:error}
POSTGRES_PASSWORD: ${SHARED_PASSWORD?:error}
services:
postgres:
image: postgres:16
container_name: joplin-postgres
volumes:
- postgres_data:/var/lib/postgresql/data
environment:
<<: *shared-environment
restart: unless-stopped
server:
image: joplin/server:3.5.2
container_name: joplin-server
depends_on:
- postgres
environment:
<<: *shared-environment
APP_PORT: 22300
APP_BASE_URL: 'https://example.com'
DB_CLIENT: 'pg'
POSTGRES_HOST: 'joplin-postgres'
POSTGRES_PORT: 5432
POSTGRES_DATABASE: 'joplin'
ports:
- '22300:22300'
restart: unless-stopped
app:
build:
context: ./app
args:
- GIT_TAG=v3.5.13
container_name: joplin-app
environment:
<<: *shared-environment
ports:
- '8080:8080'
restart: unless-stopped
volumes:
postgres_data:
```
### Dockerfile
Создайте директорию `app` и поместите в нее этот `Dockerfile` для сборки веб-клиента. Мы собираем собственный образ, так как авторы оригинала его не предоставляют.
Хотя существуют репозитории с готовыми образами, создать свой достаточно просто.
```dockerfile
# Stage 1: Build
FROM node:20-bookworm-slim AS builder
ARG GIT_TAG=v3.5.13
# Install build dependencies for Joplin monorepo
RUN apt-get update && apt-get install -y \
git python3 build-essential rsync \
&& rm -rf /var/lib/apt/lists/*
WORKDIR /app
# Configure regional mirror and timeout for reliability
RUN corepack enable && \
yarn config set registry https://registry.npmmirror.com
# Clone specific tag
RUN git clone --depth 1 --branch ${GIT_TAG} https://github.com/laurent22/joplin.git .
# Install dependencies and build the web distribution
RUN yarn install --network-timeout 1000000
RUN cd packages/app-mobile/ && yarn web
# Stage 2: Production Server
FROM nginx:alpine
# Remove default assets
RUN rm -rf /usr/share/nginx/html/*
# Copy built app and custom nginx config
COPY --from=builder /app/packages/app-mobile/web/dist /usr/share/nginx/html/app
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
```
### Конфигурация Nginx
Поместите этот `nginx.conf` рядом с `Dockerfile` в директории `app`. Joplin — это SPA (Single Page Application), а значит, не имеет значения, где оно развернуто, так как вся навигация обрабатывается внутренне без зависимости от местоположения. Поэтому вполне нормально развернуть его по пути, который не пересекается с основным сервером, например `/app`.
> Это довольно минималистичная конфигурация; предполагается, что ваш обратный прокси достаточно хорош, чтобы закрыть все спорные моменты, но вы можете расширить ее по своему усмотрению.
```nginx
server {
listen 8080;
server_name _;
root /usr/share/nginx/html;
index index.html;
# Gzip-сжатие для производительности
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1000;
# SPA-роутинг: возврат к index.html, если файл не найден
location /app/ {
try_files $uri $uri/ /app/index.html;
}
# Кэширование статических ресурсов
location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|webmanifest)$ {
expires 6M;
access_log off;
add_header Cache-Control "public, max-age=15552000, immutable";
}
}
```
## 2. Конфигурация
Создайте файл `.env` в той же директории, что и `docker-compose.yml`. **Не пропускайте шаг генерации секретов ниже.**
```bash
# --- Учетные данные базы данных ---
SHARED_USERNAME=joplin
SHARED_PASSWORD=generate_this_with_openssl
```
### Генерация секретов
Используйте `openssl`, чтобы легко создать безопасные случайные строки для записей в вашем `.env`:
```bash
# Генерация SHARED_PASSWORD
openssl rand -hex 32
```
## 3. Развертывание
Запустите стек, выполнив следующую команду:
```bash
docker compose up -d --build
```
## 4. Начальная настройка сервера
Перед настройкой веб-приложения необходимо инициализировать ваш Joplin Server:
Следуйте официальному руководству: [Joplin Server README](https://github.com/laurent22/joplin/blob/dev/packages/server/README.md)
По сути, вам нужно убедиться, что базовая синхронизация через приложение работает.
## 5. Демонстрация и настройка веб-приложения
Как только веб-приложение запустится по адресу `https://example.com/app/`, оно поприветствует вас.
### О веб-приложении
![Интерфейс Joplin Web](https://static.ermnvldmr.com/www/articles/2026/joplin-web-deployment-guide/joplin-web-interface.webp)
По сути, это то же самое мобильное приложение Joplin, но в браузере. Оно использует LocalStorage API для обработки данных. Все по-прежнему работает по принципу local-first, поэтому после входа в систему потребуется время для синхронизации всех удаленных заметок.
Но самое главное: _Веб-интерфейс Joplin позволяет просматривать и редактировать заметки прямо из браузера._
> Говорят, что работа гарантирована только в Chrome из-за требований к совместимости API; однако я добился отличных результатов и в Firefox. Браузеры быстро догоняют друг друга.
### Настройка аутентификации
Чтобы подключиться к вашему self-hosted серверу Joplin, перейдите в **Settings > Synchronization** и настройте следующие параметры:
- **Sync Target**: Joplin Server
- **Joplin Server URL**: `https://example.com`
- **Joplin Server Email**: `your-email@example.com` (тот, который вы только что создали/настроили)
- **Joplin Server Password**: `your-password`
![Настройка Joplin Web](https://static.ermnvldmr.com/www/articles/2026/joplin-web-deployment-guide/joplin-web-setup.webp)
_Наслаждайтесь!_
## Ресурсы
- [Joplin GitHub](https://github.com/laurent22/joplin)
- [Joplin Server README](https://github.com/laurent22/joplin/blob/dev/packages/server/README.md)