/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h1: "h1", ul: "ul", li: "li", a: "a", h2: "h2", p: "p", div: "div", pre: "pre", code: "code", span: "span", h3: "h3" }, _provideComponents(), props.components), {Mermaid} = _components; if (!Mermaid) _missingMdxReference("Mermaid", true); return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "nginx" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "#nginx", children: "nginx" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#a-diagram", children: "A Diagram" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#a-webserver-for-web-developers", children: "A WebServer For Web Developers" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#spin-up-the-out-of-the-box-docker-image", children: "Spin Up The Out-Of-The-Box Docker Image" }) }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "#leverage-the-default-html-dir-to-serve-custom-assets", children: "Leverage the default html dir to serve custom assets" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#make-an-html-dir-and-file-to-serve", children: "make an html dir and file to serve" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "#run-the-container-and-mount-the-html-dir", children: "Run the container and mount the html dir" }) }), "\n"] }), "\n"] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "A Diagram" }), "\n", _jsx(Mermaid, { chart: ` flowchart LR STATICFILES["static files (index.html, etc.)"] WORLD["outside world"] subgraph nginxServer["nginx server"] subgraph dirPath["/usr/share/nginx/html"] STATICFILES end end WORLD --:8081-->nginxServer ` }), "\n", _jsx(_components.h2, { children: "A WebServer For Web Developers" }), "\n", _jsxs(_components.p, { children: ["Coming from a \"full-stack\"-first developer set of experiences, ", _jsx(_components.a, { href: "https://www.nginx.com/resources/glossary/nginx/", children: "nginx" }), " nginx might feel most similar to a web-server - something like an ", _jsx(_components.a, { href: "https://expressjs.com/", children: "express" }), " server with ", _jsx(_components.a, { href: "https://nodejs.org/en/", children: "node" }), ". nginx, though, is used for different use-cases - a reverse proxy, caching assets, load balancing... things that can compliment what node apps might be more traditionally built to do."] }), "\n", _jsx(_components.h2, { children: "Spin Up The Out-Of-The-Box Docker Image" }), "\n", _jsx(_components.div, { className: "remark-highlight", children: _jsx(_components.pre, { className: "language-bash", children: _jsxs(_components.code, { className: "language-bash", children: [_jsx(_components.span, { className: "token function", children: "docker" }), " run ", _jsx(_components.span, { className: "token parameter variable", children: "--name" }), " ngx ", _jsx(_components.span, { className: "token parameter variable", children: "-p" }), " ", _jsx(_components.span, { className: "token number", children: "8081" }), ":80 ", _jsx(_components.span, { className: "token parameter variable", children: "--hostname" }), " ng1 ", _jsx(_components.span, { className: "token parameter variable", children: "-d" }), " nginx\n"] }) }) }), "\n", _jsx(_components.p, { children: "A brief rundown -" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "use docker" }), "\n", _jsxs(_components.li, { children: ["name the container ", _jsx(_components.code, { children: "ngx" })] }), "\n", _jsxs(_components.li, { children: ["make the running container available on port ", _jsx(_components.code, { children: "8081" }), " on the host"] }), "\n", _jsxs(_components.li, { children: ["give it a hostname of ", _jsx(_components.code, { children: "ng1" })] }), "\n", _jsx(_components.li, { children: "run it in the background" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["with that running, a browser at ", _jsx(_components.code, { children: "localhost:8081" }), " should show something like"] }), "\n", _jsx(_components.div, { className: "remark-highlight", children: _jsx(_components.pre, { className: "language-text", children: _jsx(_components.code, { className: "language-text", children: "Welcome to nginx!\n\nIf you see this page, the nginx web server is successfully installed..." }) }) }), "\n", _jsx(_components.h2, { children: "Leverage the default html dir to serve custom assets" }), "\n", _jsxs(_components.p, { children: ["NGINX serves that html file above, that prints the above content, from a directory inside the container at ", _jsx(_components.code, { children: "/usr/share/nginx/html" })] }), "\n", _jsx(_components.h3, { children: "make an html dir and file to serve" }), "\n", _jsx(_components.div, { className: "remark-highlight", children: _jsx(_components.pre, { className: "language-bash", children: _jsxs(_components.code, { className: "language-bash", children: [_jsx(_components.span, { className: "token comment", children: "# create a directory to hold the file" }), "\n", _jsx(_components.span, { className: "token function", children: "mkdir" }), " html\n\n", _jsx(_components.span, { className: "token builtin class-name", children: "cd" }), " html\n", _jsx(_components.span, { className: "token function", children: "touch" }), " index.html\n\n", _jsx(_components.span, { className: "token function", children: "vi" }), " index.html\n"] }) }) }), "\n", _jsx(_components.p, { children: "fill the file with something simple for a p.o.c here:" }), "\n", _jsx(_components.div, { className: "remark-highlight", children: _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), " ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "This is my own html page!", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }) }), "\n", _jsx(_components.h3, { children: "Run the container and mount the html dir" }), "\n", _jsx(_components.div, { className: "remark-highlight", children: _jsx(_components.pre, { className: "language-bash", children: _jsxs(_components.code, { className: "language-bash", children: [_jsx(_components.span, { className: "token function", children: "docker" }), " run ", _jsx(_components.span, { className: "token parameter variable", children: "--name" }), " nx ", _jsx(_components.span, { className: "token parameter variable", children: "--hostname" }), " ng1 ", _jsx(_components.span, { className: "token parameter variable", children: "-p" }), " ", _jsx(_components.span, { className: "token number", children: "8081" }), ":80 ", _jsx(_components.span, { className: "token parameter variable", children: "-v" }), " ", _jsx(_components.span, { className: "token environment constant", children: "$PWD" }), "/html:/usr/share/nginx/html ", _jsx(_components.span, { className: "token parameter variable", children: "-d" }), " nginx\n"] }) }) }), "\n", _jsxs(_components.p, { children: ["Using a browser to view ", _jsx(_components.code, { children: "localhost:8081" }), " will show the ", _jsx(_components.code, { children: "This is my own html page!" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }