Xibo チュートリアル Vol.07「さくらのVPSでXibo CMS 構築」

2024年5月31日 2024年5月31日

yokozeki

　やるやる詐欺のようになっていましたがついにCMS構築の回です！
　どんな環境でもつくれるとは思いますが、今回はさくらのVPS、ubuntu 22.04 環境でつくりました。最小構成でもいけるとは思いますがメモリ１GBストレージ100GB。ここはもともとCentOS7でnextcloudをたてていたのですが、CentOSはサポート終了して消える運命だったのでubuntuに入れ直してXiboをたてることにしました。Xiboはubuntuでなくとも入りますが、もともとubuntuではじまり、ubuntu環境で構築している情報がほとんどですので、ubuntu推奨です。

○さくらのVPS
https://vps.sakura.ad.jp/specification/

　もちろん!?Dockerを使います。さくらVPSに特化されている部分もあるかと思いますが、以下さくらのVPSで構築した手順になります。
　さくらのVPSは基本コンソールでの作業になるのですべてコマンドラインです（②以降の操作）。なので以降の作業は主にコマンドラインのお話になります。できるだけ、linuxはじめての人でもわかるように書きますので、離脱しないでね！

①サーバ初期設定
　サーバコントロールパネルの”OS再インストール”ボタンを押してください
　以下の設定にてサーバOSをインストールしてください。画像は再インストールとなっていますが、初期のインストールも手順は同じでしょう。
・標準OS
・インストールOS：ubuntu 22.04 amd64
・管理ユーザーのパスワード
・スタートアップスクリプト：Docker
・パケットフィルター設定：Web(80/443)

　スタートアップスクリプトとは、さくらのVPSを構築する際に初期セットアップしてくれるもので、例えば今回使った Dockerというスクリプトを選んでやるとDockerをインストールした状態のサーバを立ち上げてくれるのです。Dockerのインストール自体はそんなに手間でもないのですが、１手間省けることになります。

　１つこの画像の中で設定抜けがあります。そうです、パケットフィルター設定です。このままだと、ブラウザで表示されませんので、これは追加してください（下記画像）。
　私は今までにさくらのVPSで何度かweb系のサービス立ち上げたことあったのですが、ここを設定した覚えがなかった。パケットフィルター設定とはSSHとかftpとかその他特殊ポート用で webはDefaultで空いてるものかと思いこんでいました。なので、後でも書きますがxiboサービス立ち上がってるはずなのにブラウザでアクセスできない！となりました。

　もちろん、SSH使いたい場合はそれも空けてくださいね（Defaultでは入っている）。ちなみにさくらのVPSは、ブラウザ上のコントロールパネルから当該vpsのコンソールを立ち上げることができるので、SSHでつながないでもコンソール操作ができます。SSHのポートはけっこうアタックがあるので私は閉じています。意味わからない人はSSHは使わないと思うので削除してしまってけっこうです！

　また、これ構築した時点でubuntu 24.04も選択できたのですが、これに対応したDockerのスクリプトがまだなかったし、Xiboの方もまだ24.04には対応していない感じなので見送りました。あと半年ぐらいしたらどっちも対応するようになるでしょうが。
　数分かかる感じですが、待っていればDocker入のubuntu 22.04が立ち上がります。

②Xibo Docker のダウンロード
　サーバコントロールパネルの”コンソール - シリアルコンソール”ボタンを押してください。VNCコンソールの方が見やすい気がするのですが、こちらは主にWindowsサーバ環境向けで、キーのコピペができないのでシリアルコンソールの方をおすすめします。コピペできれば、キー入力しないでよいですからね。
コンソール立ち上げても文字が流れているようでしたら、①の操作のサーバ構築中ですので待っていてください。**** login:のプロンプトが出ていたら準備完了。シリアルの方は立ち上げたときにログインのプロンプトが出ていませんが、Enter key押すと出てきます。

プロンプト出てきたら
ubuntu/自分で設定したパスワード
でVPSにログインできます。ログインするとlinuxのホームディレクトリにいます。以下コマンド操作になりますが、コマンドの詳しい解説は省略します。コピペでやってもらってもOKです。
pwd
で自分のいるディレクトリ　/home/ubuntu が返されます。ひとまずここにダウンロードしましょう。容量は16kBぐらしかないのですぐにダウンロード終わります。
wget https://xibosignage.com/api/downloads/cms
で cms というアーカイブのファイルがダウンロードされますので解凍します。
tar -xvf cms
続けて
ls
というコマンドでそのディレクトリの中が見えます。xibo-docker-4.0.11 というディレクトリができていることが確認できます（今は4.0.11ですがバージョンは順次あがっていきますのでここは読み替えてください）。このディレクトリの中身が解凍したdockerのファイルになります。

