Docker 安装和配置 Nginx 详细图文教程

news2025/3/13 7:27:34

🚀 作者主页：有来技术
🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template
🌺 仓库主页： GitCode︱ Gitee ︱ Github
💖 欢迎点赞 👍 收藏 ⭐评论 📝 如有错误敬请纠正！

1. 环境准备

首先，确保你的系统已安装 Docker。如果尚未安装 Docker，请参考相关文档进行安装：

Linux (CentOS 9) 安装 Docker
Linux (CentOS 8) 安装 Docker
- Windows 安装 Docker

2. 创建挂载目录

在安装和配置 Nginx 之前，首先需要创建一些目录，用于存放 Nginx 配置文件、网页文件、日志文件和 SSL 证书等。

sudo mkdir -p /mnt/nginx/{conf.d,html,logs,ssl}

目录路径	核心用途
`/mnt/nginx/conf`	存放自定义配置文件 (如虚拟主机配置)
`/mnt/nginx/html`	网站静态资源 (HTML/CSS/JS/图片)
`/mnt/nginx/logs`	存储访问日志/错误日志 (`access.log`, `error.log`)
`/mnt/nginx/ssl`	HTTPS证书文件 (`.crt`, `.key`, `.pem`)

3. 编写 Nginx 配置文件

在 /mnt/nginx/nginx.conf 目录下创建一个自定义的 Nginx 配置文件，执行以下命令：

sudo touch /mnt/nginx/nginx.conf

接下来，使用以下配置来部署 vue3-element-admin 项目的前端应用，并代理后端 API：

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    # 开启gzip
    gzip on;
    gzip_http_version 1.1;
    gzip_disable "MSIE [1-6]\.";
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_comp_level 5;
    gzip_vary on;
    gzip_types text/plain application/javascript text/css;

    server {
        listen 80;
        server_name localhost;
        location / {
        	# 指定前端静态资源路径
            # 需将 vue3-element-admin 项目构建后的 dist 目录拷贝至 /usr/share/nginx/html/vue
            root /usr/share/nginx/html/vue;
            index index.html index.htm;
        }

        # 代理后端 API 请求
        location /prod-api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # 后端服务地址，注意保留 URL 末尾的 `/`
            proxy_pass https://api.youlai.tech/;
        }
    }
}

4. 拉取 Nginx 容器

docker pull nginx

5. 启动 Nginx 容器

使用以下命令在 Docker 中启动 Nginx 容器，并挂载自定义配置文件和网页文件：

docker run -it -d --restart always --network host \
  --name nginx \
  -v /mnt/nginx/nginx.conf:/etc/nginx/nginx.conf \
  -v /mnt/nginx/html:/usr/share/nginx/html \
  -v /mnt/nginx/logs:/var/log/nginx/ \
  -v /mnt/nginx/ssl:/etc/nginx/ssl \
  nginx

参数	功能说明
`--network host`	网络模式
`--name nginx`	容器命名
`-v [宿主机路径]:[容器路径]`	数据卷挂载
`/mnt/nginx/nginx.conf:/etc/nginx/nginx.conf`	挂载主配置文件
`/mnt/nginx/html:/usr/share/nginx/html`	挂载网站文件
`/mnt/nginx/logs:/var/log/nginx/`	持久化存储日志
`/mnt/nginx/ssl:/etc/nginx/ssl`	挂载SSL证书

在这里插入图片描述

6. 验证安装

7. 配置 SSL（可选）

如果您需要启用 HTTPS，可以通过阿里云数字证书管理申请免费的 SSL 证书。申请完成后，下载适用于 Nginx 服务器的证书文件。
在这里插入图片描述

下载后，解压并将 SSL 证书放置到 /mnt/nginx/ssl 目录下。

接下来，在 Nginx 配置文件 nginx.conf 中添加以下配置来启用 HTTPS：

server {
    listen 443 ssl;
    server_name vue.youlai.tech;
    # 配置 SSL 证书路径
    ssl_certificate ssl/vue.youlai.tech.pem;
    ssl_certificate_key ssl/vue.youlai.tech.key;

    location / {
        root /usr/share/nginx/html/vue;
        index index.html index.htm;
    }

    # 设置反向代理接口
    location /prod-api/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 后端服务地址，注意保留 URL 末尾的 `/`
        proxy_pass https://api.youlai.tech/;
    }
}