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

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

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

mkdir ~/ansible-nginx-demo
cd ~/ansible-nginx-demo

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

cp ~/ansible-practice/inventory .

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

デモWebサイトの取得

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

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

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

sudo apt install unzip

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

unzip html_demo.zip

これにより、現在の作業ディレクトリにhtml_demo_site-mainという新しいディレクトリが作成されます。 ls -laコマンドを使用して、ディレクトリの内容を確認できます。

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ディレクトリ内に新しいフォルダを作成して、非プレイブックファイルを保持します。

mkdir files

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

nano files/nginx.conf.j2

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

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という名前の新しいファイルを開きます。

nano playbook.yml

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

---
- 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パッケージをリモートノードにインストールします。

. . .
    - name: Update apt cache and install Nginx
      apt:
        name: nginx
        state: latest
        update_cache: yes

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

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

. . .
    - 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つの別個のタスクが必要です。

. . .
    - 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アクセスを有効にするタスクを含めます。

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

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

このプレイブックを完成させるために残されているのは、Restart Nginxハンドラーを設定することだけです。

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

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

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

---
- 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が必要なため、Ansibleのプロンプトが表示されたときにリモートユーザーのsudoパスワードを提供するために、-K引数も含めています。

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にはべき等の動作があるため、プレイブックを複数回実行しても、システムにすでに加えられた変更はトリガーされません。