③Xiboサーバ構築の準備
　以下は Xibo for Docker に書いてある内容になります。
https://xibosignage.com/docs/setup/xibo-for-docker
　ここにはDocker自体のインストールについても解説してありますが、今回はさくらのDocker スクリプトでDockerのインストールは終わっていますので省略して、
Download and extract the Xibo Docker archive　からはじめます。ダウンロードと解凍は終わっています。Xiboの構築先はどこでもいいのですが、こちらの推奨に従って /opt/xibo 配下に構築します。このディレクトリは存在していないのでディレクトリをつくります。このコマンドの先頭にある sudo はルート権限で実行するコマンド。 Windowsで言うところのAdministrator権限での操作になります。一番強い権限でなんでもできます。このルート権限があるところが、通常のweb用のレンタルサーバとvpsの違うところで、好きなアプリケーションをインストールして使うことができます。
linuxの場合は自分のホームディレクトリ以外は操作する権限を持っていないので、ファイルコピーであってもsudoコマンドを使って操作することになります。また、この後に控えているDockerの操作もルート権限にて行います。
以下のコマンドを入れるとパスワードの入力を求められるので、先に自分で設定したパスワードを入れてください。
sudo mkdir /opt/xibo
ここにさきほど解凍したDockerのファイルをコピーします。
sudo cp -pR xibo-docker-4.0.11/* /opt/xibo
/opt/xibo ディレクトに移動します
cd /opt/xibo
ls
コマンドでこのディレクトリの中身が確認できます。７つのファイルがコピーされています。
このファイルのうち、config.env.template　を編集する必要があります。このオリジナルのファイルは残し、リネームしてコピーします。
sudo cp config.env.template config.env
今リネームしてつくった config.env を編集します。編集にはUNIX(linuxの前身)時代から標準となっているテキストエディター vi を使います。このエディターはコマンドラインで操作ができます。
sudo vi config.env
ファイルの中身が見えます（下記画像これはさくらのコンソール画面ではないですがご了解を）。このうち、MYSQL_PASSWORD=　を入れてやる必要があります。パスワードなしではDBつくれないので、適当な文字列でパスワードつくってください。パスワードは英数字大文字小文字混在16桁以上推奨とあります。長いパスワードつくれん！という場合はパスワードを生成してくれるwebサイトなどありますので、それ使ってみてください。

まず、自分のPC環境の方でパスワードの文字列をクリップボードにコピーしておきます。
viはカーソルキーでカーソルの位置を変更することができます。MYSQL_PASSWORD= の行までカーソルを移動して
shiftキー+a で行末までカーソルが移動します。ここで shiftキー+Insキーでクリップボードの内容がペーストされます。
escキーを押して : キーを押すと画面左下にカーソルが移動しますので
wq
と入力してEnterキーで保存完了！間違えてやり直したい場合は
q!
と入力すれば保存しないで終了しますので、もう一回やり直してください。いろいろ編集したい場合viの操作はUNIX業界では一般的な話なのでネット上にいくらでも情報があります。自分で調べてやってみてね！viはとっつきづらいかもしれませんが、使うコマンドは多くないし覚えてなくともネットでひけばすぐに出てくるので恐るるに足らずです。
手元の環境で編集してファイルをアップロードというのももちろんできますが、さくらのVPSはftpサーバはDefaultで入っていないし、ポートもあいてないのでそれやりたい人は自分で環境をつくってください。なんでもできるDIYがVPS(Virtual Private Server)なんです。

④Docker での環境構築
　ついてきてますか！もうすぐ終わりです。
　ここから先はチュートリアルVol.04のバージョンアップのときに書いたのと同じです。
　今回はDocker動かすのはじめてなので
sudo docker-compose up -d
　一発で完了です。ファイルのダウンロードもしますので数分かかりますが待っていれば完了します。
　
　さあ、完了したらさくらのVPSのグローバルIPをブラウザに入力してください。
　このとき注意しないといけないのはまだhttpsではなく、httpです。ブラウザの方で勝手にhttpsにしてしまうこともあるので、http://...　で入れてみてください。TOPページが表示されればOKです！
　ちなみに私の場合は先に書きましたが、パケットフィルター（ファイアウォール）を全部閉じた状態にしてしまっていたので、表示されませんでした。みなさんは大丈夫と思いますがポートの80番はあけてくださいね！
　ログインはDefault以下になっています。passwordがpasswordのままはまずいのでこれは一番最初に変えておいてください。二段階認証にもできますので、用心深いあなたは使ってみてください。
Username: xibo_admin
Password: password