2020年10月29日木曜日

さくらのクラウドにCentOS、Nginxを使い、ストリーミングサーバーを構築してライブ配信したい | ライタス株式会社

こんにちわ。
10月より新入社員として入社しました田所です。

入社して1か月が経とうとしています。 まだまだ分からないことだらけで参っております。 さて、今回も初学者の私目線で業務で学んだことをまとめていきます😘


今回やりたいことは記事のタイトルの通りで
  1. さくらのクラウドを使って
  2. CentOSに
  3. Nginxを入れて
  4. OBSでPCの画面を配信
ってだけです。



めっちゃ簡単そうや!!!!




とかいってみたい人生です。

とにかく PCの画面をwebページで配信して閲覧できる様にします。
Youtubeの非公開とか限定公開のライブ配信みたいな感じです。
と、いうわけでざっくりですがアーキテクト図に落とし込んでみました。
絵に書くとなんかわかった気になれます(知らんけど)


今回RTMPという通信プロトコルで配信します。
RTMPの基礎的知識は↓で学びました
https://ygoto3.com/posts/live-streaming-and-rtmp-for-frontend-engineers/
※RTMPはTCPらしいです。(知らんかった)

いやぁ~初心者の僕からすると情報量多すぎです(^^)/(笑)

ひとつずつ確実に消化していきます!!
※今回は実施しませんが、キャプチャボードを使って別の端末画面(PCのBIOSやゲーム等)をキャプチャして配信もできます(また記事にします)

ではいきましょう!!

1.サーバー(さくらのクラウド)を立てる

AWSなら触ったことあるんですが(実はAWS SAA持ち)、さくらのサーバーは一切使ったことなかったのでここもまとめておきます。
基本的にAWSでイメージすれば特に問題なくクリアできました。
↓こちらを参考にしました↓
https://mebee.info/2019/11/09/post-3567/


さくらのクラウドのコンソール画面から「サーバー」→上にある「追加」を押す
そしてサーバーのスペックを決めていきます
今回は以下のようにしました(抜粋)
  • 仮想コア: 2
  • メモリ: 4GB
  • SSD: 20GB
  • OS: CentOS7.7
今回はSSHでサーバーに入り込む際に公開鍵認証を行うことにします。
やり方は↓の公式に詳細があるのでこの通りに行います。
https://manual.sakura.ad.jp/cloud/controlpanel/settings/public-key.html
C:\Users\ユーザー名>ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\ユーザー名/.ssh/id_rsa):
Created directory 'C:\Users\ユーザー名/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\ユーザー名/.ssh/id_rsa.
Your public key has been saved in C:\Users\ユーザー名/.ssh/id_rsa.pub.
The key fingerprint is:
xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx XXXXX\ユーザー名@PC
The key's randomart image is:
+---[RSA 2048]----+
|=**++.o          |
|OEo* o o         |
|==*+* o o        |
|=oo+*o o .       |
|..o= o..S        |
|. o.o oo         |
|.+ . o.          |
|o . ..           |
|   ..            |
+----[SHA256]-----+

これで
C:\Users\ユーザー名/.ssh/にid_rsa.pub(公開鍵)が
C:\Users\ユーザー名/.ssh/にid_rsa(秘密鍵)が
生成されました。

で、メモ帳でもなんでもいいのでC:\Users\ユーザー名/.ssh/の中のid_rsa.pub(公開鍵)を開いて中身をまるっとコピーし、
このようにペーストしたらおけ!(秘密鍵はSSH接続の時使用する)
そして「作成」をポチっと押したら起動し始めるので暫し待ちます。
その間にさくらクラウド側でのファイアウォールの設定をやってしまいます。
「ネットワーク」→「パケットフィルタ」を押して右上の追加を押します。
ルールのコピー元: なし
名前: ストリームサーバー(任意)
を入れて、「作成」を押します。
作られたパケットフィルタを選択して「ルール」タブの「追加」を押してルールを設定していきます。
最終的にはこんな感じにしました。
1. 自分のPCからのRTMP(1935番ポート)を許可
2. webからのアクセス(80番ポート)を許可(※必要に応じて送信元ネットワークを追加してください)
3. SSHでの接続を許可(送信元ネットワークに自分のグローバルIPを追加しておくとより安全)
4. それ以外の通信を拒否
フィルタリングルールは上から評価されるので3.の拒否のルールは一番下に設定します。
そして右上の「反映」を押すことで設定が有効化されます。
以上でクラウド側でのフィルタ設定は終了です。

