部署环境

项目 说明

操作系统 macOS Catalina

安装软件 Docker

macOS或者windows直接在docker官网下载对应的桌面版进行安装，

Linux服务器可查看 Linux Docker 安装 官方安装指南

配置文件

创建需要的文件夹

mkdir -p ~/docker-nginx/{conf,conf.d,log,html}

目录 说明

conf 存放nginx缺省配置文件

conf.d 存放nginx各个服务配置文件

log 存放log配置文件

html 存放前端打包的发布文件

新增nginx配置文件

在~/docker-nginx/conf/目录下新增nginx.conf

vi ~/docker-nginx/conf/nginx.conf

user  nginx;
# 工作进程数 缺省为1； CPU核心数，(双核4线程，可以设置为4)
worker_processes  1;
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;
  keepalive_timeout  65;
  # 会扫描/etc/nginx/conf.d/文件夹下面所有的配置文件
  include            /etc/nginx/conf.d/*.conf;
}

在~/docker-nginx/conf.d/目录下新增default.conf

vi ~/docker-nginx/conf.d/default.conf

server {
    listen       80;
    # localhost 在发布时修改成对应的域名
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    # 反向代理配置，此配置可实现跨域，后端负载均衡等需求
    location /api {
        proxy_pass http://xxx.xxx.xxx.xxx:8080;
        # access_log "logs/test.log";
    }
}

启动容器

执行下面的命令在启动容器时会自动pull NGINX镜像

2docker run --name myNginx \
-d -p 80:80 \
-v ~/docker-nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v ~/docker-nginx/conf.d:/etc/nginx/conf.d \
-v ~/docker-nginx/log:/var/log/nginx \
-v ~/docker-nginx/html:/usr/share/nginx/html \
nginx

将前端打包的待发布的文件copy到~/docker-nginx/html

这里以vue项目为例将dist中的内容复制到html文件夹下

在浏览器访问 http://localhost:80

总结

Docker启动Nginx需要关注3个需要挂载出来的路径

分别存放了

• 服务配置文件
• 服务log输出文件夹（方便运维）
• 前端发布文件