# Setting up an NGINX demo environment Type of document: How-to guide Product: NGINX Plus > Configure NGINX Open Source as a web server and F5 NGINX Plus as a load balancer, as required for the sample deployments in NGINX deployment guides. --- The instructions in this guide explain how to set up a simple demo environment that uses F5 NGINX Plus to load balance web servers that run NGINX Open Source and serve two distinct web applications. It is referenced by some of our deployment guides for implementing highly availability of NGINX Plus and NGINX Open Source in cloud environments. ## Prerequisites This guide assumes you have already provisioned a number of host systems (physical servers, virtual machines, containers, or cloud instances) required for a deployment guide (if applicable) and installed NGINX Open Source or NGINX Plus on each instance as appropriate. For installation instructions, see the [NGINX Plus Admin Guide](nginx/admin-guide/installing-nginx/installing-nginx-plus.md). Some commands require `root` privilege. If appropriate for your environment, prefix commands with the `sudo` command. ## Configuring NGINX Open Source for web serving The steps in this section configure an NGINX Open Source instance as a web server to return a page like the following, which specifies the server name, address, and other information. The page is defined in the **demo-index.html** configuration file you create in Step 4 below. If you are using these instructions to satisfy the prerequisites for one of our deployment guides, the Appendix in the guide specifies the name of each NGINX Open Source instance and whether to configure **App 1** or **App 2**. **Note:** Some commands require `root` privilege. If appropriate for your environment, prefix commands with the `sudo` command. 1. Open a connection to the NGINX Open Source instance and change the directory to **/**etc/nginx/conf.d**: ```shell cd /etc/nginx/conf.d ``` 2. Rename **default.conf** to **default.conf.bak** so that NGINX Plus does not use it. ```shell mv default.conf default.conf.bak ``` 3. Create a new file called **app.conf** with the following contents. ```nginx server { listen 80 default_server; server_name app_server; root /usr/share/nginx/html; error_log /var/log/nginx/app-server-error.log notice; index demo-index.html index.html; expires -1; sub_filter_once off; sub_filter 'server_hostname' '$hostname'; sub_filter 'server_address' '$server_addr:$server_port'; sub_filter 'server_url' '$request_uri'; sub_filter 'remote_addr' '$remote_addr:$remote_port'; sub_filter 'server_date' '$time_local'; sub_filter 'client_browser' '$http_user_agent'; sub_filter 'request_id' '$request_id'; sub_filter 'nginx_version' '$nginx_version'; sub_filter 'document_root' '$document_root'; sub_filter 'proxied_for_ip' '$http_x_forwarded_for'; } ``` Directive documentation: [error_log](http://nginx.org/en/docs/ngx_core_module.html#error_log), [expires](http://nginx.org/en/docs/http/ngx_http_headers_module.html#expires), [index](http://nginx.org/en/docs/http/ngx_http_index_module.html#index), [listen](http://nginx.org/en/docs/http/ngx_http_core_module.html#listen), [root](http://nginx.org/en/docs/http/ngx_http_core_module.html#root), [server](http://nginx.org/en/docs/http/ngx_http_core_module.html#server), [server_name](http://nginx.org/en/docs/http/ngx_http_core_module.html#server_name), [sub_filter](http://nginx.org/en/docs/http/ngx_http_sub_module.html#sub_filter) 4. Include the following directive in the top‑level ("main") context in **/etc/nginx/nginx.conf**, if it does not already appear there. ```nginx include conf.d/*.conf; ``` Directive documentation: [include](http://nginx.org/en/docs/ngx_core_module.html#include) 5. In the **/usr/share/nginx/html** directory, create a new file called **demo-index.html** with the following contents, which define the default web page that appears when users access the instance. In the `` tag, replace the comment with `1` or `2` depending on whether the instance is serving **App 1** or **App 2**. ```html <!DOCTYPE html> <html> <head> <title>Hello World - App X <!-- Replace 'X' with '1' or '2' as appropriate --> NGINX Logo

Server name: server_hostname

Server address: server_address

User Agent: client_browser

URI: server_url

Doc Root: document_root

Date: server_date

NGINX Frontend Load Balancer IP: remote_addr

Client IP: proxied_for_ip

NGINX Version: nginx_version

Auto Refresh
``` ## Configuring NGINX Plus for load balancing The steps in this section configure an NGINX Plus instance to load balance requests across the group of NGINX Open Source web servers you configured in the [previous section](#nginx-oss). If you are using these instructions to satisfy the prerequisites for one of our deployment guides, the Appendix in the guide specifies the names of the NGINX Plus instances used in it. Repeat these instructions on each instance. Alternatively, you can configure one instance and share the configuration with its peers in a cluster. See the [NGINX Plus Admin Guide](nginx/admin-guide/high-availability/configuration-sharing.md). 1. Open a connection to the NGINX Plus instance and change the directory to **/**etc/nginx/conf.d**: ```shell cd /etc/nginx/conf.d ``` 2. Rename **default.conf** to **default.conf.bak** so that NGINX Plus does not use it. ```shell mv default.conf default.conf.bak ``` 3. Create a new file called **lb.conf** with the following contents. **Note:** In the `upstream` blocks, include a [server](https://nginx.org/en/docs/http/ngx_http_upstream_module.html#server) directive for each NGINX Open Source instance that serves the relevant application. ```nginx # in the 'http' context upstream app1 { server ; # 'server' directives for additional App 1 servers, if using zone app1 64k; } upstream app2 { server ; # 'server' directives for additional App 2 servers, if using zone app2 64k; } server { listen 80; status_zone backend; root /usr/share/nginx/html; location / { # directives for serving the site's HTML landing page } location /application1 { proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; proxy_pass http://app1/; } location /application2 { proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; proxy_pass http://app2/; } location /api { api write=on; # directives to control access, such as 'allow' and 'deny' } location = /dashboard.html { root /usr/share/nginx/html; } location = /status.html { # redirect requests that are made to pre-R14 dashboard return 301 /dashboard.html; } } ``` Directive documentation: [api](https://nginx.org/en/docs/http/ngx_http_api_module.html#api), [listen](https://nginx.org/en/docs/http/ngx_http_core_module.html#listen), [location](https://nginx.org/en/docs/http/ngx_http_core_module.html#location), [proxy_pass](https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass), [proxy_set_header](https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_set_header), [return](https://nginx.org/en/docs/http/ngx_http_rewrite_module.html#return), [root](https://nginx.org/en/docs/http/ngx_http_core_module.html#root), [server](https://nginx.org/en/docs/http/ngx_http_upstream_module.html#server) (upstream),[server](https://nginx.org/en/docs/http/ngx_http_core_module.html#server) (virtual), [server_name](https://nginx.org/en/docs/http/ngx_http_core_module.html#server_name), [status_zone](https://nginx.org/en/docs/http/ngx_http_status_module.html#status_zone), [upstream](https://nginx.org/en/docs/http/ngx_http_upstream_module.html#upstream), [zone](https://nginx.org/en/docs/http/ngx_http_upstream_module.html#zone) 4. Include the following directive in the top‑level ("main") context in **/etc/nginx/nginx.conf**, if it does not already appear there. ```nginx include conf.d/*.conf; ``` Directive documentation: [include](http://nginx.org/en/docs/ngx_core_module.html#include) ### Revision history - Version 2 (April 2019) – Generalized instructions for use with deployment guides - Version 1 (April 2018) – Initial version