先ほどのサーバー起動状態になっているはずなので、次はSSHでログインします。



2.SSHでサーバーへ入る

次はSSHでサーバーへ入ります
伝家の宝刀Tera Termさんを使って接続します。
さくらクラウドのコンソールからサーバーのグローバルIPをコピーします。(NICの欄に有る)
そしてTera Termを起動!!!
先ほどコピーしたIPアドレスを入れて
ユーザーはrootとして、「RSA/SDA/ECDSA/ED25519鍵を使う」を選択し先ほど生成した秘密鍵(C:\Users\ユーザー名/.ssh/にid_rsa)を選択
[root@root ~]
これで無事サーバーへ接続できました。
次はNginxの諸々をインストール&セットアップします

3.NginxとRTMP モジュールをインストール


ここがなかなかのつまりポイントでした。(笑)

基本は↓こちらを参考
https://qiita.com/hagane5563/items/842afe6d6e7100db3a28
とりあえずアプデ(地味に時間かかる奴)
yum update -y
いろいろ足りていないツール達をインストール
yum install -y wget gcc pcre-devel openssl openssl-devel vim
RTMPモジュールダウンロード
git clone https://github.com/arut/nginx-rtmp-module.git
Nginxをダウンロード
wget http://nginx.org/download/nginx-1.8.0.tar.gz
tar zxf nginx-1.8.0.tar.gz
.configureを実行
cd nginx-1.8.0
./configure --sbin-path=/usr/sbin/nginx \
--conf-path=/etc/nginx/nginx.conf \
--error-log-path=/var/log/nginx/error.log \
--http-log-path=/var/log/nginx/access.log \
--pid-path=/var/run/nginx.pid \
--lock-path=/var/run/nginx.lock \
--prefix=/usr/local/nginx \
--user=nginx \
--group=nginx \
--with-http_ssl_module \
--with-http_realip_module \
--with-http_addition_module \
--with-http_sub_module \
--with-http_dav_module \
--with-http_flv_module \
--with-http_mp4_module \
--with-http_gzip_static_module \
--with-http_random_index_module \
--with-http_secure_link_module \
--with-http_stub_status_module \
--add-module=/root/nginx-rtmp-module
makeしてインストール
make
make install
※CentOS8でmakeするとシェルスクリプトの構文エラーが連発しました。
結局解決できずだったので、7に変更したらいけました。
Nginx、RTMPライブラリ、CentOSのバージョンが関係ありそうです
後日改めて対処法を探そうと思います。
Nginxユーザー追加
groupadd nginx
useradd -g nginx nginx
usermod -s /bin/false nginx
Nginxの設定を弄っていく
    vim /etc/nginx/nginx.conf
下記内容を追加する
rtmp {
    server {
        listen 1935;
        access_log /var/log/nginx/rtmp_access.log;
            application live1(※任意で変える) {
            live on;
            wait_video on;
            hls on;
            hls_path /usr/local/nginx/html/;
            hls_fragment 5s;
        }
    }
}
※live1名前の所は問題ないが、後でOBSの設定で使用する
Nginx起動
/usr/sbin/nginx
firewall-cmdでポートを解放する
#80と1935を解放
firewall-cmd --add-port=80/tcp --zone=public --permanent
firewall-cmd --add-port=1935/tcp --zone=public --permanent
#有効化
firewall-cmd --reload
#有効化されているか確認する
firewall-cmd --list-all
public (active)
(略)
ports: 80/tcp 1935/tcp
(略)

