前端组长如何利用Docker+Nginx+Jenkins实现项目部署

Jframe呀
1,498 阅读8分钟

通常部署不会由前端来干，但是市场已经这么卷了，即使不会也得学啊，哪天转行当运维也说不好😄

image.png

说在前面

本文案例会基于Docker拉取一个Jenkins镜像并运行容器，在Jenkins中实现自动化构建部署，前面是概念介绍，对其了解的可以直接看实战开发🌜

快速认识Docker

用于自动化应用程序的部署、运行和管理。它通过容器化技术将应用程序及其依赖打包在一起，确保在不同环境中一致运行。

通俗来讲就是 Docker 就像是一个“集装箱”，把应用程序和它需要的所有东西（如代码、库、环境等）打包在一起。这样，无论在哪里运行，应用程序都能正常工作，不会因为环境不同而出问题。

镜像

镜像（Image）是一个只读的模板，包含了运行应用程序所需的所有文件系统结构、依赖、配置和代码。镜像是容器的基础，容器是镜像的运行实例。

通俗来讲镜像就像是一个“应用程序的安装包”或者“食谱”。它包含了运行程序所需的所有材料（如代码、环境、工具等），但本身不能直接运行。当你用这个“安装包”启动时，它就变成了一个正在运行的“容器”，就像按照食谱做出一道菜一样。

容器

容器（Container）是Docker镜像的运行实例。它是一个轻量级、独立的环境，包含了应用程序及其所有依赖，可以在任何支持 Docker 的系统中运行。容器与宿主机和其他容器隔离，但共享操作系统内核。

通俗来讲容器就像是一个“独立的小房间”，里面运行着一个应用程序。这个房间里有程序需要的所有东西（如代码、工具、环境等），但它与外面的世界隔离开来，不会互相干扰。你可以把这个“房间”搬到任何地方（比如不同的电脑或服务器），它都能正常运行。

Docker 命令

Docker命令有非常多，具体的可以在线查询，这里更多的是贴出本文案例相关的

镜像相关命令

  1. 拉取镜像
docker pull <镜像名>:<标签>
docker pull ubuntu:latest
  1. 查看本地镜像
docker images
  1. 删除镜像
docker rmi <镜像ID或镜像名>

容器相关命令

  1. 运行容器
docker run [选项] <镜像名>

docker run -d -p 8080:80 --name mynginx nginx

常用选项：

  • -d：后台运行（守护进程模式）
  • -p <主机端口>:<容器端口>：端口映射
  • --name <容器名>：为容器命名
  • -v <主机目录>:<容器目录>：挂载卷
  • -e <环境变量>：设置环境变量
  1. 查看运行中的容器
docker ps
  1. 查看所有容器
docker ps -a
  1. 启动容器
docker start <容器ID或容器名>
docker stop <容器ID或容器名>
docker restart <容器ID或容器名>
  1. 删除容器
docker rm <容器ID或容器名>
  1. 进入容器终端
docker logs <容器ID或容器名>

快速认识Jenkins

Jenkins 是一个开源的自动化服务器，用于持续集成和持续交付（CI/CD）。

  • 持续集成（CI）

    • 频繁地将代码集成到主分支，并自动运行测试，确保代码质量。

  • 持续交付（CD）

    • 自动化部署流程，确保软件可以快速、可靠地发布到生产环境

通俗说法：

Jenkins 就像一个“自动化助手”，它可以帮你完成软件开发中的重复性任务，比如：

  1. 自动构建：当你提交新代码时，Jenkins 会自动编译和打包你的程序。
  2. 自动测试：Jenkins 可以运行测试代码，检查新功能是否破坏了现有的功能。
  3. 自动部署：如果代码通过了测试，Jenkins 可以自动将程序部署到服务器上。

简单来说，Jenkins 让开发团队可以更专注于写代码，而不用手动处理繁琐的构建、测试和部署工作。

快速认识Nginx

Nginx 是一个高性能的 Web 服务器，也可以用作 反向代理、负载均衡器 和 HTTP 缓存。

你可以把 Nginx 想象成一个 “交通警察”，它的任务是：

  • 把用户的请求（比如访问一个网站）引导到正确的地方（比如你的 HTML 文件或后端服务）。
  • 同时，它还能帮你分担流量压力，确保服务器不会因为访问量太大而崩溃。
# 全局配置（影响整个 Nginx）
user www-data;
worker_processes auto;

# 事件模块（处理连接）
events {
    worker_connections 1024;
}

# HTTP 模块（处理 HTTP 请求）
http {
    # 服务器块（每个 server 块对应一个网站或服务）
    server {
        listen 80;  # 监听 80 端口（HTTP）
        server_name example.com;  # 域名或 IP

        # 根目录（存放网站文件的地方）
        root /var/www/html;
        index index.html;  # 默认加载的文件

        # 路由规则
        location / {
            try_files $uri $uri/ =404;  # 尝试加载文件，如果不存在则返回 404
        }
    }
}

常用命令

  1. 启动Nginx

    sudo systemctl start nginx

  2. 停止Nginx

    sudo systemctl stop nginx

  3. 重启Nginx

    sudo systemctl restart nginx

  4. 测试配置文件（检查是否有语法错误）：

    sudo nginx -t

Nginx案例

  1. 托管静态网站

    假设你有一个静态网站，文件存放在 /var/www/html 目录下。你可以这样配置 Nginx：

    用户访问 http://example.com 时，Nginx 会返回 /var/www/html/index.html。

    server {
    listen 80;
    server_name example.com;

    root /var/www/html;
    index index.html;
}

  2. 反向代理

    假设你有一个 Node.js 服务运行在 http://localhost:3000，你可以用 Nginx 做反向代理：

    server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;  # 转发请求到 Node.js 服务
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

