Docker、プレーヤー機能を備えたCMSオンデマンドシステムを構築

Docker、プレーヤー機能を備えたCMSオンデマンドシステムを構築

【はじめに】 皆さんはこれまで、さまざまな動画サイトをご覧になったことがあると思います。内容はともかく、自分で動画サイトを持ちたいと思ったことはありませんか?よかったら一緒に来てください!今日の記事はあなたの願いを叶えることができます。

注意深く行えば、プログラミングのスキルがなくてもこの願いを実現できるかもしれません。

文章

仕事をうまくやり遂げたいなら、まず道具を研がなければなりません。何をするにしても、まずは道具を準備しましょう。同様に、独自のビデオ Web サイトを構築する場合は、まずクラウド サーバーを準備する必要があります。この要件は多すぎませんか?

面倒だったり、ローカルでアクセスしたいだけなら、自分のマシンに Linux 仮想マシンをインストールすることもできます。

1. 機械を準備する

Linux をオペレーティング システムとして使用する Alibaba Cloud サーバーをオープンしました。

もちろん、Tencent CloudやHuawei Cloudもご利用いただけます。

2. Dockerをインストールする

1. 依存パッケージをインストールする

sudo yum install -y yum-utils デバイスマッパー永続データ lvm2

実行プロセス:

[work@al-bj ~]$ sudo yum install -y yum-utils デバイスマッパー永続データ lvm2
読み込まれたプラグイン: fastestmirror
キャッシュされたホストファイルからミラー速度をロードする
依存関係の解決
--> トランザクションチェックを実行中
---> パッケージ device-mapper-persistent-data.x86_64 0:0.8.5-3.el7_9.2 がインストールされます
--> 処理中の依存関係: libaio.so.1(LIBAIO_0.4)(64 ビット)、パッケージ: device-mapper-persistent-data-0.8.5-3.el7_9.2.x86_64
--> 依存関係の処理: libaio.so.1(LIBAIO_0.1)(64 ビット)、パッケージ: device-mapper-persistent-data-0.8.5-3.el7_9.2.x86_64
--> 依存関係の処理: libaio.so.1()(64 ビット)、パッケージ: device-mapper-persistent-data-0.8.5-3.el7_9.2.x86_64
---> パッケージ lvm2.x86_64 7:2.02.187-6.el7_9.4 がインストールされます

……

2. Alibaba Cloudイメージソースを設定する

一般的に、何らかの理由により、インストール速度を上げるために、Alibaba Cloud ミラー ソースは中国に設置されます。

 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

実行結果:

[work@al-bj ~]$ sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
読み込まれたプラグイン: fastestmirror
リポジトリの追加: https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
ファイル https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo を /etc/yum.repos.d/docker-ce.repo に取得します
リポジトリは /etc/yum.repos.d/docker-ce.repo に保存されました

3. インストールコマンドを実行する

無料の ce バージョンの docker を使用します。インストール コマンドは次のとおりです。

sudo yum で docker-ce をインストールします

実行プロセス:

[work@al-bj ~]$ sudo yum install docker-ce
読み込まれたプラグイン: fastestmirror
キャッシュされたホストファイルからミラー速度をロードする
docker-ce-stable | 3.5 kB 00:00:00
(1/2): docker-ce-stable/7/x86_64/primary_db | 58 kB 00:00:01
(2/2): docker-ce-stable/7/x86_64/updateinfo | 55 B 00:00:02
依存関係の解決
--> トランザクションチェックを実行中
---> パッケージ docker-ce.x86_64 3:20.10.5-3.el7 がインストールされます

……

4. インストールが成功したことを確認する

次のコマンドを使用して、Docker が正常にインストールされているかどうかを確認します。

docker バージョン

実行結果が以下と表示されればインストールは成功です。

[work@al-bj ~]$ docker バージョン
クライアント: Docker Engine - コミュニティ
バージョン: 20.10.5
APIバージョン: 1.41
Goバージョン: go1.13.15
Gitコミット: 55c4c88
作成日: 2021年3月2日火曜日 20:33:55
OS/アーキテクチャ: linux/amd64
コンテキスト: デフォルト
実験的: 真

3. イメージをプルする

新しいマシンで初めてイメージをプルすると、次のエラー メッセージが表示される場合があります。

[work@al-bj ~]$ docker pull moerats/express-ffmpeg
unix:///var/run/docker.sock の Docker デーモンに接続できません。Docker デーモンは実行されていますか?

上記の問題を解決するには、Docker サービスを再起動して次のコマンドを実行します。

sudo サービス docker 開始

Docker サービスを再起動し、上記のコマンドを再度実行します。イメージは正常にプルされます。コマンドの実行結果は次のとおりです。

[work@al-bj ~]$

イメージ 'moerats/express-ffmpeg:latest' がローカルに見つかりません

最新: moerats/express-ffmpeg からプル

9cc2ad81d40d: プル完了

e6cb98e32a52: プル完了

ae1b8d879bad: プル完了

42cfa3699b05: プル完了

053cac798c4e: プル完了

e11ff976ff71: プル完了

81d72bab54a7: プル完了

fcefcb4d99e7: プル完了

592d9f42009b: プル完了

ce856dc9b932: プル完了

d9923fa7208c: プル完了

ダイジェスト: sha256:3cafc15d21892b6576250763c7ea2fba64f92ff7b79604d26e7f10496da3db6a

ステータス: moerats/express-ffmpeg:latest の新しいイメージをダウンロードしました

36b449328f2584b54edefce9319877e6c1b92b05e393ca9b3e9bdbebc1d0af6a

4. イメージを実行してコンテナを作成する

これで準備作業はすべて完了です。次は、このプロジェクトの重要な部分、つまり独自のオンデマンド サービスの作成を始めましょう。