#lsofコマンドでもポートの確認
lsof -i -P |grep nginx
nginx   31473  nginx    7u  IPv4  XXXXX      0t0  TCP *:1935 (LISTEN)
nginx   31473  nginx    8u  IPv4  XXXXX      0t0  TCP *:80 (LISTEN)
index.htmlの編集
vim /usr/local/nginx/html/index.html
以下に書き換えます。
HTMLの編集には↓を参考

https://qiita.com/okumurakengo/items/0c69d95553be89521b6d
headタグ

<meta charset="UTF-8"></meta>
 <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
 <meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
 <title>Document</title>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"></link>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"></link>
    <script src="https://vjs.zencdn.net/7.3.0/video.js"></script>"
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.2/videojs-flash.min.js"></script>
    <style>
        .disabled {
            cursor: not-allowed;
            opacity: .5;
        }
    </style>


bodyタグ
<video class="video-js vjs-default-skin u-full-width" controls="" data-setup="{}" height="500" id="example_video_1" poster="" preload="none">

<source src="rtmp://グローバルIPアドレス/任意の名前/任意のパス" type="rtmp/mp4"></source>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
ブラウザからサーバーにHTTPアクセスすると動画再生のプレイヤーが表示されていたらとりあえずOK

4.OBSでPCの画面を配信

↓OBSをこちらからダウンロード&インストール
https://obsproject.com/ja/download


ソースの「+」を押して「画面キャプチャ」を追加するとPC画面をキャプチャしてくれます。
カメラ、ビデオキャプチャ等は「映像キャプチャデバイス」を追加します。

さ、続いて立てたサーバーへ配信する設定をします。
「設定」→「配信」で次のように設定します。
rtmp://サーバーグローバルIPアドレス/live1
「live1」はnginx.confで任意で付けたサーバー名ですので変えている場合はその名前を入れます。
これで設定はオッケーです!
OBSで「配信開始」を押します。
右下のバーが緑色になっていればサーバーにちゃんと接続が成功している、ということになります。

さぁ配信をみてみましょう!!!!

さくらサーバーにHTTPでアクセスします

ちゃんとPC画面を配信できてます!

