AnsibleでNginxをデプロイしてHello Worldを表示する方法とroles/nginxの各ディレクトリの解説（初心者向け）

# AnsibleでNginxをデプロイしてHello Worldを表示する方法
Ansibleの操作方法が少しずつわかってきたので、整理するためにブログを書いてみました。特に、`template`モジュールと`tasks`の使い方がよくわかっていなかったので、今回はAnsibleを使ってNginxの設定をデプロイし、"Hello World"を表示するまでの流れを紹介します。

## 今回やりたいこと
- `/etc/nginx/nginx.conf`をカスタムした設定でデプロイ
- `/etc/nginx/conf.d/test.conf`を作成
- "Hello World"を表示

※今回はAnsibleの初期設定は紹介しません。デプロイ部分からの内容になります。

## ディレクトリ構造

```bash
# roles/nginx の抜粋
nginx
├── defaults
├── files
│   └── index.html  # Hello World!!
├── handlers
│   └── main.yml
├── tasks
│   └── main.yml
└── templates
    ├── nginx.conf.j2
    └── test.conf.j2
```

#### 上記ディレクトリの簡単な解説
- **`defaults`**: ロール内で使用する変数のデフォルト値を設定
- **`files`**: リモートホストにそのままコピーする静的ファイルを配置
- **`handlers`**: タスクの変更時に実行されるアクションを定義
- **`tasks`**: 実行する具体的な処理を順序立てて記述
- **`templates`**: 変数を埋め込んだ設定ファイルのテンプレートを配置



## 設定内容

### `nginx/templates/` ディレクトリ内の情報

#### `nginx.conf.j2` の設定内容

`/etc/nginx/conf.d/` 配下の `.conf` ファイルを読み込む設定にします。

```nginx
# nginx.conf.j2
user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
    worker_connections 768;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    include /etc/nginx/conf.d/*.conf;
}
```

#### `test.conf.j2` の設定内容

```nginx
# test.conf.j2
server {
    listen 80;
    server_name localhost;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}
```

`server_name` を `localhost` に設定しています。これにより、`http://localhost` にアクセスすることでページを表示可能。実際の環境に合わせて `server_name` を変更してください。

### 表示させる`files/index.html` の内容
```html
<html>
<head>
    <title>Welcome to test</title>
</head>
<body>
    <h1>Hello World!!</h1>
</body>
</html>
```

### ハンドラーの設定

`handlers/main.yml` に Nginx をリロードするための設定を記載します。

```yaml
# handlers/main.yml
- name: Reload nginx
  service:
    name: nginx
    state: reloaded
```

## デプロイの場所などを指定する

何をどこにデプロイするかは、`tasks/main.yml` に記載します。

### `tasks/main.yml` の内容

```yaml
- name: Nginxをインストール
  apt:
    name: nginx
    state: present
    update_cache: yes

- name: nginx.conf をデプロイ
  template:
    src: nginx.conf.j2
    dest: /etc/nginx/nginx.conf
    owner: root
    group: root
    mode: '0644'
  notify:
    - Reload nginx

- name: test.conf をデプロイ
  template:
    src: test.conf.j2
    dest: /etc/nginx/conf.d/test.conf
    owner: root
    group: root
    mode: '0644'
  notify:
    - Reload nginx

- name: ドキュメントルートディレクトリを作成
  file:
    path: /var/www/html
    state: directory
    owner: www-data
    group: www-data
    mode: '0755'

- name: index.html を配置
  copy:
    src: index.html
    dest: /var/www/html/index.html
    owner: www-data
    group: www-data
    mode: '0644'

- name: Nginxサービスを起動し、有効化
  service:
    name: nginx
    state: started
    enabled: yes
```

#### タスクの説明

- **Nginxをインストール**: `apt` モジュールを使用して Nginx をインストール
- **nginx.conf をデプロイ**: `template` モジュールを使用し、`templates/nginx.conf.j2` を `/etc/nginx/nginx.conf` にデプロイ。変更があった場合は `Reload nginx` ハンドラーを通知します
- **test.conf をデプロイ**: 同様に、`templates/test.conf.j2` を `/etc/nginx/conf.d/test.conf` にデプロイ
- **ドキュメントルートディレクトリを作成**: `file` モジュールで `/var/www/html` ディレクトリを作成します
- **index.html を配置**: `copy` モジュールで、`files/index.html` を `/var/www/html/index.html` に配置します。`copy` モジュールの `src` はロールの `files` ディレクトリを基準としています
- **Nginxサービスを起動し、有効化**: `service` モジュールで Nginx を起動し、システム起動時に自動的に開始される設定

## まとめ
以上の設定を行うことで、Ansible を使って Nginx の設定をデプロイし、"Hello World" を表示するウェブサーバーを構築することができます。
実際にプレイブックを実行すると、`http://localhost` にアクセスすることで、"Hello World" と表示されたページを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812002/1ec5e89b-7895-e4c4-8922-e9cb413308a2.png)