|
|
|
|
移动端

如何使用官方NGINX Docker镜像?

NGINX是世界上最受欢迎的Web服务器之一。NGINX不仅是一种快速可靠的静态Web服务器,还被众多开发人员用作放在API前面的反向代理。

作者:布加迪编译来源:51CTO|2020-08-24 07:00

【51CTO.com快译】

NGINX是世界上最受欢迎的Web服务器之一。NGINX不仅是一种快速可靠的静态Web服务器,还被众多开发人员用作放在API前面的反向代理。

本教程将介绍NGINX官方Docker镜像及其使用方法。我们将从在本地运行静态Web服务器开始,然后构建自定义镜像以容纳Web服务器及它需要提供的文件。最后,我们将介绍为简单的REST API创建反向代理服务器,并介绍如何与您的团队共享该镜像。

先决条件

要完成本教程,您需要满足以下条件:

  • 免费的Docker帐户

您可以注册一个免费的Docker帐户(https://hub.docker.com/),并获得免费的无限公共存储库。

  • 本地运行的Docker

下载和安装Docker的说明(https://docs.docker.com/desktop/)。

  • 用于编辑文件的IDE或文本编辑器。我会推荐VSCode(https://code.visualstudio.com/Download)。

NGINX官方镜像

Docker官方镜像是托管在Docker Hub上的一组精选Docker存储库,已经过漏洞扫描,由Docker员工和上游维护者进行维护。

官方镜像是Docker新用户入门的好地方。这些镜像有清晰的文档,倡导最佳实践,是针对最常见的用例设计的。

不妨看一下NGINX官方镜像(https://hub.docker.com/_/nginx)。打开常用的浏览器,登录Docker。如果您还没有Docker帐户,可以免费创建一个(https://hub.docker.com/signup)。

一旦登录到Docker,在顶部搜索栏中输入“NGINX”,然后按回车键。官方的NGINX镜像应该是搜索结果中的第一个镜像。您会在搜索条目的右上角看到“官方镜像”标签。

图1

现在,点击nginx结果可查看镜像详细信息。

在镜像详细信息屏幕上,您可以查看镜像的描述及自述文件。您还可以通过点击“标签”选项卡来查看所有可用标签。

图2

运行基本的Web服务器

不妨使用NGINX官方镜像运行基本的Web服务器。运行以下命令以启动容器。

  1. $ docker run -it --rm -d -p 8080:80 --name web nginx 

运行上述命令后,您开始将容器作为守护程序(-d)来运行,并在主机网络上发布端口8080。您还使用--name选项命名了容器Web。

打开您常用的浏览器并导航到http://localhost:8080。您应该看到以下NGINX欢迎页面。

图3

很好,但运行Web服务器的目的是提供我们自己的自定义html文件,而不是默认的NGINX欢迎页面。

不妨停止容器,看看提供我们自己的HTML文件。

  1. $ docker stop web 

添加自定义HTML

默认情况下,Nginx在容器内的/usr/share/nginx/html目录中查找要提供的文件。我们需要将html文件放入该目录。一种很简单的方法是使用已挂载的卷。有了已挂载的卷,我们可以链接本地计算机上的目录,并将该目录映射到运行中的容器。

不妨创建一个自定义html页面,然后使用nginx镜像提供该页面。

创建一个名为site-content的目录。在该目录中添加index.html文件,并添加以下html:

  1. <!doctype html> 
  2. <html lang="en"
  3. <head> 
  4.   <meta charset="utf-8"
  5.   <title>Docker Nginx</title> 
  6. </head> 
  7. <body> 
  8.   <h2>Hello from Nginx container</h2> 
  9. </body> 
  10. </html> 

现在运行以下命令,该命令与上述命令相同,但现在我们添加了-v标志,以创建绑定挂载卷。这将我们的本地目录〜/ site-content本地挂载到运行中容器,该容器位于/usr/share/nginx

  1. $ docker run -it --rm -d -p 8080:80 --name web -v〜/ site-content:/ usr / share / nginx nginx 

打开常用的浏览器并导航到http://localhost:8080,您应该在浏览器窗口中看到上述的html。

图4

构建自定义的NGINX镜像

绑定挂载是在本地运行并将文件共享到运行中容器的绝佳选择。但如果我们想移动该镜像,并同时移动html文件,该怎么办?

有几个方法,不过最简单的方法之一是通过构建自定义镜像,将html文件复制到镜像中。

要构建自定义镜像,我们需要创建一个Dockerfile并将命令添加到其中。

在同一目录中,创建一个名为Dockerfile的文件,然后粘贴以下命令。

  1. FROM nginx:latest 
  2.  
  3. COPY ./index.html /usr/share/nginx/html/index.html 

我们开始使用基础镜像来构建自定义镜像。在第1行,您可以看到我们使用FROM命令执行此操作。这会将nginx:latest镜像拉到本地计算机上,然后在其上面构建自定义镜像。

接下来,我们将index.html文件复制到容器内的/usr/share/nginx/html目录中,覆盖nginx:latest镜像提供的默认index.html文件。

您会注意到,我们没有为Dockerfile添加ENTRYPOINT或CMD。我们将使用基础NGINX镜像提供的底层ENTRYPOINT和CMD。

要构建镜像,运行以下命令:

  1. $ docker build -t webserver . 

build命令将告诉Docker执行位于Dockerfile中的命令。您会在终端中看到类似的输出,如下所示:

图5

现在我们可以在容器中运行镜像,但是这回我们没必要创建绑定挂载以加入html。

  1. $ docker run -it --rm -d -p 8080:80 --name web webserver 

打开浏览器并导航到http:// localhost:8080,确保html页面已正确提供。

设置反向代理服务器

开发人员的一种常见情况是在反向代理后面运行REST API。这么做的原因有很多,但主要原因之一是在不同网络或IP上运行API服务器,然后前端应用程序开启。然后,您可以保护该网络,只允许来自反向代理服务器的流量。

为了简化和节省空间,我用React.js创建了一个简单的前端应用程序,并用Node.js编写了一个简单的后端API。运行以下命令从GitHub中提取代码。

  1. $ git clone https://github.com/pmckeetx/docker-nginx.git 

一旦您克隆了存储库,在常用的IDE中打开项目。看一下前端目录中的Dockerfile。

  1. FROM node:12.18.2 as build 
  2.  
  3. ARG REACT_APP_SERVICES_HOST=/services/m 
  4.  
  5. WORKDIR /app 
  6.  
  7. COPY ./package.json /app/package.json 
  8.  
  9. COPY ./package-lock.json /app/package-lock.json 
  10.  
  11. RUN yarn install 
  12.  
  13. COPY . . 
  14.  
  15. RUN yarn build 
  16.  
  17. FROM nginx 
  18.  
  19. COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf 
  20.  
  21. COPY --from=build /app/build /usr/share/nginx/html 

Dockerfile创建了多阶段构建。我们先构建了React.js应用程序,然后将nginx.conf文件从本地机器复制到镜像中,当初构建的静态html和javascript文件一并复制过去。

我们在frontend/nginx/nginx.conf文件中配置了反向代理。

  1. server {  
  2.  listen 80; 
  3.  server_name frontend; 
  4.  location / { 
  5.    # This would be the directory where your React app's static files are stored at 
  6.    root /usr/share/nginx/html; 
  7.    try_files $uri /index.html; 
  8.  } 
  9.   
  10.  location /services/m { 
  11.    proxy_set_header X-Real-IP $remote_addr; 
  12.    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  13.    proxy_set_header X-NginX-Proxy true
  14.    proxy_pass http://backend:8080/services/m; 
  15.    proxy_ssl_session_reuse off
  16.    proxy_set_header Host $http_host; 
  17.    proxy_cache_bypass $http_upgrade; 
  18.    proxy_redirect off
  19.  } 

正如您在第二个位置部分中看到的那样,所有前往/services/m的流量都将通过proxy_pass传输到http:// backend:8080/services/m。

该项目的根目录中有一个Docker Compose文件,它将启动前后端服务。不妨启动应用程序,测试反向代理是否正常运行。

  1. $ docker-compose -up 
  2. Creating network "docker-nginx_frontend" with the default driver 
  3. Creating network "docker-nginx_backend" with the default driver 
  4. Creating docker-nginx_frontend_1 ... done 
  5. Creating docker-nginx_backend_1  ... done 
  6. Attaching to docker-nginx_backend_1, docker-nginx_frontend_1 
  7. frontend_1  | /docker-entrypoint.sh: Configuration complete; ready for start up 
  8. backend_1   | Listening on port 8080 

您可以看到nginx Web服务器已启动,backend_1服务也已启动,在侦听端口8080。

打开浏览器并导航到http:// localhost。您应该会看到以下网页:

图6

打开开发者工具窗口,点击“网络”选项卡。现在回到浏览器,输入实体名称,可以是任何名称。我将使用“widgets”。然后点击“提交”按钮。

在开发者工具窗口中,点击widgets的网络请求,可以看到请求针对http://localhost而不是针对http:// localhost:8080。

图7

打开终端,会注意到从浏览器发出的请求已代理到backend_1服务,并已正确处理。

图8

运送镜像

现在不妨在Docker上共享镜像,以便我们团队中的其他人可以提取镜像并在本地运行。这也是与您团队之外的其他人(比如测试人员和企业主)共享您应用程序的好方法。

要将镜像推送到Docker的存储库,运行docker tag命令,然后运行docker push命令。您先要使用Docker ID登录。如果没有免费帐户,可以在此处创建一个(https://hub.docker.com/)。

  1. $ docker login 
  2. $ docker tag nginx-frontend <dockerid>/nginx-frontend 
  3. $ docker push <dockerid>/nginx-frontend 

结论

本文逐步介绍了如何运行NGINX官方镜像、添加自定义html文件、基于官方镜像构建自定义镜像以及将NGINX配置为反向代理。最后,我们将自定义镜像推送到Docker,以便我们可以与团队中的其他人共享。

原文标题:How To Use the Official NGINX Docker Image,作者:Peter McKee

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

【编辑推荐】

  1. 聊聊什么是裸金属服务器?
  2. 面试官:生产服务器变慢了,你能谈谈诊断思路吗
  3. 裸机服务器vs专用服务器:哪种是更好的Web托管选项?
  4. 如何预防服务器故障和从故障中恢复
  5. 宁畅发布支持A100 GPU服务器 “全布局”超前满足IT企业发展需求
【责任编辑:华轩 TEL:(010)68476606】


点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

136人订阅学习

搭建数据中心实验Lab

搭建数据中心实验Lab

实验平台Datacenter
共5章 | ITGO(老曾)

94人订阅学习

大数据安全运维实战

大数据安全运维实战

CDH+Ambari
共20章 | 大数据陈浩

91人订阅学习

视频课程+更多

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微