ただ問題がありまして、実は動画を再生するにはFlashPlayerを使用します。
FlashPlayerは2020年にサポート終了することもありますし、Chromeでは再生するにはいちいち許可したりする必要があるのでスマートではないですねぇ~"(-""-)"
ただ、RTMPはそもそもFlashPlayerの使用が前提みたいです。
(※chromeでFlashPlayerを許可する方法は
https://helpx.adobe.com/jp/flash-player/kb/cq09042354.htmlを参考)
なので

次回はFlashPlayerを回避して再生できるサーバー構築に挑戦します!!

これからも精進いたします!!😉
それでは。

2020年10月12日月曜日

ZELMAN ZM-VE350のセットアップでハマったこと | ライタス株式会社

こんにちわ。 10月より新入社員として入社しました田所と申します。

IT系の知識は基本的にはないと思っていただいて、
初心者向けな内容のインフラ周りで学んだことのアウトプットとして日々発信していけたらと思います。
よろしくお願いいたします👦

さて、さっそくですが、今回は以前にもブログでとりあげられていました



こいつです。
ZalmanのZM-VE350
以前のレビュー記事は↓こちらからどうぞ

USB接続のHDD、SSDとして使用もできますし、ドライブの中にISOファイルを突っ込んでおけば
こいつのボタンをぽちぽちしてISOファイルを選択すれば光学ディスクとして使用できるというのでOSのインストール等にとても重宝するインフラエンジニアにはとても助かるアイテムです!!


ざっくりとセットアップの手順を記載しますと、
  1. 用意したSATA I/II/III接続のHDDかSSDを装着
  2. USB接続すると電源がはいる(ドライブして認識される)
  3. ドライブをフォーマットする
  4. ドライブの中に「_iso」フォルダを作成する
  5. 「_iso」フォルダの中にisoファイルを入れる(複数可能)
  6. 本体のボタンからMode Select → Dual ModeかVCD Modeにする
  7. 本体のボタンから「_iso」にあるisoファイルを選択できるようになるので使用したいisoファイルを選択

といった流れで使用何点か詰まってしまった点があったのでピックアップして対処方法を残しておきます。

1.USB接続してもドライブ認識されない



ZMV-VE350からなにも進まないやん.....


結果これについてはデスクトップPC等に接続するといけました。
単純に電力不足のようです。
セルフパワータイプのUSBハブを使用したら使用しているノートPCでも使えました。(私が使用した商品詳細はこちら)

2.「_iso」の中にisoをいれても「no iso file」と表示されisoファイルを選択できない。

これにしばらく悩んだのですが、結論としてフォーマットの方法に問題がありました。

公式HPにも記載があったのですが、
MBRディスク/NTFSフォーマット
を見逃してました👨


どうやらGPTでフォーマットしていたみたいです。


本来ならwin10なら「ディスクの管理」からフォーマットしなおせるはずなんですが、失敗したので、この際勉強がてらコマンドプロントで挑戦しました。



※ちなみにGUIでやってくれるフリーソフトもあるみたいです。


参考記事(ほとんどこれだけで完結しました。)


コマンドプロントを開いて

diskpart


一旦今認識しているディスクを確認します。

DISKPART> list disk

  ディスク      状態           サイズ   空き   ダイナ GPT
  ###                                          ミック
  ------------  -------------  -------  -------  ---  ---
  ディスク 0    オンライン           XXX GB      0 B        *
  ディスク 1    オンライン           XXX GB      0 B        *


今回はディスク1をフォーマットするので選択します

DISKPART> select disk 1

ディスク 1 が選択されました。

DISKPART> list disk

  ディスク      状態           サイズ   空き   ダイナ GPT
  ###                                          ミック
  ------------  -------------  -------  -------  ---  ---
  ディスク 0    オンライン           XXX GB      0 B        *
*ディスク 1    オンライン           XXX GB      0 B        *


ディスク1の左に*がついていることを確認



パーティションを削除します。

DISKPART> clean

DiskPart はディスクを正常にクリーンな状態にしました。

これでGPTでフォーマットしてしまったパーティションはなくなります。



本日の主役MBR形式を選択します

DISKPART> convert mbr

DiskPart は選択されたディスクを MBR フォーマットに正常に変換しました。

これがしたかった

これで今から作るパーティションがMBR形式となります。

プライマリーのパーティションを作成します。



DISKPART> create partition primary

DiskPart は指定したパーティションの作成に成功しました。

DISKPART> list partition

  Partition ###  Type                Size     Offset
  -------------  ------------------  -------  -------
  Partition 1    予約                  XX MB    XX KB
* Partition 2    プライマリ             xxxx GB    XX MB

これでMBRのパーティションの完成です。
続いてファイルシステムをNTFSで指定してフォーマット開始


DISKPART> format fs=ntfs quick

  100% 完了しました

DiskPart は、ボリュームのフォーマットを完了しました。

これでNTFSのファイルシステムでフォーマットしてくれます。
ちなみに末尾にquickがついてますがこれがないと100年くらいかかるらしいので必ずつけましょう。


DISKPART> assign letter=f

DiskPart はドライブ文字またはマウント ポイントを正常に割り当てました。

これでちゃんとMBRでフォーマットされたドライブがFドライブとして認識されます。


そして「_iso」フォルダの中にISOファイルをいれてやると無事本体の画面からisoを選択できるようになります。

※それでも表示されない(no iso file)場合は上に数秒ボタンを上げると「_iso」内のisoファイルを読み込みなおしてくれるみたいです。


いやぁ~、すっきり!!!


最後に「I-O DATA ハードディスクフォーマッタ」のヘルプページに
フォーマット形式(FAT,NTFS等)、パーティション形式(GPT,MBR)の特徴についてわかりやすくまとめていただいていたので備忘録として掲載しておきます。
(よく忘れちゃう)
https://www.iodata.jp/support/qanda/answer/s16470.htm
これからも精進いたします!!😉