Docker compose with nginx一直显示欢迎页面

时间:2018-06-05 17:30:11

标签: docker nginx docker-compose

我是 docker 的新手,并尝试使用最简单的docker-compose.yml,显示一个hello world页面,最终构建一个完整的 LEMP堆栈那将与我的服务器具有相同的配置。但是大多数教程都已过时,并且有很多使用 docker 的方法,我只能使用仍然是实际的 Docker compose v3找到一个。我检查过这些文档,对于一个初学者来说也是如此令人困惑,一直试图让它在过去的5个小时内发挥作用,所以我想我一直在问这个问题。

搬运工-compose.yml

version: '3'
services:
  web:
    image: bitnami/nginx:1.10.3-r0 #using this version as it's the same on my server
    volumes:
      - "./test.conf:/etc/nginx/sites-available/test.local"
      - "./test.conf:/etc/nginx/sites-enabled/test.local"
      - "./code:/var/www/html" #code contains only a basic index.html file
    ports:
      - "80:80"

test.conf

server {
    listen 80;
    listen [::]:80;
    server_name test.local;

    index index.html; #Only a basic helloworld index.html file
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html;
}

我需要一个 Dockerfile 吗?教程似乎并没有提到它。

注意:
尝试添加音量

- "./default.conf:/etc/nginx/conf.d/default.conf"

但没有任何变化,欢迎页面仍然加载,而使用 nginx:latest 我得到一个非常详细的错误,其中包含以下短语:" unknown:您是否正在尝试将目录挂载到文件(反之亦然)?检查指定的主机路径是否存在且是预期的类型"。

关于docker-compose.yml的更新:

  • 如果没有行"./code:/usr/share/nginx/html",则/usr/share/nginx/html文件夹包含默认的index.html文件(预期)
  • 使用第"./code:/usr/share/nginx/html"行,/usr/share/nginx/html文件夹 EMPTY
  • 使用第"./:/usr/share/nginx/html"行,/usr/share/nginx/html文件夹有空白"代码"文件夹和我前一段时间删除的一堆随机测试文件。

在尝试之间,我运行我的重置脚本以确保我重新开始:

docker rm $(docker ps -a -q)
docker rmi $(docker images -q) --force
docker volume rm $(docker volume ls -q)

正在运行docker inspect <container>会为卷返回此值,不确定该类型是&#34; bind&#34;作为bind mount代替volume

"Mounts": [
    {
        "Type": "bind",
        "Source": "/e/DEV/sandbox/docker",
        "Destination": "/usr/share/nginx/html",
        "Mode": "rw",
        "RW": true,
        "Propagation": "rprivate"
    }
],

2 个答案:

答案 0 :(得分:5)

您可以轻松安装自己的hello world页面。我将使用官方的nginx:latest图片对其进行解释,但如果您愿意,可以使用bitnami图片自行完成。

首先是非常基本的。只需运行nginx容器(不使用docker-compose)。我将详细解释它的基本内容,当然我可以尝试执行更高级或更快的命令来读取容器内的文件,但这对于初学者来说可能会让人感到困惑。因此,只需运行容器并将其命名为my-nginx

$ docker run --rm -d -p 80:80 --name my-nginx nginx

转到localhost:80,您将看到默认的nginx页面。 现在,您可以使用它的名称在容器内执行。执行官会把你带到容器里面&#39;所以你可以查看它的文件。

$ docker exec -it my-nginx bash
root@2888fdb672a1:/# cd /etc/nginx/
root@2888fdb672a1:/etc/nginx# ls
conf.d      koi-utf  mime.types  nginx.conf   uwsgi_params
fastcgi_params  koi-win  modules     scgi_params  win-utf

现在使用nginx.conf阅读cat。 此文件中最重要的一行是:

