Fly.ioにWiki.jsとumamiのサーバを構築する

仲田しぃ

はじめに

こんにちはー。Vtuber候補生の仲田しぃです。

私はVtuber候補生としてレッスンに励んでいる傍ら，現役Vtuberなかだちちゃんの技術サポートとかをしてるんだけど，今日はそれに関するお話だよー。

なかだちちゃんプロフィール

なかだちちゃんは最近Steamとかで販売している海外製のエロゲーについてまとめた「海外エロゲーまとめWiki」の運営を始めたんだけど，そのためのWikiサーバの構築とかを私が担当したんだー。

海外エロゲーまとめWikiサイトイメージ

なるべくお金をかけないようにしたかったからHerokuに全部載せてたんだけど，構築して1ヶ月くらいでHerokuの無料プラン終了のお知らせが来てびっくり！　せっかくの苦労が水の泡……
（苦労っていってもHerokuボタン押すことしかしてないけど！）

それで移行先に選んだのがFly.io！　無料プランはHerokuよりちょっとスペック落ちるけど，東京リージョンが選べるし永続ストレージがついてるのが良い感じ！

ただ，Herokuの時みたいに「ボタンひとつで構築！」とはいかないから，コツを掴むまでは少し大変だったかなー

ということで，今回紹介するのはオリジナルのWikiサイトを作るためのWiki.jsサーバと，リアルタイムでアクセス解析ができるumamiサーバを，DockerイメージをもとにFly.ioに構築する方法だよー

準備するもの

CUIコンソール

Fly.ioはCUIでの操作が多いから，CUIコンソールは必須だよー
MacとかLinuxだと「ターミナル」，WindowsだとPowerShellとかだねー
WindowsユーザでLinuxのシェルに慣れてる人はWSLがおすすめだよー

Fly.ioアカウント

Fly.ioの無料プランでは一つのアカウントで作ったアプリは全部CPUとかメモリを共有することになるから，無料でたくさんアプリを作りたい場合はアカウントを複数用意することになるよー
※複垢については，元々公式ドキュメントで推奨されてたんだよー
今は複垢を推奨する文言はドキュメントから消えてるけど，利用規約で禁止されたわけじゃないっぽいから，節度を守って使おうねー

  1. 下のリンクを参考に，CUIコンソール上でFly.ioの操作コマンド「flyctl」をインストール
    Install flyctl · Fly Docs

  2. 「fly auth signup」コマンドを実行するとブラウザでアカウント登録ページが開くから，必要な情報を入力してね―
    ※下のリンクに直接アクセスして登録することもできるけど，どのみちCUIでログインすることになるから，最初からCUIで操作するのがおすすめだよー
    https://fly.io/app/sign-up

Wiki.js

DBの作成（PostgreSQL）

参考：Fly Postgres on Apps V1 · Fly Docs

  1. 「flyctl postgres create」を実行
    アプリ名（DBを載せるVMの名前だと考えよう），リージョン，スペックを訊かれるよー
    作成が完了したらパスワードなど接続に必要な情報が表示されるから，必ずどこかなくさないところにメモしておこう！

  2. 別のPaaSからデータ移行する場合は下の記事を参考にしてねー
    HerokuからFly.ioにPostgresのデータを移行

Webサーバの作成

参考：
Deploy via Dockerfile · Fly Docs
Docker | Wiki.js

  1. 適当な空のディレクトリを作成してその中に移動する

  2. 「fly launch」を実行
    アプリ名，リージョン，スペックを訊かれるよー
    最後に「Would you like to deploy now? (y/N)」って訊かれるけど，まだデプロイはしないから「N+Enter」を入力しよう！

  3. カレントディレクトリに「fly.toml」というファイルが作成されるから，vimとかで編集して16行目の「internal_port = 8080」を「internal_port = 3000」に変更する

  4. カレントディレクトリに「Dockerfile」を作成して以下のように記述する
    ※<>で括られている部分にはDB作成時に表示された値が入るよー

FROM requarks/wiki:2
ENV DB_TYPE=postgres
ENV DB_HOST=<Hostname>
ENV DB_PORT=5432
ENV DB_USER=postgres
ENV DB_PASS=<Password>
ENV DB_NAME=postgres

5.「fly deploy」コマンドを実行

umami

DBの作成

Wiki.jsと同じ

Webサーバの作成

参考：umami - Installation

1~3まではWiki.jsと同じ
4. カレントディレクトリに「Dockerfile」を作成して以下のように記述する
　※<>で括られている部分にはDB作成時に表示された値が入るよー

FROM ghcr.io/umami-software/umami:postgresql-latest
ENV DATABASE_URL=postgresql://postgres:<Password>@<Hostname>:5432/postgres

5.「fly deploy」コマンドを実行

おわりに

Dockerfileの書き方さえわかっちゃえば怖くないねー
みんなも良かったら試してみてねー

この記事が気に入ったらサポートをしてみませんか？