Ubuntu 20.04(Nginx)에서 Ansible를 사용하여 정적 HTML 웹 사이트를 배포하는 방법

Ubuntu 20.04(Nginx)에서 Ansible를 사용하여 정적 HTML 웹 사이트를 배포하는 방법

2022-06-01 last update

17 minutes reading Ansible Deployment Configuration Management Ubuntu
이 시리즈의 모든 부분을 따른다면, Ansible Playbook에 시스템 패키지를 설치하고, 템플릿을 적용하고, 프로세서를 사용하는 것에 익숙해야 합니다.이 시리즈의 이 부분에서 지금까지 본 내용을 사용하여 시나리오를 만들 것입니다. 이 시나리오는 Ubuntu 20.04에서 정적 HTML 사이트를 호스팅하기 위해 원격 Nginx 서버를 자동으로 설정합니다.
우선, Ansible 제어 노드에 새로운 디렉터리를 만들고 그 안에 Ansible 파일을 설정하고 원격 서버에 배치할 프레젠테이션 정적 HTML 사이트를 만듭니다.이것은 주 폴더에서 선택한 위치에 있을 수 있습니다.이 예에서 우리는 사용할 것이다 ~/ansible-nginx-demo.
  1. mkdir ~/ansible-nginx-demo
  2. cd ~/ansible-nginx-demo
다음은 기존 재고 파일을 새 디렉터리로 복사합니다.이 예제에서는 이 시리즈를 시작할 때 설정한 동일한 인벤토리를 사용합니다.
  1. cp ~/ansible-practice/inventory .
그러면 마스터 디렉토리 inventory 의 폴더에서 ansible-practice 라는 파일을 복사하여 현재 디렉토리에 저장합니다.

데모 사이트 가져오기


본 프레젠테이션에서는 정적 HTML 웹 사이트를 사용합니다. 이 웹 사이트는 How To Code in HTML 시리즈의 주제입니다.먼저 다음 명령을 실행하여 데모 사이트 파일을 다운로드합니다.
  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
그리고 다음 도구를 사용하여 프레젠테이션 웹 사이트 파일의 압축을 풀십시오.
  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 구성에 대한 템플릿 만들기


이제 원격 웹 서버를 구성하는 데 필요한 Nginx 템플릿을 설정합니다.ansible-demo 디렉터리에 비playbook 파일을 저장할 새 폴더를 만듭니다.
  1. mkdir files
그런 다음 nginx.conf.j2 라는 새 파일을 엽니다.
  1. nano files/nginx.conf.j2
이 템플릿 파일에는 정적 HTML 웹 사이트의 Nginx 서버 블록 구성이 포함되어 있습니다.이 변수는 document_root, app_root, server_nameplaybook.yml 세 가지 변수를 사용합니다.잠시 후에 우리는 대본을 만들 때 이 변수들을 정의할 것이다.템플릿 파일에 다음 내용을 복사합니다.
~/ansiblenginx 프레젠테이션/파일/nginx.형태
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;
  }
}
완료되면 파일을 저장하고 닫습니다.

새 Ansible 시나리오 만들기


다음은 새 Ansible 시나리오를 만들고 이 안내서의 이전 절에서 사용한 변수를 설정합니다.hosts라는 새 파일을 엽니다.
  1. nano playbook.yml
이 시나리오는 allbecome 명령으로 정의된 것부터 시작하여 Ansible가 기본적으로 루트 사용자로 모든 작업을 실행한다는 것을 알려줍니다. sudo 수동으로 명령을 실행하는 것과 같습니다.이 시나리오의 var 부분에서 우리는 세 가지 변수를 만들 것이다. server_name, document_root, app_root.이 변수는 Nginx 설정 템플릿에서 웹 서버가 응답할 도메인 이름이나 IP 주소, 웹 사이트 파일의 전체 경로를 설정하는 데 사용됩니다.이 프레젠테이션에서는 ansible_default_ipv4.address 사실 변수를 사용합니다. 원격 서버의 공용 IP 주소가 포함되어 있기 때문입니다. 그러나 서버가 DNS 서비스에서 도메인 이름을 이 서버를 가리키도록 올바르게 설정한 경우 서버의 호스트 이름으로 이 값을 바꿀 수 있습니다.
~/ansiblenginx 프레젠테이션/대본.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 패키지를 설치합니다.
~/ansiblenginx 프레젠테이션/대본.yml 회사
. . .
    - name: Update apt cache and install Nginx
      apt:
        name: nginx
        state: latest
        update_cache: yes

웹 사이트 파일을 원격 노드로 업로드


다음 작업은 copy 내장 모듈을 사용하여 사이트 파일을 원격 문서 루트 디렉터리에 업로드합니다.응용 프로그램 폴더를 만들 서버에 대상을 설정하려면 document_root 변수를 사용합니다.
~/ansiblenginx 프레젠테이션/대본.yml 회사
. . .
    - name: Copy website files to the server's document root
      copy:
        src: "{{ app_root }}"
        dest: "{{ document_root }}"
        mode: preserve

사용자 정의 Nginx 구성 적용 및 활성화


이제 Nginx 템플릿을 적용합니다. 이 템플릿은 정적 HTML 파일을 호스팅하기 위해 웹 서버를 설정합니다.구성 파일이 /etc/nginx/sites-available 로 설정되면 /etc/nginx-sites-enabled 에서 파일에 대한 기호 링크를 만들고 Nginx 서비스가 나중에 다시 시작될 것을 알립니다.전체 프로세스에는 두 개의 개별 작업이 필요합니다.
~/ansiblenginx 프레젠테이션/대본.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 액세스를 활성화하는 작업을 포함합니다.
~/ansiblenginx 프레젠테이션/대본.yml 회사
. . .
    - name: Allow all access to tcp port 80
      ufw:
        rule: allow
        port: '80'
        proto: tcp
. . .

Nginx 서비스에 대한 프로세서 만들기


이 시나리오를 완성하려면 Restart Nginx 프로세서를 설정하십시오.
~/ansiblenginx 프레젠테이션/대본.yml 회사
. . .
  handlers:
    - name: Restart Nginx
      service:
        name: nginx
        state: restarted  

실행 완료된 시나리오


시나리오 파일에 필요한 모든 작업이 포함되면 다음과 같습니다.
~/ansiblenginx 프레젠테이션/대본.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 이 필요하므로 Ansible 프롬프트에서 원격 사용자의 -K 암호를 제공하기 위해 sudo 매개 변수를 포함합니다.
  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를 사용하여 정적 HTML 사이트를 원격 Nginx 서버에 자동으로 배치했습니다.
프레젠테이션 사이트의 파일을 변경한 경우 시나리오를 다시 실행할 수 있으며, copy 작업은 모든 파일 변경이 원격 호스트에 반영되도록 합니다.Ansible는 멱 등의 동작을 가지고 있기 때문에 여러 번 플레이북을 실행하면 시스템에 대한 변경 사항을 촉발하지 않습니다.