Dokcer + nginx + Gitee Go 实现一键化部署你的项目（保姆级别）-阿里云开发者社区

- 什么是CICD

是指持续集成、持续发布，是⼀套实现软件的构建测试部署的⾃动化流程。

什么是DevOps

⼀词是由英⽂ Development（开发）和 Operations （运维）组合⽽成
⼀种思想，强调软件开发测试运维的⼀体化，减少各个部⻔之间的沟通成本从⽽实现软件的快速⾼质ᰁ的发布
DevOps与CICD紧密相关，DevOps要实现⼈员⼀体化，须要借助CICD⼯具来⾃动化整个流程
通俗易懂的话

DevOps是开发+测试+运维交集
以前是单⼀职责现在⼀专多能考虑配合提效，
CI/CD 多环境-构建-打包-测试-上线-监控
快速迭代产品,每次代码的改动都触发校验，每刻都可进⾏新版本的上线

为什么要使用Gitee Go？

项目部署需要使用docker-compose同时运行多个容器
配置简单，构建部署速度较快
Github Actions由于需要科技上网，不过两者的使用大同小异
Jenkins是什么

Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成
官方地址：www.jenkins.io/

两者的优缺点

	Gitee Go	Jenkins
是否安装	不需要安装，直接使用	使用该服务需要安装
执行特点	异步CI/CD	执行打包、构建等操作时同步的
兼容性	兼容任何环境	需要运行环境兼容的Docker镜像

前后端项目代码自动化部署流程图

开通gitee go

Docker

如何生成或者构建一个镜像呢？

Dockerfile

定义
Dockerfile是由一系列指令和参数构成的脚本文件，也即是docker中镜像的的描述文件一个Dockerfile里面包含了构建整个镜像的完整命令，通过docker build执行Dockerfile中的一系列指令自动构建镜像
Dockerfile就是需要将一堆零散待执行的命令和参数整理到一个脚本文件，我们通过命令docker build执行后生成一个镜像
Dockerfile

官方网址：docs.docker.com/engine/refe…
配置

• FROM          # 基础镜像，依赖哪个镜像构建
• MAINTAINER    # 镜像维护者的姓名
• RUN           # 容器构建时运行的命令
• CMD           # 容器启动时运行的命令
• EXPOSE        # 对外保留的端口
• ENV           # 设置环境变量
• ADD           # 将宿主机的文件复制到镜像
• COPY          # 用法和ADD类似，会自动解压文件
• ENTRYPOINT    # 用法和CMD类似
• VOLUME        # 用于数据保存和持久化工作
• USER          # 指定运行容器时的用户名
• WORKDIR       # 配置工作目录
• ONBUILD       # 被作为基础镜像时执行的命令

实例

FROM node:16-alpine
#复制文件
RUN mkdir /app
ADD backend/ /app
WORKDIR /app
# 安装
RUN npm set registry https://registry.npmmirror.com
RUN yarn install
RUN npm i pm2 -g
# 启动
EXPOSE 8081
CMD ["pm2-runtime","start","ecosystem.config.js"]

Dockerfile配置构建前端next项目镜像

我是直接使用next脚手架所以直接使npm run build 进行项目的打包

dockerfile

# frontend.build.Dockerfile
FROM node:16-alpine
# 复制文件
RUN mkdir /app
ADD frontend/ /app
WORKDIR /app
# 安装
RUN npm set registry https://registry.npmmirror.com
RUN npm install
RUN npm run build
RUN npm i pm2 -g
# 启动
EXPOSE 3000
# docker中监测不到pm2后台运行，需要用pm2-runtime命令运行
CMD ["pm2-runtime","start","ecosystem.config.js"]

具体的步骤如下：

使用基于 Node.js v16 的 Alpine 镜像作为基础镜像。
创建一个名为 /app 的目录，并将本地的 frontend/ 目录中的内容复制到容器的 /app 目录中。
将容器的工作目录设置为 /app。
修改默认的 npm 源为 https://registry.npmmirror.com，加快安装依赖的速度。
运行 npm install 命令，安装项目依赖。
运行 npm run build 命令，构建前端应用。
使用 -g 参数全局安装 pm2。
暴露容器的 3000 端口。
使用 pm2-runtime 命令运行项目的启动脚本 ecosystem.config.js。

在 Docker 容器内运行该 Dockerfile，即可构建并运行前端应用。

需要注意的是，该示例假设项目中已经有 frontend/ 目录和相应的配置文件，并且使用了 pm2 进行应用的管理和启动。如果你的项目结构和配置不同，或者使用其他方式进行应用启动，可能需要对 Dockerfile 进行适当的修改。

pm2是为了使node可以在服务器中持久化的运行

ecosystem.config.js

/**
 * pm2运行的配置文件 ecosystem.config.js
 */
