kitematic/docs/nginx-web-server.md

88 строки
3.1 KiB
Markdown
Executable File

<!--[metadata]>
+++
title = "Set up an Nginx web server"
description = "Tutorial demonstrating the setup of an Nginx web server using Docker and Kitematic"
keywords = ["docker, documentation, about, technology, kitematic, gui, nginx, tutorial"]
[menu.main]
parent="smn_workw_kitematic"
weight=1
+++
<![end-metadata]-->
# Kitematic Tutorial: Serving a Static Website with Nginx
In this tutorial, you will:
- Download and run a web server container
- Explore the container's website data natively on your Mac
- Use volumes to modify the website data
In this example website we'll be serving the popular 2048 game, as shown below.
Let's get to it!
![2048 game](../images/nginx-2048.png)
#### Running the Nginx Web Server Container
First, if you haven't yet done so, [download and start
Kitematic](/). Once installed and running, the app should look like this:
![Nginx create](../images/nginx-create.png)
Click on the _Create_ button of the `hello-world-nginx` listing as shown above.
Kitematic will download (also known as pull the image) and then run a tiny Nginx web server
in a Docker container, allowing it to serve website data to your Mac.
![download Nginx hello world](../images/nginx-hello-world.png)
Once it's done downloading you should see a quick preview of the example website
that comes with the container, as shown below. Click on the preview to see the
result in your own browser.
![Nginx preview](../images/nginx-preview.png)
**What just happened?** Kitematic downloaded the `kitematic/hello-world-nginx`
image from the Docker Hub and then created and ran a Docker Nginx container from
this image.
#### Viewing the Website Data in Finder
This container exposes website data via a _Docker volume_. Kitematic makes
managing Docker volumes easy - you can edit the data in Finder or with your
favorite text editor. By default, Kitematic places volumes under `~/Kitematic`
but you can change this in the container settings. To access the files via
finder, click on the in-app folder icon for a container and "Enable all volumes
to edit via Finder":
![Nginx data volume](../images/nginx-data-volume.png)
A Finder window of the folder should open containing the index.html file we see
being served by the container.
![Nginx data folder](../images/nginx-data-folder.png)
#### Serving Your Own Website Data
Now let's try serving a more interesting website. [Download the zipped
files](https://github.com/gabrielecirulli/2048/archive/master.zip) for 2048, a
popular (and addictive) web-based tile game. Extract this zip file into the
folder you just opened:
![Website files for 2048](../images/nginx-2048-files.png)
Switch back to Kitematic and restart the container by clicking the "Restart"
button as shown below. Your Nginx container should now be serving 2048.
![Nginx running 2048](../images/nginx-serving-2048.png)
**What just happened?**
Kitematic can map Docker container volumes to directories on your
Mac. In this case you changed the container's volume data via the Finder to
serve a website we downloaded.
## Next Steps
For an example using Kitematic to run a Local RethinkDB database, take a look at
the [RethinkDB development Database](./rethinkdb-dev-database.md) example.