include /etc/nginx/conf.d/*.conf;

这意味着使用/读取该目录中的所有confs。 所以进入/etc/nginx/conf.d/

root@2888fdb672a1:~# cd /etc/nginx/conf.d/
root@2888fdb672a1:/etc/nginx/conf.d# ls
default.conf

default.conf是唯一的文件。在此文件中,您可以看到配置:

listen       80;
server_name  localhost;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

服务器是本地主机,端口是80,将显示的文件位于目录/usr/share/nginx/html/

现在检查容器中的文件:

root@2888fdb672a1:/etc/nginx/conf.d# cat /usr/share/nginx/html/index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
...

它是预期的文件。欢迎来到Nginx&#39;欢迎来到Nginx&#39;我们可以看到的页面。 那么我们如何才能展示自己的index.html?只需将其安装在/usr/share/nginx/html

docker-compose.yaml将会是这样的。

version: '3'
services:
  web:
    image: nginx:latest
    volumes:
      - ./code:/usr/share/nginx/html
    ports:
      - "80:80"

代码目录只包含一个带有hello world的index.html。 运行docker-compose up -d --build,当您卷曲localhost:80时,您将看到自己的index.html

如果您真的想将代码放在/var/www/html而不是/usr/share/nginx,那么您可以这样做。

使用您的test.conf。在这里,您可以定义将文件放在/var/www/html/

server {
    listen 80;
    listen [::]:80;
    server_name test.local;

    index index.html; #Only a basic helloworld index.html file
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html;
}

在撰写时,您将用自己的conf覆盖default.conf,告诉nginx查看/var/www/html。 你的作品看起来像这样:

version: '3'
services:
  web:
    image: nginx:latest
    volumes:
      - "./test.conf:/etc/nginx/conf.d/default.conf"
      - "./code:/var/www/html"
    ports:
      - "80:80"

现在,您还可以在自己指定的位置看到自己的index.html。答案很长,但我希望这会有所帮助。

答案 1 :(得分:0)

在这个问题上苦苦挣扎之后,我发现了使我使用 docker-compose 进行部署的三个因素。
我在 nodejs 中做了一个网站。

我们在端口 80 上公开 web 部件和 nginx


nodejs 的 Dockerfile :[重要的一行是 -> EXPOSE 80 ]

FROM node:14-alpine

WORKDIR /
COPY package.json ./
EXPOSE 80

RUN npm install

COPY . .

CMD ["node", "bin/www"]

Nginx.conf for nginx : [ 重要的一行是 -> listen 80; ]

events {

}

http {
  server {
    listen 80;

    location / {
      proxy_pass http://nodejs:3000;
    }
  }
}

我们给nginx配置文件,web镜像的名称和端口


docker-compose.yaml :
[important line is -> image: nodejs ] 即网络图片的名称

[important line is -> ports: -"3000:3000" ] 那是运行web部分的端口

version: "3.7"

services:
  nodejs:
    build:
      context: .
      dockerfile: Dockerfile
    image: nodejs
    container_name: nodejs
    restart: unless-stopped
    networks:
      - app-network
    ports:
      - "3000:3000"

  webserver:
    image: nginx
    container_name: webserver
    restart: unless-stopped
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/:/etc/nginx/conf.d
    depends_on:
      - nodejs
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

Nginx.conf for nginx : [ 重要的一行是 -> proxy_pass http://nodejs:3000; ]

events {

}

http {
  server {
    listen 80;

    location / {
      proxy_pass http://nodejs:3000;
    }
  }
}

我们将nginx的镜像、卷作为配置文件的路径来替换默认的


树:

mainfolder
.
|_____nginx
|  |______nginx.conf
|
|_____Dockerfile
|
|_____docker-compose.yaml

docker-compose.yaml :
[重要的一行是 -> ./nginx/nginx.conf:/etc/nginx/nginx.conf ] 替换配置文件

version: "3.7"

services:
  nodejs:
    build:
      context: .
      dockerfile: Dockerfile
    image: nodejs
    container_name: nodejs
    restart: unless-stopped
    networks:
      - app-network
    ports:
      - "3000:3000"

  webserver:
    image: nginx
    container_name: webserver
    restart: unless-stopped
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - nodejs
    networks:
      - app-network

networks:
  app-network:
    driver: bridge