LOG IN

「さくらのクラウド」のスタートアップスクリプトでMastodonインスタンスを立ててみた

by 7_nana
このエントリーをはてなブックマークに追加 LINE it!

本当は前々回の記事の続きを書く予定だったのだが、4月中旬頃から私が大量に時間を溶かした分散型SNS「Mastodon」(マストドン)について忘れないうちに書いておく。
今回は私が立てたインスタンス「マストどす」ができるまで。

私はWebディレクター兼デザイナーで、HTMLとCSSしか書けない。JavascriptもPHPもひたすらコピペ、CMSをサーバにインストールしてサイト構築できるがプラグインは作ったことがない。もちろんサーバー管理の経験も無ければ、あの黒い画面は好きではない。つまりそんな人間でも一応インスタンスを立てることができたよ、という話である。

使うもの

使うことを諦めたもの

手順

1. ドメイン取得後〜ネームサーバ設定まで

さくらクラウドでMastodonのインスタンス(サーバー)を簡単に構築/作成する方法 | 社会のレールから外れた男

ムームードメインでドメインを取ったので上記の記事を参考にした。コメント欄にも書き込んだが、私の場合はドメインのネームサーバ設定を先に行うとDNSゾーン作成時にエラーが起きた。そこで設定を「今はまだドメインを利用しない(後で設定する)」に戻し、再度さくらのクラウドでDNSゾーン追加を行ったら成功した。その後にネームサーバ設定を変更した。

2. 公開鍵認証のキーペア作成〜管理者設定まで

ゼロからはじめるMastodon - さくらのナレッジ

【管理者設定含み】さくらのスタートアップスクリプトでMastodonのインスタンスを作った話 - ぺやろぐ

DNSゾーンを作成した後は、上記の2記事を参考にして作業を続けた。「さくらのナレッジ」の記事は、今回利用するスタートアップスクリプトの公式な記事なので、何か変更があればこの記事が更新されるか、別の記事が上がると思う。

スクリプト動作詳細 | さくらのクラウドニュース

今後の運用のためにこちらの記事もしっかり読んでおく。

余談:使うことを諦めたもの について

さくらの VPS + CentOS7 で 俺専用 Mastodon インスタンスを立ててみた話 | WWW WATCH

当初、こちらの記事を参考にしてメール配信にSparkPostと、

Mastodon インスタンスの画像や動画の保存先をクラウドストレージ (Amazon S3) に移行した話 | WWW WATCH

こちらの記事を参考にして画像の保存先にAmazon S3を使うつもりだったが私の理解度が及ばず、反映することができなかった。なので、まずは素直にさくらのナレッジにある通りインスタンスを立てて、公開してみることにした。

3. バージョンアップ

そうこうしている間にMastodonがバージョンアップされたので翌日まで様子を見つつ、

ゼロからはじめるMastodon インスタンス運用編 - さくらのナレッジ

こちらの記事を参考にして最新版にした。

4. 見た目のカスタマイズ

Mastodonのカスタム方法 | みんなのメモ帳

こちらの記事を参考にして各ページの文言と画像の変更を行った。ようやく自分に理解できる領域に辿り着いた。プログラマさん、いつも本当にありがとうございます。

FTPソフトの設定

SFTPで接続することが初めてだったので最初失敗した。SSHキーを有効にして、コントロールパネルで公開鍵を作成した時にダウンロードしたxxx.pemファイルを選択する。だよね、これ何に使うんだろうかとソワソワしていたよ。

画像の用意

久しぶりに絵を描いた。fluffy-elephant-friend.pngはaboutページのログインフォーム左にある画像。

mastodon_small.jpgはOGP用。TwitterやFacebookでURLがシェアされると、この画像が表示される。

logo.pngはaboutページの左上のロゴ画像。ICOOON MONOにあるちどりのアイコンを利用して作成した。

mastodon-getting-started.pngはログイン後、右カラム下部に表示される画像。無料イラスト素材ドットコムにある京都の街並みのイラストを利用して作成した。

ファビコンは home/mastodon/live/public にある。ロゴ画像の青バージョンと黒バージョンを用意し、様々なファビコンを一括生成。favicon generatorにアップロードして作成する。全部は使わないが必要な画像が全て揃う。

黒バージョンはWebブラウザのタブに表示されるfavicon.icoのみ使う。

青バージョンのapple-touch-icon.png(左)は四隅まで背景色を敷き、android-chrome-192x192.png(中)と共に透過部分をデフォルトのアイコンに合わせて薄いブルーに。mstile-150x150.png(右)もロゴ内の透過部分を白に。

サーバがダウンした時に表示されるoops.pngもファビコンと同じ階層にある。この京都タワーもICOOON MONOさんから。でもおいおいオリジナルのイラストに差し替えようと思う。

文言と画像を変更したら、

systemctl restart mastodon*

でMastodonを再起動すると反映される。

試しにiPhone Safariでマストどすを開いてホームに追加

あっ、てなった。

このエントリーをはてなブックマークに追加 LINE it!

7_nana
OTHER SNAPS