module.exports = {
  apps: [
    {
      name: "frontend-course-pc", // 项目名字
      exec_mode: "cluster", // 生产模式
      instances: "max", // 全功率运行
      script: "./.next/server/app/page.js", // 执行的入口文件
    },
  ],
};

前端项目Dockerfile调试运行

本地下载docker：www.docker.com/products/do…
下载安装后运行
执行构建命令

docker build -f frontend.build.Dockerfile . -t frontend-course-image
# -f 指定构建文件
# . 指定当前路径
# -t 设置镜像名
# 如果运行报错，可以重启docker

注意：项目的文件路径不应该有中文名，否则打包会发出错误

Dockerfile配置构建后端node项目镜像

后端项目Dockerfile配置

FROM node:16-alpine
#复制文件
RUN mkdir /app
ADD backend/ /app
WORKDIR /app
# 安装
RUN npm set registry https://registry.npmmirror.com
RUN yarn install
RUN npm i pm2 -g
# 启动
EXPOSE 8081
CMD ["pm2-runtime","start","ecosystem.config.js"]

pm2运行的配置文件

module.exports = {
  apps: [
    {
      name: 'backend-course-pc',
      exec_mode: 'cluster',
      instances: 'max',
      script: './app.js'
    }
  ]
}

后端项目Dockerfile调试运行

执行构建命令

docker build -f backend.build.Dockerfile . -t backend-course-image

nginx反向代理配置和Dockerfile构建nginx镜像

你知道什么是nginx反向代理服务器吗？

反向代理服务器

客户端和目标服务器之间的服务器，客户端向代理发送一个请求，然后代理向目标服务器请求并获得内容，并返回给客户端。反向代理隐藏了真实的服务器
核心：客户端不知道要访问的目标服务器是哪台服务器，代理会根据一定的策略选择一个真实的服务器进行请求
场景：访问淘宝，知道访问的域名是taobao.com，但是后面提供数据的具体是什么域名或ip我们是不知道的

正向代理

客户端和目标服务器之间的服务器，客户端向代理发送一个请求指定目标服务器，然后代理向目标服务器请求并获得内容，并返回给客户端
核心：用户知道自己访问的目标服务器
场景：访问原来无法访问的网站，比如国外的一些站点（科技上网）
nginx反向代理服务器作用

负载均衡
静态文件服务器
支持多种协议https、POP3（邮件代理服务器）

nginx官网配置地址：www.nginx.com/resources/w…

前端next项目nginx反向代理配置

配置文件 nginx.conf

http {
  # 开启缓存
  etag on; 
  # 开启压缩 
  gzip on; 
  
  # 压缩的配置
  gzip_disable "msie6"; # 对IE6浏览器的数据不进行gzip压缩
  gzip_vary on; # 告诉接收方发送的数据经过了压缩处理，Accept-Encoding: gzip
  gzip_proxied any; # 无条件使用压缩 
  gzip_comp_level 6; # 压缩等级
  gzip_buffers 16 8k; # 压缩缓冲区
  gzip_http_version 1.1; # 压缩版本
  gzip_min_length 256; # 最小压缩文件大小
  # 压缩的格式
  gzip_types
    application/atom+xml
    application/geo+json
    application/javascript
    application/x-javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rdf+xml
    application/rss+xml
    application/xhtml+xml
    application/xml
    font/eot
    font/otf
    font/ttf
    image/svg+xml
    text/css
    text/javascript
    text/plain
    text/xml;
    # 负载均衡的配置
    upstream frontend {
      server 172.27.67.172:8080 weight=1;
    }
    # 指定监听服务端口
    server {
        listen 80;
        server_name frontend-course.xdproject.top;
        # 如果访问frontend-course.xdproject.top重定向到https://frontend-course.xdproject.top$1 $1保留原访问的路径、参数
        rewrite ^(.*)$ https://frontend-course.xdproject.top$1 permanent; 
    }
    # 指定监听服务443（https）端口
    server {
        listen       443 ssl;
        server_name  frontend-course.xdproject.top;
        # 访问https证书
        ssl_certificate_key  /etc/nginx/conf/ssl/9068112_frontend-course.xdproject.top.key;
        ssl_certificate      /etc/nginx/conf/ssl/9068112_frontend-course.xdproject.top.pem;
        # ssl_session_cache：缓存时间，ssl_session_timeout：超时时间
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        # 加密配置 多个算法用:分隔，ALL表示全部算法，!表示不启用该算法，+表示将该算法排到最后面去
        ssl_ciphers  HIGH:!aNULL:!MD5;
        # 当为on时，服务器加密算法将优于客户端加密算法
        ssl_prefer_server_ciphers  on;
        
        # 反向代理
        location / {
            proxy_pass http://frontend/; # 请求的地址匹配到http://frontend/则在后面追加路径和参数
            proxy_buffering off; # 关闭代理缓冲
            proxy_set_header Host $host; # 代理的服务器通过host头得知用户访问的真正域名
            proxy_set_header X-Real-IP $remote_addr; # 获取用户真实的ip
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 获取所有的代理ip和客户的ip。
            proxy_set_header X-Forwarded-Proto https; # 转发使用https协议
        }
    }
}
# 每个进程的最大连接数
events {
    worker_connections 1024; ## Default: 1024
}

