VS Code devcontainer and Nginx

#devcontainer #vscode #nginx

Let's get started with using Nginx

(Now with access to the logfiles)

The purpose of this post is to show how one can get up and running with a playground for Nginx.

This is not a toturial for usning Nginx.

You'll need these ingredients to get up and running:

.devcontainer/devcontainer.json

{
    "name": "nginx-playground",
    "service": "dev-machine",
    "dockerComposeFile": "docker-compose.yml",
    "workspaceFolder": "/workspace",
    "remoteUser": "root",
    "mounts": [
       "source=${localWorkspaceFolder}/.devcontainer/.nginx/nginx.conf,target=/etc/nginx/nginx.conf,type=bind",
       "source=${localWorkspaceFolder}/html,target=/usr/share/nginx/html,type=bind"
    ],
    "postStartCommand": "nginx -s reload",
    "customizations": {
        "vscode": {
            "extensions": [
                "william-voyek.vscode-nginx"
            ]
        }
    }
}

.devcontainer/docker-compose.yml

name: nginx-playground-dc

services:
  dev-machine:
    build: 
      context: .
      dockerfile: Dockerfile.nginx
    volumes:
      - ..:/workspace
    networks:
      - internal
    ports:
      - "8472:80"
    command: ["nginx", "-g", "daemon off;"] # Move to foreground :)
    # command: ["sleep", "infinity"] --RUNNING IN THE BACKGROUND

networks:
  internal:
    driver: bridge

.devcontainer/Dockerfile.nginx

FROM nginx:alpine

EXPOSE 80

.devcontainer/.nginx/html/index.html

<!DOCTYPE html>
    <body>Hello</body>
</html>

.devcontainer/.nginx/nginx.conf/nginx.conf

events {}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /dev/stdout main;
    error_log   /dev/stderr;
    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

location /nginx_status {
    stub_status on;
    allow 127.0.0.1;  # Restrict access to localhost for security
    deny all;
}

Now run that devcontainer and open a browser on your host machine: