docker + nginx 配置多web项目详解

最新推荐文章于 2024-06-24 17:30:00 发布

s清风s

最新推荐文章于 2024-06-24 17:30:00 发布

阅读量4.1k

点赞数 2

分类专栏： Linux 文章标签： nginx vue web docker

本文链接：https://blog.csdn.net/u010381752/article/details/115460933

版权

Linux 专栏收录该内容

11 篇文章 8 订阅

订阅专栏

下载Nginx

官方镜像地址：官方镜像地址

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

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

# 查询官方镜像 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
#QQ：                  3431463
#Date：                2021-04-02
#FileName：            nginx.sh
#URL：                 https://blog.csdn.net/u010381752
#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这个路径加个点进去。

最终效果

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

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

s清风s

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
5
评论
docker + nginx 配置多web项目详解

下载Nginx官方镜像地址：官方镜像地址打开官网滚动到中间，就可以看到下面这些镜像集合，供你选择# 查询官方镜像 nginxdocker search nginx# 下载对新版本的 nginxdocker pull nginx# 当然下最小的更好，毕竟节省很多空间docker pull nginx:1.19.9-alpine# 需要注意的是，完整版跟最小版进去镜像容器的方式有点不同# 完整版docker exec -it 镜像ID /bin/bash# 最小版（al
复制链接

扫一扫