Docker 容器部署前端项目及nginx配置修改，nginx.conf文件修改！！！！

Docker 部署前端项目及nginx配置nginx.conf的修改

第一步：拉取nginx

#默认拉取最新版本。
docker pull nginx
#指定ngnix版本 (二选一)
docker pull nginx:版本号

#*查看docker镜像*
docker images

REPOSITORY   TAG       IMAGE ID       CREATED         SIZE
nginx        latest    605c77e624dd   2 years ago     141MB

第二步：启动nginx（启动一个不挂载的nginx容器）

#-d 后台启动.
#--name 容器名.
#-p 将容器内的 80 端口映射到宿主机的 80 端口，允许通过宿主机的 80 端口访问 Nginx 服务.
#nginx:latest 镜像名.
docker run -d --name nginx -p 80:80 nginx:latest

#查看正在运行的容器
docker ps 或 docker ps -a

CONTAINER ID   IMAGE             COMMAND                  CREATED          STATUS          PORTS                                                  NAMES
a8fa02aa7805   nginx:latest      "/docker-entrypoint.…"   34 minutes ago   Up 34 minutes   0.0.0.0:80->80/tcp, :::80->80/tcp                      nginx

第三步：创建挂载目录

​ Nginx挂载是指将宿主机某个文件夹或目录作为Nginx容器的根目录进行访问，用于存放默认页面、日志、配置文件。
​ 优点：

1. 方便网站配置和管理。
2. 提高服务器的安全性，因为攻击者无法直接访问服务器的根目录。
3. 通过对不同目录进行挂载，可以针对不同的网站进行定制化的配置。

#-p 参数的作用就是允许创建多级目录
mkdir -p /root/workspace/nginx/conf
mkdir -p /root/workspace/nginx/logs
mkdir -p /root/workspace/nginx/html

第四步：将容器内的文件复制到宿主机（挂载目录）

docker cp nginx:/etc/nginx/nginx.conf /root/workspace/nginx/conf/nginx.conf
docker cp nginx:/etc/nginx/conf.d /root/workspace/nginx/conf/
docker cp nginx:/usr/share/nginx/html /root/workspace/nginx/

#查看目录结构
tree

├── conf
│   ├── conf.d
│   │   └── default.conf
│   └── nginx.conf
├── html
│   ├── 50x.html
│   └── index.html
└── logs

第五步：关闭和删除已启动的nginx容器

#查询nginx对应的容器id
docker ps -a
#停止容器
docker stop 容器id
#删除容器
docker rm 容器id
#删除正在运行的
docker rm -f 容器id

第六步：重新启动一个有挂载目录的nginx容器

docker run \
-p 80:80 \
--name nginx \
-v /root/workspace/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /root/workspace/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /root/workspace/nginx/logs:/var/log/nginx \
-v /root/workspace/nginx/html:/usr/share/nginx/html \
-d nginx:latest

#上述命令的解释
docker run \
-p 80:80 \ # 将容器内的 80 端口映射到宿主机的 80 端口，允许通过宿主机的 80 端口访问 Nginx 服务。
--name nginx \ # 为容器指定一个名称，这里是 "nginx"。
-v /root/workspace/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \ # 将宿主机上的 /root/workspace/nginx/conf/nginx.con 文件挂载到容器内的 /etc/nginx/nginx.conf 文件，用于设置 Nginx 的主配置文件。
-v /root/workspace/nginx/conf/conf.d:/etc/nginx/conf.d \ # 将宿主机上的 /root/workspace/nginx/conf/conf.d 目录挂载到容器内的 /etc/nginx/conf.d 目录，用于存放额外的配置文件。
-v /root/workspace/nginx/logs:/var/log/nginx \ # 将宿主机上的 /root/workspace/nginx/logs 目录挂载到容器内的 /var/log/nginx 目录，用于存放 Nginx 的日志文件。
-v /root/workspace/nginx/html:/usr/share/nginx/html \ # 将宿主机上的 /root/workspace/nginx/html 目录挂载到容器内的 /usr/share/nginx/html 目录，用于存放 Nginx 提供的静态 HTML 文件。
-d nginx:latest # 镜像名

第七步：部署前端项目

将打包好的前端项目（例如：dist.zip）上传的宿主机的 /root/workspace/nginx/html 目录下，并解压（命令：unzip dist.zip）。

#查看目录结构
tree

├── conf
│   ├── conf.d
│   │   └── default.conf
│   └── nginx.conf
├── html
│   ├── 50x.html
│   ├── dist
│   │   ├── assets
│   │   │   ├── index-7df4834c.css
│   │   │   ├── index-97d8d979.js
│   │   │   ├── index-b9324ee2.js
│   │   │   ├── index-c282493b.js
│   │   │   ├── index-c5d74124.css
│   │   │   ├── login-bg-3894f38e.jpg
│   │   │   ├── login-bg-dark-a4ba899b.jpg
│   │   │   ├── request-50a7f9da.css
│   │   │   └── request-9e49d7ed.js
│   │   ├── favicon.ico
│   │   └── index.html
│   └── index.html
└── logs
    ├── access.log
    ├── error.log
    └── host.access.log

第八步：修改nginx.conf

需要修改的地方已经标注，关键字定位：改这里

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
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;
    
    
    server{
    #监听的端口号
    listen 80;
    #改这里--->监听的服务器地址，域名也可行，根据实际情况修改
    server_name ip地址;
    client_max_body_size 20m;
    access_log /var/log/nginx/host.access.log main;
     #开启gzip功能（这段可选，如果web界面资源有压缩格式文件可开启）
      gzip on; 
      #开启gzip静态压缩功能
      gzip_static on; 
      #gzip缓存大小
      gzip_buffers 4 16k;
      #gzip http版本
      gzip_http_version 1.1;
      #gzip 压缩级别 1-10 r
      gzip_comp_level 5;
      #gzip 压缩类型
      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
      #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持
      gzip_disable   "MSIE [1-6]\.";
    #前端，根据实际情况修改
    location / {
        #改这里--->项目地址，这里指的是nginx容器的地址
        root   /usr/share/nginx/html/dist;
        try_files $uri $uri/ /index.html?s=$uri&$args;
        # 默认访问的资源
        index index.html index.htm;
        
    }
    #改这里--->请求代理 /api 根据实际情况修改（例如：可以改成 /demo 或者 /blue）
    location /api {
            #改这里--->ip地址：改成服务器地址（比如后端项目部署的服务器地址）端口号：改成后端项目开放的端口
            proxy_pass http://ip地址:端口号/api;
            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;
        }
    
    # 错误网页配置
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
}

第九步：重启nginx容器 或者 重新加载nginx配置

# 重启nginx，回看第五步和第六步

# 重新加载nginx配置
docker exec -it <container_name_or_id> nginx -s reload