下载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
#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这个路径加个点进去。
最终效果
最终,浏览器输入:localhost/manage 或者 localhost/webapp 就可以访问你的静态dist资源了
反响代理的 api 接口地址也可以访问了,原本应该是 localhost:8099/user/list 这样就可以用api代替端口