開発者ドキュメント

Ubuntu20.04（Nginx）でAnsibleを使用して静的HTMLWebサイトをデプロイする方法

getdocs

このシリーズのすべてのパートをフォローしている場合は、この時点で、システムパッケージのインストール、テンプレートの適用、およびAnsibleプレイブックでのハンドラーの使用に精通している必要があります。 シリーズのこのパートでは、これまでに見たものを使用して、Ubuntu20.04で静的HTMLWebサイトをホストするためのリモートNginxサーバーのセットアップを自動化するプレイブックを作成します。

まず、Ansibleコントロールノードに新しいディレクトリを作成します。このディレクトリで、Ansibleファイルとデモ用の静的HTMLWebサイトをリモートサーバーにデプロイするように設定します。 これは、ホームフォルダ内の任意の場所に配置できます。 この例では、 ~/ansible-nginx-demo.

  1. mkdir ~/ansible-nginx-demo

  2. cd ~/ansible-nginx-demo

次に、既存のインベントリファイルを新しいディレクトリにコピーします。 この例では、このシリーズの最初に設定したものと同じインベントリを使用します。

  1. cp ~/ansible-practice/inventory .

これにより、という名前のファイルがコピーされます inventory 名前の付いたフォルダから ansible-practice ホームディレクトリに保存し、現在のディレクトリに保存します。

デモWebサイトの取得

このデモンストレーションでは、HTMLでコーディングする方法シリーズの主題である静的なHTMLWebサイトを使用します。 次のコマンドを実行して、デモWebサイトファイルをダウンロードすることから始めます。

  1. curl -L https://github.com/do-community/html_demo_site/archive/refs/heads/main.zip -o html_demo.zip

あなたは必要になるでしょう unzip このダウンロードの内容を解凍します。 このツールがインストールされていることを確認するには、次を実行します。

  1. sudo apt install unzip

次に、デモWebサイトファイルを次のコマンドで解凍します。

  1. unzip html_demo.zip

これにより、という新しいディレクトリが作成されます html_demo_site-main 現在の作業ディレクトリ。 ディレクトリの内容は、 ls -la 指図：

  1. ls -la html_demo_site-main



Output
total 28
drwxrwxr-x 3 sammy sammy 4096 sep 18  2020 .
drwxrwxr-x 5 sammy sammy 4096 mrt 25 15:03 ..
-rw-rw-r-- 1 sammy sammy 1289 sep 18  2020 about.html
drwxrwxr-x 2 sammy sammy 4096 sep 18  2020 images
-rw-rw-r-- 1 sammy sammy 2455 sep 18  2020 index.html
-rw-rw-r-- 1 sammy sammy 1079 sep 18  2020 LICENSE
-rw-rw-r-- 1 sammy sammy  675 sep 18  2020 README.md

Nginxの構成用のテンプレートの作成

次に、リモートWebサーバーを構成するために必要なNginxテンプレートを設定します。 内に新しいフォルダを作成します ansible-demo プレイブック以外のファイルを保持するディレクトリ：

  1. mkdir files

次に、という新しいファイルを開きます nginx.conf.j2:

  1. nano files/nginx.conf.j2

このテンプレートファイルには、静的HTMLWebサイトのNginxサーバーブロック構成が含まれています。 3つの変数を使用します。 document_root, app_root、 と server_name. これらの変数は、後でプレイブックを作成するときに定義します。 次のコンテンツをテンプレートファイルにコピーします。

〜/ ansible-nginx-demo / files / nginx.conf.j2
server {
  listen 80;

  root {{ document_root }}/{{ app_root }};
  index index.html index.htm;

  server_name {{ server_name }};
  
  location / {
   default_type "text/html";
   try_files $uri.html $uri $uri/ =404;
  }
}

完了したら、ファイルを保存して閉じます。

新しいAnsiblePlaybookの作成

次に、新しいAnsibleプレイブックを作成し、このガイドの前のセクションで使用した変数を設定します。 名前の付いた新しいファイルを開きます playbook.yml:

  1. nano playbook.yml

このプレイブックは hosts 定義をに設定 all と become デフォルトでrootユーザーとしてすべてのタスクを実行するようにAnsibleに指示するディレクティブ（手動でコマンドを実行するのと同じ） sudo). このプレイブック内 var セクションでは、3つの変数を作成します。 server_name, document_root、 と app_root. これらの変数は、Nginx構成テンプレートで使用され、このWebサーバーが応答するドメイン名またはIPアドレス、およびWebサイトファイルがサーバー上にある場所へのフルパスを設定します。 このデモでは、 ansible_default_ipv4.address リモートサーバーのパブリックIPアドレスが含まれているため、fact変数ですが、DNSサービス内でこのサーバーを指すようにドメイン名が適切に構成されている場合は、この値をサーバーのホスト名に置き換えることができます。

〜/ ansible-nginx-demo / playbook.yml
---
- hosts: all
  become: yes
  vars:
    server_name: "{{ ansible_default_ipv4.address }}"
    document_root: /var/www/html
    app_root: html_demo_site-main
  tasks:

今のところ、このファイルを開いたままにしておくことができます。 次のセクションでは、このプレイブックを完全に機能させるために含める必要のあるすべてのタスクについて説明します。

必要なパッケージのインストール