后端node项目nginx反向代理配置

配置文件

http {
  upstream backend {
    server 172.27.67.171:8081 weight=1;
  }
  server {
    listen 80;
    server_name  backend-course.xdproject.top;
    rewrite ^(.*)$ https://backend-course.xdproject.top$1 permanent;
  }
  server {
      listen       443 ssl;
      server_name  backend-course.xdproject.top;
      ssl_certificate_key  /etc/nginx/conf/ssl/9068114_backend-course.xdproject.top.key;
      ssl_certificate      /etc/nginx/conf/ssl/9068114_backend-course.xdproject.top.pem;
      ssl_session_cache    shared:SSL:1m;
      ssl_session_timeout  5m;
      
      ssl_ciphers  HIGH:!aNULL:!MD5;
      ssl_prefer_server_ciphers  on;
      location / {
          proxy_pass http://backend/;
          proxy_set_header X-Real-IP $remote_addr; # 获取用户真实的ip
          proxy_set_header X-Forwarded-For $remote_addr;
          proxy_set_header X-Client-Verify SUCCESS; # 解析证书的状态
          proxy_set_header Host $http_host;
          proxy_set_header X-NginX-Proxy true;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
          proxy_redirect off;
          proxy_buffering off;
      }
  }
}
events {
    worker_connections 1024; ## Default: 1024
}

前端项目nginx镜像的构建

镜像构建(主要进行替换conf文件和ssl证书)

backend.nginx.Dockerfile

```
FROM nginx:1.23.0-alpine
RUN mkdir -p /etc/nginx/conf/ssl # -p 创建多个层级的目录，如果某个目录不存在就创建
# 本地配置文件替换远程
ADD frontend/nginx.conf /etc/nginx/nginx.conf
# 本地SSL证书替换远程
ADD ssl/frontend/9068112_frontend-course.xdproject.top.key /etc/nginx/conf/ssl/9068112_frontend-course.xdproject.top.key
ADD ssl/frontend/9068112_frontend-course.xdproject.top.pem /etc/nginx/conf/ssl/9068112_frontend-course.xdproject.top.pem
# 开放端口
EXPOSE 80
```

后端项目nginx镜像的构建

镜像构建

FROM nginx:1.23.0-alpine
RUN mkdir -p /etc/nginx/conf/ssl
# 本地配置文件替换远程
ADD backend/nginx.conf /etc/nginx/nginx.conf
# 本地SSL证书替换远程
ADD ssl/backend/9068114_backend-course.xdproject.top.key /etc/nginx/conf/ssl/9068114_backend-course.xdproject.top.key
ADD ssl/backend/9068114_backend-course.xdproject.top.pem /etc/nginx/conf/ssl/9068114_backend-course.xdproject.top.pem
# 开放端口
EXPOSE 80

域名映射+服务器IP绑定+SSL证书申请

SSL证书申请域名解析

进行前后端服务器的相关配置

登录服务器

ssh -o ServerAliveInterval=60 root@120.78.146.74

前后端服务器都需要安装的应用

Git服务安装

yum install git

Dokcer安装（课程5-1的安装方式部分同学反馈安装不上）

yum install docker
#运行
systemctl start docker

Docker-Compose安装

yum install docker-compose

将代码内部访问本地127.0.0.1的地方换为线上地址

运行容器Docker-compose

Docker-compose是什么？

定义

是 Docker 推出的一个工具，可以管理多个容器组成一个应用服务；
通过 YAML 格式的配置文件名为docker-compose.yml，提前编写好多个容器之间的创建和启动命令；
最后只要一个命令，就能同时启动/关闭这些容器，方便管理容器

官方文档地址：docs.docker.com/compose/com…
举例

Docker-compose启动的命令

// docker-compose.mysql.yml
version: "3.0"
services:               
   mysqldb:
     image: mysql:8.0
     restart: always
     container_name: xdclass_mysql
     volumes:
        - /usr/local/mysql/conf:/etc/mysql/conf.d
        - /usr/local/mysql/data:/var/lib/mysql
     environment:
       MYSQL_ROOT_PASSWORD: xdclass.net168
     ports:
       - 3306:3306
