зеркало из https://github.com/docker/kitematic.git
88 строки
3.1 KiB
Markdown
Executable File
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.
|