Ubuntu 20.04にReveal.jsをインストールし、簡単なプレゼンテーションを作成する方法

reveal.jsは、無料のオープンソースHTMLフレームワークであり、Webブラウザーを介してフル機能のプレゼンテーションを作成するために使用できます。これは、オープンWebテクノロジーに基づいて構築されています。マークダウンコンテンツ、ネストされたスライド、PDFエクスポート、スライドナビゲーションを制御するためのJavaScriptAPIなどの豊富な機能セットがあります。

このチュートリアルでは、Ubuntu20.04にReveal.jsをインストールする方法を紹介します。

前提条件

Ubuntu 20.04 VPS（SSD 2 VPSプランを使用します）
rootユーザーアカウントへのアクセス（またはroot権限を持つ管理者アカウントへのアクセス）

ステップ1：サーバーにログインしてサーバーOSパッケージを更新する

まず、rootユーザーとしてSSH経由でUbuntu20.04サーバーにログインします。

ssh root@IP_Address -p Port_number

「IP_Address」と「Port_number」をサーバーのそれぞれのIPアドレスとSSHポート番号に置き換える必要があります。さらに、必要に応じて「root」を管理者アカウントのユーザー名に置き換えます。

開始する前に、サーバーにインストールされているすべてのUbuntuOSパッケージが最新であることを確認する必要があります。これを行うには、次のコマンドを実行します。

apt-get update -y
apt-get upgrade -y

ステップ2：Node.jsをインストールする

Reveal.jsはNode.js上に構築されています。そのため、サーバーにNode.jsをインストールする必要があります。デフォルトでは、最新バージョンのNode.jsはUbuntu20.04のデフォルトリポジトリでは利用できません。そのため、Node.jsの公式リポジトリをシステムに追加する必要があります。

まず、次のコマンドを使用して、必要なすべての依存関係をインストールします。

apt-get install curl gnupg2 unzip git  -y

すべての依存関係がインストールされたら、次のコマンドを使用してNode.jsリポジトリを追加します。

curl -sL https://deb.nodesource.com/setup_14.x | bash -

次に、次のコマンドを実行してNode.jsをインストールします。

apt-get install nodejs -y

Node.jsをインストールしたら、次のコマンドでNode.jsのバージョンを確認できます。

node -v

次の出力が得られるはずです：

v14.15.0

ステップ3：Reveal.jsをインストールする

まず、次のコマンドを使用して、GitリポジトリからReveal.jsの最新バージョンをダウンロードします。

git clone git clone https://github.com/hakimel/reveal.js.git

ダウンロードが完了したら、ディレクトリをreveal.jsに変更し、次のコマンドを使用してすべての依存関係をインストールします。

cd reveal.js
npm install

すべての依存関係がインストールされたら、次のコマンドでノードサーバーを起動します。

npm start

次の出力が得られるはずです：

> [email protected] start /root/reveal.js
> gulp serve

[10:01:50] Using gulpfile ~/reveal.js/gulpfile.js
[10:01:50] Starting 'serve'...
[10:01:50] Starting server...
[10:01:50] Server started http://0.0.0.0:8000
[10:01:50] LiveReload started on port 35729
[10:01:50] Running server

この時点で、開発サーバーが起動し、ポート8000でリッスンしています。

次に、CTRL+Cを押して実行中のサーバーを停止します。

ステップ4：Reveal.jsのSystemdサービスファイルを作成する

次に、Reveal.jsサービスを管理するためのsystemdサービスファイルを作成する必要があります。次のコマンドで作成できます：

nano /lib/systemd/system/reveal.service

次の行を追加します：

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/root/reveal.js
ExecStart=npm start -- --port=8001

ファイルを保存して閉じてから、次のコマンドを使用してsystemdサービスをリロードします。

systemctl daemon-reload

次に、Reveal.jsサービスを開始し、次のコマンドを使用してシステムの再起動時に開始できるようにします。

systemctl start reveal
systemctl enable reveal

次のコマンドを使用して、サービスのステータスを確認することもできます。

systemctl status reveal

次の出力が得られるはずです：

● reveal.service
     Loaded: loaded (/lib/systemd/system/reveal.service; static; vendor preset: enabled)
     Active: active (running) since Sun 2020-11-15 10:05:47 UTC; 4s ago
   Main PID: 3912 (node)
      Tasks: 23 (limit: 2353)
     Memory: 89.1M
     CGroup: /system.slice/reveal.service
             ├─3912 npm
             ├─3938 sh -c gulp serve
             └─3939 gulp serve

Nov 15 10:05:47 ubuntu2004 systemd[1]: Started reveal.service.
Nov 15 10:05:47 ubuntu2004 npm[3912]: > [email protected] start /root/reveal.js
Nov 15 10:05:47 ubuntu2004 npm[3912]: > gulp serve
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Using gulpfile ~/reveal.js/gulpfile.js
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Starting 'serve'...
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Starting server...
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Server started http://0.0.0.0:8001
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] LiveReload started on port 35729
Nov 15 10:05:49 ubuntu2004 npm[3939]: [10:05:49] Running server

ステップ5：Nginxをリバースプロキシとして構成する

この時点で、Reveal.jsサーバーが起動し、ポート8001でリッスンします。次に、ポート80を介してReveal.jsにアクセスするには、Nginxをリバースプロキシとして構成する必要があります。

まず、次のコマンドを使用してNginxWebサーバーをインストールします。

apt-get install nginx -y

インストールしたら、新しいNginx仮想ホスト構成ファイルを作成します。

nano /etc/nginx/conf.d/reveal.conf

次の行を追加します：

upstream reveal_backend {
  server 127.0.0.1:8001;
}

server {
    listen 80;
    server_name reveal.example.com;

    location / {
        proxy_pass http://reveal_backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

ファイルを保存して閉じてから、Nginxサービスを再起動して変更を適用します。

systemctl restart nginx

ステップ6：Reveal.jsにアクセス

次に、Webブラウザーを開き、URL http://reveal.example.comを使用してReveal.jsWebインターフェースにアクセスします。。次の画面にReveal.jsのデフォルトのプレゼンテーションが表示されます。

ステップ7：簡単なプレゼンテーションを作成する

このセクションでは、Reveal.jsを使用して簡単なプレゼンテーションを作成します。

まず、Reveal.jsのデフォルトのindex.htmlファイルを編集します。

nano /root/reveal.js/index.html

デフォルトの…を削除し、次の行を追加します：

<section> 
<h1>Welcome to Reveal.js Demo</h1> 
</section> 
<section> 
<h1>About Author</h1>
<ul> 
<li>10 years experience</li> 
</ul> 
</section>
<section> 
<h1>reveal.js</h1> 
<ul> 
<li>open source</li> 
</ul> 
</section>

Save and close the file then restart the Reveal.js service to apply the changes:

systemctl restart reveal

次に、Webブラウザーを開き、URL http://reveal.example.comを使用してReveal.jsにアクセスします。。次の画面に新しいプレゼンテーションが表示されます。

>をクリックしますボタンをクリックして次のスライドに移動します。次の画面が表示されます。

もちろん、Linux VPSホスティングサービスのいずれかを使用している場合は、これを行う必要はありません。その場合は、専門のLinux管理者にセットアップを依頼するだけです。彼らは

24時間年中無休でご利用いただけます。リクエストはすぐに処理されます。

PS。この投稿が気に入った場合は、左側のボタンを使用してソーシャルネットワーク上の友達と共有するか、下に返信を残してください。ありがとう。