次のタスクは、を更新します apt キャッシュしてからインストールします nginx リモートノード上のパッケージ：

〜/ ansible-nginx-demo / playbook.yml
. . .
    - name: Update apt cache and install Nginx
      apt:
        name: nginx
        state: latest
        update_cache: yes

リモートノードへのWebサイトファイルのアップロード

次のタスクでは、 copy Webサイトファイルをリモートドキュメントルートにアップロードするための組み込みモジュール。 を使用します document_root アプリケーションフォルダを作成するサーバー上の宛先を設定する変数。

〜/ ansible-nginx-demo / playbook.yml
. . .
    - name: Copy website files to the server's document root
      copy:
        src: "{{ app_root }}"
        dest: "{{ document_root }}"
        mode: preserve

カスタムNginx構成の適用と有効化

次に、静的HTMLファイルをホストするようにWebサーバーを構成するNginxテンプレートを適用します。 構成ファイルがに設定された後 /etc/nginx/sites-available、そのファイルへのシンボリックリンクを内部に作成します /etc/nginx-sites-enabled 後から再起動するようにNginxサービスに通知します。 プロセス全体には、2つの別個のタスクが必要です。

〜/ ansible-nginx-demo / playbook.yml
. . .
    - name: Apply Nginx template
      template:
        src: files/nginx.conf.j2
        dest: /etc/nginx/sites-available/default
      notify: Restart Nginx

    - name: Enable new site
      file:
        src: /etc/nginx/sites-available/default
        dest: /etc/nginx/sites-enabled/default
        state: link
      notify: Restart Nginx

UFWでポート80を許可する

次に、ポート80でtcpアクセスを有効にするタスクを含めます。

〜/ ansible-nginx-demo / playbook.yml
. . .
    - name: Allow all access to tcp port 80
      ufw:
        rule: allow
        port: '80'
        proto: tcp
. . .

Nginxサービスのハンドラーの作成

このプレイブックを完成させるために残された唯一のことは、 Restart Nginx ハンドラ：

〜/ ansible-nginx-demo / playbook.yml
. . .
  handlers:
    - name: Restart Nginx
      service:
        name: nginx
        state: restarted

完成したプレイブックの実行

プレイブックファイルに必要なすべてのタスクを含めると、次のようになります。

〜/ ansible-nginx-demo / playbook.yml
---
- hosts: all
  become: yes
  vars:
    server_name: "{{ ansible_default_ipv4.address }}"
    document_root: /var/www
    app_root: html_demo_site-main
  tasks:
    - name: Update apt cache and install Nginx
      apt:
        name: nginx
        state: latest
        update_cache: yes

    - name: Copy website files to the server's document root
      copy:
        src: "{{ app_root }}"
        dest: "{{ document_root }}"
        mode: preserve

    - name: Apply Nginx template
      template:
        src: files/nginx.conf.j2
        dest: /etc/nginx/sites-available/default
      notify: Restart Nginx

    - name: Enable new site
      file:
        src: /etc/nginx/sites-available/default
        dest: /etc/nginx/sites-enabled/default
        state: link
      notify: Restart Nginx

    - name: Allow all access to tcp port 80
      ufw:
        rule: allow
        port: '80'
        proto: tcp

  handlers:
    - name: Restart Nginx
      service:
        name: nginx
        state: restarted

インベントリファイルで設定したサーバーでこのプレイブックを実行するには、次を実行します。 ansible-playbook このシリーズの紹介で接続テストを実行するときに使用したのと同じ接続引数を使用します。 ここでは、という名前のインベントリファイルを使用します inventory sammyユーザーがリモートサーバーに接続します。 プレイブックには sudo 実行するには、 -K リモートユーザーを提供する引数 sudo Ansibleによってプロンプトが表示されたときのパスワード：

  1. ansible-playbook -i inventory playbook.yml -u sammy -K

次のような出力が表示されます。

Output
BECOME password: 

PLAY [all] **********************************************************************************************

TASK [Gathering Facts] **********************************************************************************
ok: [203.0.113.10]

TASK [Update apt cache and install Nginx] ***************************************************************
ok: [203.0.113.10]

TASK [Copy website files to the server's document root] *************************************************
changed: [203.0.113.10]

TASK [Apply Nginx template] *****************************************************************************
changed: [203.0.113.10]

TASK [Enable new site] **********************************************************************************
ok: [203.0.113.10]

TASK [Allow all access to tcp port 80] ******************************************************************
ok: [203.0.113.10]

RUNNING HANDLER [Restart Nginx] *************************************************************************
changed: [203.0.113.10]

PLAY RECAP **********************************************************************************************
203.0.113.10                : ok=7    changed=3    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0

プレイブックが完成したら、ブラウザに移動してサーバーのホスト名またはIPアドレスにアクセスすると、次のページが表示されます。

おめでとうございます。Ansibleを使用して、静的HTMLWebサイトのリモートNginxサーバーへの展開を正常に自動化しました。

デモWebサイトのファイルのいずれかに変更を加えると、プレイブックを再度実行して、 copy タスクは、ファイルの変更がリモートホストに反映されていることを確認します。 Ansibleにはべき等の動作があるため、プレイブックを複数回実行しても、システムにすでに加えられた変更はトリガーされません。

モバイルバージョンを終了