实战开发

以下都是在ubuntu 环境下操作

环境配置

安装docker

# 1. 在安装 Docker 之前，确保系统包是最新的：
sudo apt update
sudo apt upgrade -y

# 2. 安装依赖工具
sudo apt install -y apt-transport-https ca-certificates curl software-properties-common

# 3. 添加 Docker 官方 GPG 密钥
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

# 4. 添加 Docker 的 APT 仓库
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

# 5. 更新 APT 包索引
sudo apt update

# 6. 安装 Docker
sudo apt install -y docker-ce docker-ce-cli containerd.io

# 7. 验证 Docker 安装
sudo docker --version //输出版本号即安装成功

安装Docker问题

sudo apt install -y docker-ce docker-ce-cli containerd.io 安装卡顿

更换docker镜像

sudo nano /etc/apt/sources.list.d/docker.list

# 1. 将默认镜像替换成国产镜像
# 默认镜像
deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable

# 国产镜像（选一个就行）
eb http://mirrors.aliyun.com/ubuntu/ $(lsb_release -cs) main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ $(lsb_release -cs)-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ $(lsb_release -cs)-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ $(lsb_release -cs)-backports main restricted universe multiverse

# 2. 更新 APT 包索引
sudo apt update


# 3. 重启Docker
sudo systemctl restart docker

安装Nginx

# 安装Nginx
sudo apt-get install -y nginx

# 启动Nginx并设置开机自启
sudo systemctl enable --now nginx

# 验证Nginx是否运行
curl http://localhost

安装Jenkins

# 创建数据卷（持久化数据）
docker volume create jenkins_home

# 拉取 Jenkins 镜像
docker pull jenkins/jenkins:lts

# 创建容器并运行
docker run -u root -d \
  --name jenkins \
  -p 8080:8080 \
  -p 50000:50000 \
  -v jenkins_home:/var/jenkins_home \
  -v /var/www/html:/var/www/html \
  -v /var/run/docker.sock:/var/run/docker.sock \
  --restart unless-stopped \
  jenkins/jenkins:lts

# 获取jenkins密码
docker exec jenkins cat /var/jenkins_home/secrets/initialAdminPassword

参数说明：

  • -p 8080:8080：Web 访问端口（宿主机端口:容器端口）
  • -p 50000:50000：Jenkins 代理通信端口
  • -v jenkins_home:/var/jenkins_home：持久化 Jenkins 配置和数据
  • /var/www/html:/var/www/html：将nginx中的静态资源目录共享到jenkins中
  • -v /var/run/docker.sock:/var/run/docker.sock：允许容器内使用宿主机的 Docker（可选，用于在 Jenkins Pipeline 中调用 Docker）
  • --restart unless-stopped：容器自动重启策略

**通过IP:8080访问：**出现如下图即安装成功

image-20250220102915968

构建Jenkins

  1. 选择推荐插件

image-20250220102946335

  1. 创建用户

  2. 进入jenkins

    image-20250220104455070

实战

安装Jenkins插件

  • 安装Nodejs

【dashboard】➡️【Manage Jenkins】➡️【Plugins】➡️【Available plugins】

Jenkins配置

  1. 配置nodejs环境

image-20250225121645329

  1. 配置凭证，获得权限拉取代码

    • 公钥放到github生成ssh
    • 在服务器上通过ssh -T git@github.com检测是否匹配
    • 如果失败，则将known_hosts文件设置在安全凭证处

    image-20250225121931123

image-20250225121957062

image-20250225133630088

  1. 配置nodejs环境

    image-20250225123955301

  2. 构建自动化任务

    1. 创建任务
    image-20250225124441626

    1. 配置git

      image-20250225124656674

    2. 指定分支

      image-20250225124741549

    3. 选择nodejs环境

      image-20250225124832614

    4. 编写脚本

      npm install pnpm -g
pnpm install
pnpm build
# 打包 build 后的文件
tar -zcvf dist.tar.gz dist/
# 删除 build 后的文件
rm -rf dist/
# 移动 build 后的压缩包到 nginx 托管目录下。
echo "Hello, World!"
mv dist.tar.gz /var/www/html
echo "dist"
# 进入托管目录下
cd /var/www/html
# 解压
tar -zxf dist.tar.gz
# 删除压缩包
rm -rf dist.tar.gz
      image-20250225124938516

    5. 执行任务，查看输出

      image-20250225213041964

    6. 查看服务器是否更新到

      image-20250225213157685

Nginx配置

在上一步jenkins配置中将代码仓库代码打包到var/www/html/文件夹中了，在通过nginx的配置使得可以通过ip访问

  1. 修改配置文件

    sudo nano /etc/nginx/sites-available/default

    image-20250225215553723

  2. 测试Nginx配置

    sudo nginx -t

    如果显示 syntax is ok 和 test is successful，说明配置正确。

  3. 重启nginx

    sudo systemctl restart nginx

  4. 通过ip+80访问页面

总结

本文基于docker+nginx+jenkins 实现一个简单的业务部署，对初次接触服务端的前端同学有所帮助的话那将是莫大荣幸！🙈

这是前端工程化系列的第十篇【部署】，下一篇会结合githook实现自动化部署，三连+关注，后期不迷路～

avatar
文章
阅读
粉丝