如何在Docker中使用nginx服务静态应用程序

尼耳多
256 阅读2分钟

让我们创建一个静态网站，并学习如何使用nginx在Docker容器中为其服务。首先，我们要创建一个带有一些资产的简单静态网站。

创建一个样本网站

我们可以建立一个名为static-site-nginx 的目录，在这个目录中，让我们建立一个index.html 文件，一个styles.css 文件，以及一个index.js 文件。

mkdir static-site-nginx
cd static-site-nginx
touch index.html styles.css index.js

接下来，在每个文件中放入以下内容。这最终会成为一个非常简单的网站，有一个风格化的h1 元素和一个动态计数器。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Static Site</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>My counter app</h1>
    <p>Here's the count: <span>0</span></p>
    <button>Click me</button>
    <script src="./index.js"></script>
  </body>
</html>

styles.css

h1 {
  font-family: sans-serif;
  color: blue;
}

index.js

const count = document.querySelector('span');
const button = document.querySelector('button');
button.addEventListener('click', function () {
  count.textContent = parseInt(count.textContent) + 1;
});

运行应用程序（首先不使用Docker）。

为了让我们知道我们在处理什么，让我们来运行这个应用程序。我使用npmserve 包作为本地开发服务器，但任何服务器都可以工作。

如果我们在浏览器中拉出这个应用程序，我们应该看到以下的用户界面/功能。 image.png

如果你已经走到了这一步，那就好了！现在是时候让你的应用程序停靠在一个地方了。现在是时候对应用程序进行dockerize了。

一个必要的文件

现在，我们只需要一个文件来为Docker配置我们简单的静态网站：一个Dockerfile 。

touch Dockerfile

在一个更复杂的应用程序中，我们可能需要其他文件（例如，.dockerignore 文件），但目前这一个文件应该可以满足我们的需要。

构建Docker文件

是时候建立Dockerfile了!我们的Dockerfile配置相对简单：它只需要安装nginx，复制静态资产，并指定容器的入口。

琐事。

  • 使用一个nginx镜像
  • 从nginx镜像中删除任何默认的静态资产
  • 复制我们的静态资产
  • 为我们的容器指定运行nginx的入口点

下面是Docker文件中的内容。

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets over
COPY ./* ./
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

现在我们已经完成了Docker文件，让我们建立一个名为static-nginx 的镜像。

docker build -t static-nginx .

现在我们的镜像已经建成，我们可以用下面的命令启动一个容器，它将在8080端口为我们的应用程序提供服务。

docker run --rm -it -p 8080:80 static-nginx

导航到http://localhost:8080，现在你应该看到我们的应用程序在运行了!

avatar
文章
阅读
粉丝