次のコマンドを実行します。

docker run --restart=always --name express-ffmpeg -d \
-p 3000:3000 \
-e ローカルIP=172.31.102.226 \
-e usr=moerats \
-e パス=モエラッツ \
-e url=モエラッツ\
-v ~/express-ffmpeg/mongodb:/data \
-v ~/express-ffmpeg/config:/express-ffmpeg/config \
-v ~/express-ffmpeg/movies:/express-ffmpeg/movies \
-v ~/express-ffmpeg/videos:/express-ffmpeg/public/videos \
-v ~/express-ffmpeg/uploads:/express-ffmpeg/public/uploads \
-v ~/express-ffmpeg/images:/express-ffmpeg/public/images \
moerats/express-ffmpeg

上記のコマンドをすべてコピーして、ターミナル ウィンドウ (Windows システムの CMD ウィンドウに似ています) に貼り付けます。Docker についてあまり詳しくない場合は、上記のコマンドの意味を気にする必要はありません。

5. Web VODホームページにアクセスする

上記のコマンドがスムーズに実行されれば、ローカルブラウザの Web オンデマンドホームページにアクセスできるようになります。

ブラウザに次のアドレスを入力してください:

http://172.31.102.226:3000/

正常時は以下のとおりです。

すごいですよね?

もちろん、アクセス アドレスはサーバーの IP に応じて動的に入力する必要があります。私のサーバーの IP は 172.31.102.226 です。サーバーの IP が 192.168.10.1 の場合、ブラウザーのアクセス アドレスは http://192.168.10.1:3000 になります。

6. VODファイルをアップロードする

CMS オンデマンド システムのホームページが表示されましたが、コンテンツがありません。必要なビデオ コンテンツを再生するにはどうすればよいでしょうか?

次に、バックグラウンドから興味のある動画をアップロードします。

アクセスバックエンドアドレス: http://172.31.102.226:3000/moerats

すると次のインターフェースが表示されます。

デフォルトのユーザー名とパスワード moerats/moerats を入力します。

次に、「ログイン」ボタンをクリックします。

7. 管理バックエンドインターフェース

ログイン後、以下に示すように、バックグラウンド管理インターフェイスに入りました。

次に、右上隅の「ムービーをアップロード」ボタンをクリックすると、アップロード インターフェイスが表示されます。

「ムービーを追加」をクリックし、アップロードするビデオファイルを選択します。

アップロードが完了したら、「ムービー ライブラリ」に移動して、以下に示すようにビデオ ファイルのリストを表示できます。

ビデオファイルの名前、サイズ、ステータスなどの情報を確認できます。

8. フロントエンドアカウントに登録してログインする

次の図に示すように、フロントエンド ページにアクセスして、まずアカウントを登録することができます。

登録が成功したら、対応するアカウントでログインします。具体的な手順は以下の図に示されています。

ログインに成功した後も、アップロードしたビデオ ファイルがまだ表示されません。フロントエンド ページで表示するにはどうすればよいでしょうか?

9. 操作ビデオファイル

ムービー ライブラリ内のビデオ ファイルに対してトランスコードおよびスライス操作を実行します。具体的な操作は次の図に示されています。

ビデオ ファイルのステータスが「待機中」から「完了」に変わると、フロントエンド ページから対応するビデオ コンテンツを確認できます。

ホームページは次のように表示されます。

この時点で完了です。

結論

みんなの願いは叶いましたか? ハハハ、まだ触れていない操作や細かい設定がたくさんあります。興味があればコメントを残してください。後ほど欲しい内容を更新し続けます。

以上が、dockerでプレーヤー機能を備えたCMSオンデマンドシステムを構築する詳細です。docker CMSオンデマンドシステムの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

<<:  Vue ファースト スクリーン パフォーマンス最適化コンポーネントの知識ポイントの概要

>>:  ページコードの変更の効率を向上させ、HTML言語のコア知識を習得します。

推薦する

Centos7 MySQL データベースのインストールと設定のチュートリアル

1. システム環境yum updateアップグレード後のシステムバージョンは[root@yl-web...

React Contextの理解と応用についてお話ししましょう

目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...

js キャンバスで円形の水のアニメーションを実現

この記事の例では、円形の水のアニメーションを実現するためのキャンバスの具体的なコードを参考までに共有...

javascript:void(0) の意味と使用例

voidキーワードの紹介まず、void キーワードは JavaScript で非常に重要なキーワード...

Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

目次1. 親コンポーネントが子コンポーネントにデータを渡す1.1. 親コンポーネントコード1.2. ...

elementui の el-popover スタイルの変更が有効にならない問題の解決策

element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...

CSS3 はドラッグ可能なルービックキューブの 3D 効果を実現します

主に使用される知識ポイント: •css3 3D変換 •ネイティブjsマウスドラッグイベント•表示:グ...

Vue-pdfはPDFファイルのオンラインプレビューを実装します

序文ほとんどのプロジェクトでは、PDF ファイルのオンライン プレビューに遭遇するでしょう。このプロ...

効果的なウェブフォームのための 8 つのルール

ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...

フレックスレイアウトのスペース間の最後の行の左揃えの問題を解決する方法

まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 1px ...

Win10 システムに MySQL8.0.13 をインストールする際の問題と解決策

オペレーティングシステム: Windows10 MySQL バージョン: 8.0.13-winx64...

sysbenchツールによるMySQLデータベースのパフォーマンステストの実装方法

1. 背景Sysbench は、システムのハードウェア パフォーマンスをテストできるストレス テスト...

antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

Ubuntu ベースのディストリビューションに Microsoft TrueType フォントをインストールするチュートリアル

Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...