のくの備忘録サイトです。
面白そうだったので
全て同じElastic社が作っているので連携がスムーズです。
ホストOSのNginxのログをfilebeatで収集→Logstashで加工→ElasticSearchで統計→Kibanaで表示するDocker composeを作ります。
個人サイトを自宅サーバーから公開するぞ～！と意気込んだところ、そういえば新居の契約を最新のフレッツ光クロスにしていました。IPアドレスはOCNバーチャルコネクトというシステムで割り振られていて、自宅サーバーをサイト公開できるMyDNSの設定が上手く行かなかったので、試行錯誤した奮闘記です。IPv4通信のみになります。
自分の理解の整理の為に、個人サイトを公開する方法いろいろと、インターネットの基本からまとめてみます。
2023/09/26更新 Ubuntu Server 22.04 LTS / PostgreSQL 15
pg_rmanでオンラインバックアップを取りたいのにweb上で見かけたライブラリをインストールしてもPostgreSQL15だと上手く動かなかったので、その辺成功したメモ
Miskkeyで使うDBのDockerfile(イメージにはpostgres:15-bookwormを使用)に以下を追加
実際には前回のPGroonga導入で作成したDockerfileに追記しています
スクリプトはDockerfileと同じフォルダに作成
Tiniを入れてPostgreSQLのDocker内のPIDが1にならないようにします。リストアするときにPostgreSQLを停止しないと行けないのですが、PIDが1になっているとPostgrSQLの停止=Dockerコンテナ自体が停止してしまうためです。
# Add Tini
ENV TINI_VERSION v0.19.0
ADD https://github.com/krallin/tini/releases/download/${TINI_VERSION}/tini /tini
RUN chmod +x /tini
ENTRYPOINT ["/tini", "--"]
# pg_rman install
RUN apt update
RUN apt install -y build-essential libpq-dev git zlib1g-dev
RUN apt-get update
RUN apt-get -y install postgresql-client-15 postgresql-15 postgresql-server-dev-15 libpq-dev
RUN apt-get -y install libpq-dev libselinux1-dev liblz4-dev libpam0g-dev libkrb5-dev libreadline-dev libzstd-dev
RUN git clone https://github.com/ossc-db/pg_rman.git /tmp/pg_rman && \
cd /tmp/pg_rman && \
make && make install && \
rm -rf /tmp/pg_rman
CMD ["docker-entrypoint.sh", "postgres"]
#!/bin/bash BACKUP_DIR="/var/lib/postgresql/backup" DB_DIR="/var/lib/postgresql/data" ARCHIVE_DIR="/var/lib/postgresql/archive" MODE="$1" /usr/pgsql-15/bin/pg_rman backup --backup-mode=$MODE -b $BACKUP_DIR -D $DB_DIR -A $ARCHIVE_DIR
cronでバックアップを定時実行しています
Ubuntu 22.04 LTS
独自ドメインにwordpressを移行しました。プラグイン等は使っていません。
DockerでWordpress+MariaDBをインストール、ホストOS側のNginxでリバースプロキシを設定しています。
プラグインを使用して移行しようと思ったら上手く行かなかったので自力移行です。(;o;)ｵﾖｰ
Ubuntu22.04LTS / PostgresSQL15 / Misskey v13.14.2
※2023/09/26更新 Misskey内で完結するように割と修正
Misskey内の検索を強化したいもののMeilisearchの形態素分析がいまいちで検索したい語が探せない(「あんぱん」で「あんぱんまん」がヒット出来ない)ので、PostgresSQL拡張の日本語全文検索拡張PGroongaの導入メモです。
またnote.textだけでなくnote.cwの注意書き部分も検索範囲にします。
PGroongaを使って自鯖のMisskeyで快適にエゴサする tamainaさんの記事を参考にさせて頂いています。
MisskeyやFirefishの個人鯖立ててみたいけどいきなりweb上でやるの怖い！そうだ！宅内鯖に入れて宅内だけで通信しよう！！
サーバーを立てる所からの個人的メモです～
マストドン(fedibird.com)のホームをUserCSSで見た目を落ち着いた感じにしてみました。
ブラウザのアドオンのStylusを使用しています。iPhoneではfeatherクライアントを使用しているのでこれでブラウザからでもすっきりした見た目で使えるかも。iPadの場合はUserScriptに書き換えれば使えるかも
よく見るページのみ触ったので元のままの部分も結構ありそうです。適宜修正するかも
/* navigation周り(普段見ないものを非表示) */
.navigation-panel a[href*="timelines/public"],
.navigation-panel a[href*="/web/accounts/2"],
.navigation-panel a[href*="/web/circles"],
.navigation-panel a[href*="/web/group_directory"],
.navigation-panel a[href*="/web/directory"],
.navigation-panel a[href*="/web/suggestions"],
.navigation-panel a[href*="/web/trends"],
.navigation-panel a[href*="timelines/tag/fedibird"]{display:none !important;}
.navigation-panel a span{display:none !important;}
.reactions-bar__item{background-color:#eeeeee;
border-radius:8px !important;}
.column-link{border-radius:10px;}
/* カラム周り */
.compose-form__publish button{background-color:#aaa;border-radius:10px}
.compose-form,.compose-panel{border-radius:10px !important;
flex: 1;
overflow-x: hidden;
margin-bottom:0 !important;
padding-bottom:0 !important;
min-height: 10px !important;}
.compose-form__poll-button{display:none !important;}
.columns-area__panels__pane__inner{position: static;}
.columns-area__panels__pane__inner{width:auto;}
.column-link__icon {margin:0;}
/* header */
.column-header__button,.notification__filter-bar button{background-color:#aaa;}
.column-header,.column-header__back-button{background-color:#ccc;}
/* footer */
.getting-started__footer {opacity: 0.2;}
CSSではなくプラグインです。設定→プラグインに入力して下さい
Misskeyのノート上の特定の文字列を置換するプラグインです。
通常・RN・返信のユーザー名・注釈・本文を置換します。
他にも置換したいものがあればlists内を書き換えてください。
とりあえずサンプルではにじみすサーバーの動きの速いカスタム絵文字とrainbowタグ→scaleタグへ置換されるように書かれています。
{a: "置換前の文字列", b:"置換後の文字列" }のように記載してください。
/// @ 0.13.3
### {
name: "置換プラグイン"
version: "0.0.1"
author: "@[email protected]"
description: "特定の文字列を置換します"
permissions: []
config: {}
}
Plugin:register_note_view_interruptor(@(note){
// {a: "置換前の文字列", b:"置換後の文字列"}
let lists = [
{ a: ":ablobfoxhyper:"; b: ":blobfoxowo:" }
{ a: ":blobcatrainbow:"; b: ":ameowbouncefast:" }
{ a: ":moshakoparty:"; b: ":moshako:" }
]
for let i, lists.len {
if (note.renote == null) {
note.text = note.text.replace(lists[i].a, lists[i].b)
if (note.cw != null) note.cw = note.cw.replace(lists[i].a, lists[i].b)
note.user.name = note.user.name.replace(lists[i].a, lists[i].b)
}
if (note.renote != null) {
note.renote.text = note.renote.text.replace(lists[i].a, lists[i].b)
if (note.renote.cw != null) note.renote.cw = note.renote.cw.replace(lists[i].a, lists[i].b)
note.renote.user.name = note.renote.user.name.replace(lists[i].a, lists[i].b)
if (note.renote.reply != null) {
note.renote.reply.text = note.renote.reply.text.replace(lists[i].a, lists[i].b)
if (note.renote.reply.cw != null) note.renote.reply.cw = note.renote.reply.cw.replace(lists[i].a, lists[i].b)
note.renote.reply.user.name = note.renote.reply.user.name.replace(lists[i].a, lists[i].b)
}
}
if (note.reply != null) {
note.reply.text = note.reply.text.replace(lists[i].a, lists[i].b)
if (note.reply.cw != null) note.reply.cw = note.reply.cw.replace(lists[i].a, lists[i].b)
note.reply.user.name = note.reply.user.name.replace(lists[i].a, lists[i].b)
}
}
note
})
Misskeyの記事のURLをPocketサービスへ送信するボタンを付けるUserScriptです。
Google KeepはAPI非公開、EvernoteはAPIがありますがあまりUserScript向きではないようでした。
仮想DOM生成時に実行されるため、少し重くなるかもしれません。
正常に送信が行われると緑色になります。（API送信時に確認のため色を変えているため、Pocketへ保存されている記事の色が変わるわけではありません。）
Pocketに登録し、API利用のためカスタマーキーとアクセストークンを取得します。
上記サイトを参考にして取得しました。
PCブラウザ, Android, iOSでのそれぞれの導入方法はこちらの記事を参照ください。
下記のうち@matchのURLを利用するMisskeyのサーバーへ、consumer_key、access_tokenを取得したPocket APIのカスタマーキーとアクセストークンへ書き換えてください。
// ==UserScript== // @name Save URL to Pocket // @namespace @[email protected] // @version 1.0 // @description Saves the URL to Pocket when the specified button is clicked // @match https://nijimiss.moe/* // @run-at document-idle // @grant GM_xmlhttpRequest // ==/UserScript== // ボタンを生成する関数 function createPocketButton(article) { const footer = article.querySelector('footer'); if (footer) { const pocketButton = document.createElement('button'); pocketButton.classList.add('_button', 'xviCy', 'pocket-button'); pocketButton.style.height = '32px'; pocketButton.style.borderRadius = '6px'; const pocketIcon = document.createElement('img'); pocketIcon.setAttribute('src', 'https://blog.estampie.work/pocket.svg'); pocketIcon.setAttribute('width', '16'); pocketIcon.setAttribute('height', '16'); pocketIcon.classList.add('xeJ4G', 'x5kTm', 'x9Io4'); pocketButton.appendChild(pocketIcon); pocketButton.addEventListener('click', () => { const noteElement = article.querySelector('a[href^="/notes/"]'); if (noteElement) { const notePath = noteElement.getAttribute('href'); const fullURL = 'http://nijimiss.moe' + notePath; GM_xmlhttpRequest({ method: 'POST', url: 'https://getpocket.com/v3/add', headers: { 'Content-Type': 'application/json; charset=UTF-8', 'X-Accept': 'application/json', }, data: JSON.stringify({ url: fullURL, consumer_key: 'カスタマーキー', access_token: 'アクセストークン', }), onload: function(response) { if (response.status >= 200 && response.status < 300) { // API送信が成功した時の処理 pocketButton.style.backgroundColor = '#77b58c'; // ボタンの背景色を緑に変える } else { // API送信が失敗した時の処理 pocketButton.style.backgroundColor = '#FF0000'; // ボタンの背景色を赤に変える } } }); } }); footer.appendChild(pocketButton); } } // DOMが変更されたときに実行される関数 const observerCallback = function(mutationsList, observer) { for(let mutation of mutationsList) { if (mutation.type === 'childList') { const articles = document.querySelectorAll('article:not(.has-pocket-button)'); articles.forEach(article => { createPocketButton(article); article.classList.add('has-pocket-button'); }); } } }; // MutationObserverを設定 const observer = new MutationObserver(observerCallback); observer.observe(document, { childList: true, subtree: true }); // 初期ページの記事にボタンを追加 const initialArticles = document.querySelectorAll('article'); initialArticles.forEach(article => { createPocketButton(article); article.classList.add('has-pocket-button'); });
下記カスタムCSSを併用すると二行にならずに済むかもしれません。数値は任意で変更してください。
.xviCy:not(:last-child) {
margin-right: 14px !important;
}
前回はwebサーバーを立てるところまでやってみました。
サイトのデータがリモートリポジトリのmasterブランチにマージされたらNext.jsアプリをビルドして公開ディレクトリに同期というのをGitHub Actionsでやってる方を見てそれやりたいな～～と思いました。ただGitHubは性的な内容は駄目で同人サイトには向かないので、その辺の絡みでさくらVPSで同様の機能をやりたい感じです。
今回は仮想サーバー上にリモートリポジトリを作成してWindows側のVScodeからSSH接続でpushできるようにします。さらにリモートリポジトリにpushされたらGit HookでNext.jsアプリをビルドしてrsyncで公開フォルダに同期します。
何言ってるのかよくわかんないですが「サイトの更新準備が出来たらボタンポチーでサーバー上のデータが更新できて、弄った部分の変更履歴も取れる」みたいな感じ