version #docker-compose配置文件的版本，目前有三个版本，version 1将来会被弃用
services #配置要启动的多个容器
  mysqldb #服务配置名
    image #指定服务的镜像名称或镜像ID，如果本地不存在则会在远程拉取
    restart #总是重启
    container_name #启动后的容器名
    volumes #容器的路径映射到宿主机，实现数据共享
    environment #配置环境变量
    ports #宿主机和容器的端口映射

运行

  docker-compose -f docker-compose.mysql.yml up -d
  
  -f #指定运行的docker-compose配置文件
  up #启动命令
  -d #后台运行

我们需要使用自己生成的镜像去运行

配置docker-compose文件运行前后端的容器

前端配置文件编写

// docker-compose.frontend.yml
version: '3'
services:
  frontend-course:
    image: frontend-course-image
    restart: always
    container_name: frontend-course
    ports:
      - 8080:3000
  frontend-course-nginx:
    image: frontend-course-nginx-image
    restart: always
    container_name: frontend-course-nginx
    ports:
      - 80:80
      - 443:443

后端配置文件编写

// docker-compose.backend.yml
version: '3'
services:
  backend-course:
    image: backend-course-image
    restart: always
    container_name: backend-course
    ports:
      - 8081:8081
  backend-course-nginx:
    image: backend-course-nginx-image
    restart: always
    container_name: backend-course-nginx
    ports:
      - 80:80
      - 443:443

配置前端+后端对应的服务器

执行之后

创建前端+后端项目的流水线

保存配置

输入自动化部署脚步命令

前端自动化部署脚本

rm -rf /root/gitee_go/frontend || true
mkdir -p /root/gitee_go/frontend 
cd /root/gitee_go/frontend 
git clone https://39xxxxx%40qq.com:xxxxx@gitee.com/wen_zhao/xdclass-course-pc.git
cd xdclass-course-pc
# 清理之前的docker镜像和容器
docker stop frontend-course || true
docker stop frontend-course-nginx || true
docker rm frontend-course || true
docker rm frontend-course-nginx || true
docker rmi frontend-course-image || true
docker rmi frontend-course-nginx-image || true
# 打包构建
docker build -f frontend.build.Dockerfile . -t frontend-course-image
docker build -f frontend.nginx.Dockerfile . -t frontend-course-nginx-image
docker-compose -f docker-compose.frontend.yml up -d

后端自动化部署脚本

rm -rf /root/gitee_go/backend || true
mkdir -p /root/gitee_go/backend 
cd /root/gitee_go/backend 
git clone https://1021199182%40qq.com:lwz.123456@gitee.com/wen_zhao/xdclass-course-pc.git
cd xdclass-course-pc
#删除上一次构建的镜像
docker stop backend-course || true
docker stop backend-course-nginx || true
docker rm backend-course || true
docker rm backend-course-nginx || true
docker rmi backend-course-image || true
docker rmi backend-course-nginx-image || true
#打包构建
docker build -f backend.build.Dockerfile . -t backend-course-image
docker build -f backend.nginx.Dockerfile . -t backend-course-nginx-image
docker-compose -f docker-compose.backend.yml up -d

这样项目就部署成功！

Dokcer + nginx + Gitee Go 实现一键化部署你的项目（保姆级别）

- 什么是CICD

为什么要使用Gitee Go？

前后端项目代码自动化部署流程图

Docker

如何生成或者构建一个镜像呢？

Dockerfile配置构建前端next项目镜像

dockerfile

ecosystem.config.js

Dockerfile配置构建后端node项目镜像

nginx反向代理配置和Dockerfile构建nginx镜像

前端项目nginx镜像的构建

后端项目nginx镜像的构建

域名映射+服务器IP绑定+SSL证书申请

SSL证书申请域名解析

进行前后端服务器的相关配置

运行容器Docker-compose

配置前端+后端对应的服务器

创建前端+后端项目的流水线

热门文章

最新文章

相关课程

相关电子书

相关实验场景

Dokcer + nginx + Gitee Go 实现一键化部署你的项目（保姆级别）

- 什么是CICD

为什么要使用Gitee Go？

前后端项目代码自动化部署流程图

Docker

如何生成或者构建一个镜像呢？

Dockerfile配置构建前端next项目镜像

dockerfile

ecosystem.config.js

Dockerfile配置构建后端node项目镜像

nginx反向代理配置和Dockerfile构建nginx镜像

前端项目nginx镜像的构建

后端项目nginx镜像的构建

域名映射+服务器IP绑定+SSL证书申请

SSL证书申请 域名解析

进行前后端服务器的相关配置

运行容器Docker-compose

配置前端+后端对应的服务器

创建前端+后端项目的流水线

热门文章

最新文章

相关课程

相关电子书

相关实验场景

SSL证书申请域名解析