下载Nginx

官方镜像地址:官方镜像地址

对了,还没有安装docker的同学,出门左转。

打开官网滚动到中间,就可以看到下面这些镜像集合,供你选择

Docker容器部署 Nginx服务 docker部署web项目 nginx_web

 

# 查询官方镜像 nginx
docker search nginx

# 下载对新版本的 nginx
docker pull nginx

# 当然下最小的更好,毕竟节省很多空间
docker pull nginx:1.19.9-alpine

# 需要注意的是,完整版跟最小版进去镜像容器的方式有点不同
# 完整版
docker exec -it 镜像ID /bin/bash
# 最小版(alpine)
docker exec -it 镜像ID sh

启动镜像

# 启动一个nginx镜像
docker run -p 80:80 -d nginx:1.19.9-alpine

# 启动之后宿主机的浏览器就可以 localhost 访问了

数据卷的配置

volume

nginx运行到镜像里面之后,他默认与宿主机是桥接的网络,上面配置的端口映射就是把宿主机的80端口给了它,让它用了。正常情况的运营下,我们不希望每次都要登录容器去修改nginx的相关配置,所以这里使用docker的数据卷,把镜像里面的目录挂载到宿主机对应的文件路径中,这样我们只需要管理宿主机的配置文件即可,更重要的一点就是,镜像中产生的所有数据,都会在镜像被删除后消失!

# 把镜像里面的配置路径,同步到宿主机的目录,这样nginx跑的环境独立,配置文件确可以在外面修改
docker run -it -v /宿主机目录:/容器目录 镜像名

# 新手可以先启动一个镜像,然后通过命令进入到容器里面,找到对应的目录,然后对应的配置下即可

# 一个完整的例子
docker run -d -p 80:80  \
              -p 443:443  \
 --name tommynginx \
 --link answer-server:answerserver \
 -v /usr/local/docker/nginx/html:/usr/share/nginx/html \
 -v /usr/local/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
 -v /usr/local/docker/nginx/conf/conf.d:/etc/nginx/conf.d \
 -v /usr/local/docker/nginx/logs:/var/log/nginx \
 nginx

先创建一个nginx文件夹,专门用于存放镜像映射的文件数据,当然创建文件夹很烦,写了个脚本统一创建一下,在你创建好的nginx文件夹下,运行以下脚本即可。

#!/bin/bash                                                                                                                                         
#
#********************************************************************
#Author:               tommy
#Date:                2021-04-02
#FileName:            nginx.sh
#URL:                
#Description:         create nginx's volume dir
#Copyright (C):       2021 All rights reserved
#********************************************************************
#

echo "create nginx dir"

mkdir conf
mkdir html
mkdir conf/conf.d
mkdir conf/conf.conf
mkdir logs
cat > conf/nginx.conf <<eof
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

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

echo "finished"

运行挂载数据卷的镜像

一个最简单容器中nginx.conf配置文件内容

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}
# 运行之前,先删除你之前测试运行的镜像跟容器
# 镜像
docker images 
# 删除镜像(加-f 为强制删除)
docker rmi -f 镜像id

# 容器
docker ps -a

# 一般情况下我们删除容器中运行的镜像
docker stop CONTAINER ID/容器NAMES
# 删除容器
docker rm CONTAINER ID/容器NAMES

# 拿我本机为例,运行一个最小的nginx镜像,并且挂载数据卷目录到宿主机中的对应文件夹
# 值得注意的是,既然我们在启动命令中,使用了我们外面的nginx.conf的配置文件
# 那么事先我们就必须创建好这个文件并且,放到对应的目录下,而且配置好,新手直接复制粘贴我上面的
docker run -d -p 80:80  \
 -v /home/tommy/docker/nginx/html:/usr/share/nginx/html \
 -v /home/tommy/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
 -v /home/tommy/docker/nginx/conf/conf.d:/etc/nginx/conf.d \
 -v /home/tommy/docker/nginx/logs:/var/log/nginx \
 -d nginx:1.19.9-alpine

 

nginx.conf文件配置

一般配置简介说明

正常的线上服务器nginx不可能之代理一个东西,比如说代理了几个前端项目,有web、有后台管理、有后端接口、有小程序等等……

前端打出来的静态项目dist直接放在 /home/tommy/docker/nginx/html 目录下,就可以直接访问了,如果有多个项目dist,那么就分多个文件夹,然后nginx配置多个目录去访问,代理配置如下

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    include /etc/nginx/conf.d/*.conf;
    
     server {
            # 监听 80 端口 值得注意的是,这里的localhost是镜像里面的
        listen       80;
        server_name  localhost;
        
        # 指定外面访问到 localhost 下的跟,这里的跟又映射到了宿主机路径去
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }
            
        # 多个项目(后台管理系统)
        location /manage {
            alias  /usr/share/nginx/html/manage/dist;
            index  index.html;
        }
        
        # 多个项目(前端H5客户端)
        location /webapp {
            alias  /usr/share/nginx/html/webapp/dist;
            index  index.html;
        }
        
        # 后端应用的接口反向代理
        location /api/ {
           rewrite ^/api(/.*)$ $1 break;
           proxy_pass http://192.168.120.142:8099;
           proxy_redirect     off;
           proxy_set_header   Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
           proxy_set_header Authorization $http_Authorization;
        } 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

遇到的问题

vue项目找不到资源路径

测试项目的git地址:https://github.com/PanJiaChen/vue-admin-template

跑起来nginx后,把打包好的dist丢到对应目录下面,然后访问出现如下问题:

2021/04/06 06:28:15 [error] 22#22: *20 open() 
"/usr/share/nginx/html/static/js/chunk-libs.6a4a6ded.js" 
failed (2: No such file or directory), client: 172.17.0.1, server: localhost,
request: "GET /static/js/chunk-libs.6a4a6ded.js HTTP/1.1", 
host: "www.localhost", referrer: "http://www.localhost/manage/"

丢在,manage/dist 下面的项目,到/usr/share/nginx/html/跟目录去寻找资源了,这是因为项目打包的时候出现的问题,拿vue来说,是因为打包的配置有点小问题,如下图,publicPath这个路径加个点进去。

Docker容器部署 Nginx服务 docker部署web项目 nginx_web_02

最终效果

最终,浏览器输入:localhost/manage  或者 localhost/webapp 就可以访问你的静态dist资源了

Docker容器部署 Nginx服务 docker部署web项目 nginx_Docker容器部署 Nginx服务_03

反响代理的 api 接口地址也可以访问了,原本应该是 localhost:8099/user/list 这样就可以用api代替端口

Docker容器部署 Nginx服务 docker部署web项目 nginx_web_04