首页 > 网站技巧 > 服务器 > 云和虚拟化 > docker > docker部署微信小程序

docker部署微信小程序自动构建发布和更新的详细步骤

2024-12-24 10:44:48 作者：罗狮粉 99

通过 Jenkins 和 Docker 部署微信小程序,并实现自动构建、发布和版本更新,主要涉及到几个步骤,下面给大家分享docker部署微信小程序自动构建发布和更新的详细步骤,感兴趣的朋友一起看看吧

通过 Jenkins 和 Docker 部署微信小程序，并实现自动构建、发布和版本更新，主要涉及以下几个步骤：

设置 Jenkins 环境
配置 GitLab 与 Jenkins 的集成
构建 Docker 镜像
部署和发布微信小程序
配置 Jenkins 自动构建

以下是详细的步骤说明：

1. 设置 Jenkins 环境

首先，确保你已经安装和配置了 Jenkins 服务器。假设你已经安装了 Jenkins，并且 Jenkins 能够正常运行。

安装 Jenkins 所需插件：

Docker Plugin：用于在 Jenkins 中执行 Docker 操作。
GitLab Plugin：用于集成 GitLab 仓库与 Jenkins。
Pipeline Plugin：用于通过流水线（Pipeline）来定义构建过程。

在 Jenkins 上安装插件的方法：

进入 Jenkins Dashboard，点击 Manage Jenkins。
选择 Manage Plugins。
在 Available 标签页中，搜索并安装以下插件：
- GitLab Plugin
- Docker Pipeline Plugin
- Pipeline Plugin

2. 配置 GitLab 与 Jenkins 集成

确保你在 Jenkins 上配置了与 GitLab 的集成，以便 Jenkins 可以从 GitLab 获取代码并触发构建。

配置 GitLab Webhook

登录到你的 GitLab 仓库。

进入 Settings -> Webhooks。

添加一个新的 Webhook，输入 Jenkins 服务器的 URL，格式为：

http://<jenkins_url>/project/<jenkins_job_name>

例如：

http://localhost:8080/project/wechat-miniapp-build

选择 Push events 和 Merge requests，这样每次代码提交到 GitLab 时，Jenkins 会自动开始构建。

进入 Jenkins，点击 Manage Jenkins -> Configure System。
在 GitLab 配置部分，输入 GitLab 的 API URL 和 API Token。你需要创建一个 GitLab 访问令牌（Token）：
在 GitLab 上，进入 User Settings -> Access Tokens，创建一个新的访问令牌。
保存设置后，你可以通过 GitLab Plugin 连接到 GitLab 仓库。

3. 构建 Docker 镜像

在 Jenkins 中创建一个 Pipeline 作业，用来构建 Docker 镜像并部署微信小程序。

Dockerfile 示例

首先，在你的微信小程序项目根目录下创建一个 Dockerfile，用于构建 Docker 镜像。

# 使用 Node.js 镜像作为基础镜像
FROM node:16
# 创建并设置工作目录
WORKDIR /app
# 将当前目录下的项目文件复制到 Docker 容器中
COPY . .
# 安装依赖
RUN npm install
# 执行构建命令
RUN npm run build
# 暴露端口
EXPOSE 3000
# 启动微信小程序构建服务（例如，使用 Nginx 或其他方式）
CMD ["npm", "start"]

Jenkins Pipeline 脚本

创建一个 Jenkins Pipeline 来执行代码的拉取、Docker 镜像的构建和发布。

pipeline {
    agent any
    environment {
        DOCKER_IMAGE = "wechat-miniapp"
        DOCKER_REGISTRY = "your-docker-registry"  // Docker registry 地址
    }
    stages {
        stage('Checkout') {
            steps {
                // 从 GitLab 获取代码
                git 'http://your_gitlab_repo_url.git'
            }
        }
        stage('Build Docker Image') {
            steps {
                script {
                    // 构建 Docker 镜像
                    sh 'docker build -t ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:latest .'
                }
            }
        }
        stage('Push Docker Image') {
            steps {
                script {
                    // 将构建的镜像推送到 Docker Registry
                    sh 'docker push ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:latest'
                }
            }
        }
        stage('Deploy') {
            steps {
                script {
                    // 在服务器上拉取并运行 Docker 镜像
                    sh 'docker pull ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:latest'
                    sh 'docker run -d -p 3000:3000 ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:latest'
                }
            }
        }
    }
    post {
        always {
            // 构建结束后执行的操作，比如清理旧的容器
            sh 'docker system prune -f'
        }
    }
}

说明：

Checkout：从 GitLab 拉取代码。
Build Docker Image：构建 Docker 镜像。
Push Docker Image：将镜像推送到 Docker Registry（如果你使用的是私有仓库，可以推送到私人 Docker 仓库）。
Deploy：在目标服务器上拉取并运行 Docker 镜像。

4. 部署和发布微信小程序

构建微信小程序的发布版本：
使用 npm run build 命令来构建生产版本，通常会生成一个用于发布的文件夹（例如，dist/ 或 build/）。然后将这些文件部署到你选择的 web 服务器上（例如 Nginx、Apache 等）。

上传小程序代码：
微信小程序通常需要使用微信开发者工具上传到微信服务器。你可以在构建完成后，利用微信小程序开发者工具的命令行工具进行自动化上传。

微信小程序提供了 CLI 工具，叫做 weapp-cli，你可以通过以下方式上传代码：

npm install -g weapp-cli
weapp-cli upload --appid <your_app_id> --project <path_to_your_project>

然后可以将 upload 命令添加到 Jenkins Pipeline 的最后一个阶段。

stage('Upload to WeChat') {
    steps {
        script {
            // 上传到微信小程序
            sh 'weapp-cli upload --appid <your_app_id> --project ./dist'
        }
    }
}

5. 配置 Jenkins 自动构建

每次有新代码提交到 GitLab 时，Jenkins 会通过 Webhook 自动触发构建过程。确保你的 GitLab 项目正确配置了 Webhook，指向 Jenkins 的构建 URL。

配置 Webhook：

在 GitLab 项目中，添加 Jenkins 的 Webhook，确保它能在每次推送代码后触发 Jenkins 构建任务。

总结

Jenkins 安装和配置：确保你已经安装并配置了 Jenkins 和相关插件。
GitLab 与 Jenkins 集成：通过 Webhook 配置 GitLab 与 Jenkins 的集成。
Dockerfile 和 Jenkins Pipeline：编写 Dockerfile 和 Jenkins Pipeline 脚本来构建、推送 Docker 镜像。
上传小程序：使用微信小程序 CLI 工具上传构建的代码。
自动化构建和部署：通过 Webhook 和 Jenkins 自动化构建和部署流程。

在 AlmaLinux 上配置 Jenkins 自动化构建、Docker 部署和与 GitLab 集成的步骤，涵盖从系统安装到 Jenkins 配置、Docker 部署、GitLab 集成、以及微信小程序自动构建和上传等过程。下面是详细的安装和配置步骤。

1. 安装 Jenkins 和依赖

首先，我们需要在 AlmaLinux 上安装 Jenkins。

1.1 安装 Java（Jenkins 的运行依赖）

Jenkins 需要 Java 运行环境，通常推荐使用 OpenJDK。

sudo dnf install java-11-openjdk-devel -y

1.2 安装 Jenkins

Jenkins 官方提供了 RHEL/CentOS 8 和 AlmaLinux 8 的安装包。你可以通过以下步骤安装 Jenkins：

添加 Jenkins 仓库

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo

导入 Jenkins GPG 密钥

sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key

安装 Jenkins

sudo dnf install jenkins -y

1.3 启动 Jenkins 服务

安装完成后，启动 Jenkins 服务并使其开机自启：

sudo systemctl start jenkins
sudo systemctl enable jenkins

1.4 开放 Jenkins 的端口（默认 8080）

sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent
sudo firewall-cmd --reload

1.5 访问 Jenkins Web UI

在浏览器中访问 Jenkins：

http://<your-server-ip>:8080

首次访问时，Jenkins 会要求你输入解锁密钥。你可以在以下位置找到它：

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

输入密码后，你可以继续设置 Jenkins。

2. 安装 Jenkins 插件

在 Jenkins 中，我们需要安装一些插件来支持 Docker 和 GitLab 集成。

进入 Jenkins 控制台，点击 Manage Jenkins -> Manage Plugins。
在 Available 标签下，搜索并安装以下插件：
- Docker Pipeline：支持在 Jenkins 中执行 Docker 命令。
- GitLab Plugin：与 GitLab 仓库集成。
- Pipeline Plugin：用于定义 Jenkins 流水线（Pipeline）。

安装完成后，重启 Jenkins。

3. 安装 Docker

在 Jenkins 中使用 Docker 来构建和部署微信小程序。首先，你需要安装 Docker。

3.1 安装 Docker

# 安装 Docker 依赖
sudo dnf install -y yum-utils device-mapper-persistent-data lvm2
# 设置 Docker 仓库
sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
# 安装 Docker CE
sudo dnf install docker-ce docker-ce-cli containerd.io -y
# 启动并启用 Docker
sudo systemctl start docker
sudo systemctl enable docker

3.2 配置 Docker 用户权限

为了避免每次运行 Docker 命令时都需要使用 sudo，你可以将 Jenkins 用户添加到 docker 组：

sudo usermod -aG docker jenkins

然后重新启动 Jenkins 服务：

sudo systemctl restart jenkins

4. 配置 GitLab 集成

Jenkins 需要能够从 GitLab 获取代码并触发构建。

4.1 配置 GitLab Webhook

在 GitLab 上，进入你的项目。

进入 Settings -> Webhooks。

添加一个新的 Webhook，设置 URL 为 Jenkins 构建的 URL：

http://<jenkins-ip>:8080/project/<jenkins-job-name>

选择 Push events 和 Merge request events，确保每次提交或合并时 Jenkins 都能触发构建。 4.2 配置 GitLab Plugin 在 Jenkins 中，点击 Manage Jenkins -> Configure System。在 GitLab 配置部分，输入 GitLab 的 URL 和 API Token。在 GitLab 中生成 API Token：进入 User Settings -> Access Tokens 创建一个新的访问令牌。配置完成后，保存并测试连接。

5. 创建 Jenkins Pipeline

使用 Jenkins Pipeline 来定义整个构建过程。创建一个新的 Pipeline 类型的 Job。

5.1 配置 Job

在 Jenkins 控制台，点击 New Item -> Pipeline。
在 Pipeline 配置页面，选择 Pipeline Script。
在 Pipeline Script 部分编写你的 Jenkins Pipeline 脚本，定义构建、Docker 镜像构建和微信小程序上传的过程。

5.2 Jenkins Pipeline 脚本示例

以下是一个完整的 Jenkins Pipeline 脚本示例：

pipeline {
    agent any
    environment {
        DOCKER_IMAGE = "wechat-miniapp"
        DOCKER_REGISTRY = "your-docker-registry"
    }
    stages {
        stage('Checkout') {
            steps {
                // 从 GitLab 获取代码
                git 'http://your_gitlab_repo_url.git'
            }
        }
        stage('Build Docker Image') {
            steps {
                script {
                    // 构建 Docker 镜像
                    sh 'docker build -t ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:latest .'
                }
            }
        }
        stage('Push Docker Image') {
            steps {
                script {
                    // 推送 Docker 镜像到 Docker Registry
                    sh 'docker push ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:latest'
                }
            }
        }
        stage('Deploy') {
            steps {
                script {
                    // 拉取并运行 Docker 镜像
                    sh 'docker pull ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:latest'
                    sh 'docker run -d -p 3000:3000 ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:latest'
                }
            }
        }
        stage('Upload to WeChat') {
            steps {
                script {
                    // 使用微信小程序 CLI 上传代码
                    sh 'weapp-cli upload --appid <your_app_id> --project ./dist'
                }
            }
        }
    }
    post {
        always {
            // 清理 Docker 系统
            sh 'docker system prune -f'
        }
    }
}

6. 微信小程序的构建和上传

6.1 安装微信小程序 CLI 工具

如果你需要自动化上传微信小程序，可以使用 weapp-cli 工具。

在你的构建过程中，安装并使用微信小程序 CLI 来上传小程序代码：

npm install -g weapp-cli

6.2 配置自动上传

将上传命令添加到 Jenkins Pipeline 中的最后一个阶段：

stage('Upload to WeChat') {
    steps {
        script {
            // 上传到微信小程序
            sh 'weapp-cli upload --appid <your_app_id> --project ./dist'
        }
    }
}

你需要替换 <your_app_id> 和 ./dist 为你实际的小程序 App ID 和构建后的目录。

7. 自动化构建与部署

GitLab Push：每次代码提交到 GitLab 时，Webhooks 会触发 Jenkins 构建。
Jenkins Pipeline：Jenkins 会从 GitLab 拉取代码，构建 Docker 镜像，并进行微信小程序的自动构建与上传。
Docker 部署：使用 Docker 容器运行构建好的微信小程序。

8. 总结

通过这些步骤，你可以在 AlmaLinux 上配置 Jenkins，结合 Docker 部署和 GitLab 集成，自动化构建和发布微信小程序：

安装 Jenkins 和 Docker。
配置 Jenkins 与 GitLab 的集成。
使用 Docker 构建镜像并发布。
使用微信小程序 CLI 自动上传代码。
配置 Webhook，自动触发 Jenkins 构建。

要将微信小程序部署到 Docker 上，并使用 Jenkins 实现自动构建和更新，我们需要明确几个关键步骤。主要的步骤包括：

构建微信小程序：微信小程序的构建过程通常会生成一个可以通过 Web 服务器提供服务的构建文件夹。你可以将这些文件夹作为 Docker 镜像的一部分来部署。
创建 Docker 镜像：我们需要为微信小程序创建一个 Docker 镜像，这样可以在容器中运行它。
Jenkins 自动构建和发布：在 Jenkins 中配置一个流水线来自动化从 GitLab 拉取代码、构建 Docker 镜像、推送到 Docker 仓库，并部署到目标服务器。

详细步骤：

1. 准备微信小程序项目

微信小程序本身是一个前端项目，通常使用 npm run build 进行构建，这样会生成一个可以通过 Web 服务器提供的构建文件夹（例如 dist/ 或 build/）。

首先，确保你已经准备好微信小程序的代码并能够通过以下命令构建它：

npm install
npm run build

2. Dockerfile 示例

接下来，我们需要为微信小程序创建一个 Dockerfile，这样就能将构建好的文件夹部署到 Docker 容器中。

2.1 创建 Dockerfile

在微信小程序的项目根目录下创建一个 Dockerfile，示例如下：

# 使用 Nginx 作为基础镜像
FROM nginx:alpine
# 设置工作目录
WORKDIR /usr/share/nginx/html
# 将本地构建的文件（例如 dist 文件夹）复制到容器的工作目录中
COPY ./dist /usr/share/nginx/html
# 暴露 Nginx 的默认端口 80
EXPOSE 80
# 默认命令：启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

这里的 Dockerfile 做了以下几件事情：

使用 Nginx 作为 Web 服务器来提供小程序的静态资源。
将构建后的文件夹（例如 dist/）复制到 Nginx 默认的 Web 根目录 /usr/share/nginx/html。
设置 Nginx 启动命令并暴露容器的 80 端口。

2.2 构建 Docker 镜像

在项目根目录下，执行以下命令来构建 Docker 镜像：

docker build -t wechat-miniapp .

2.3 运行 Docker 容器

构建镜像之后，运行 Docker 容器：

docker run -d -p 8080:80 wechat-miniapp

这将启动一个 Nginx 服务器，监听宿主机的 8080 端口。你可以通过访问 http://<your-server-ip>:8080 来查看你的微信小程序。

3. 配置 Jenkins 自动构建和更新

接下来，我们要使用 Jenkins 自动化构建和更新过程。主要的任务是：从 GitLab 获取代码、构建 Docker 镜像、推送镜像到 Docker Hub 或私有仓库，然后在目标服务器上拉取最新的镜像并运行。

3.1 安装 Jenkins 插件

在 Jenkins 上，安装以下插件：

Docker Pipeline：用于在 Jenkins 中执行 Docker 操作。
GitLab Plugin：用于与 GitLab 集成，拉取代码。
Pipeline Plugin：用于在 Jenkins 中创建流水线脚本。

3.2 配置 Jenkins 连接到 GitLab

在 Jenkins 上配置 GitLab 集成：

进入 Jenkins，点击 Manage Jenkins -> Configure System。
在 GitLab 配置部分，添加 GitLab 服务器的 URL 和 API Token。你可以在 GitLab 上创建一个新的 API Token。
在 GitLab Plugin 中，测试连接是否成功。

3.3 配置 Jenkins Pipeline

在 Jenkins 中，点击 New Item -> Pipeline。
在 Pipeline 配置页面中，选择 Pipeline script。
在 Pipeline script 中编写你的构建脚本，示例如下：

pipeline {
    agent any
    environment {
        DOCKER_IMAGE = "wechat-miniapp"
        DOCKER_REGISTRY = "your-docker-registry"  // Docker 仓库地址（例如 Docker Hub 或私有仓库）
        DOCKER_TAG = "latest"  // Docker 镜像标签
    }
    stages {
        stage('Checkout') {
            steps {
                // 从 GitLab 获取代码
                git 'http://your_gitlab_repo_url.git'
            }
        }
        stage('Install Dependencies') {
            steps {
                script {
                    // 安装依赖
                    sh 'npm install'
                }
            }
        }
        stage('Build') {
            steps {
                script {
                    // 构建微信小程序
                    sh 'npm run build'
                }
            }
        }
        stage('Build Docker Image') {
            steps {
                script {
                    // 构建 Docker 镜像
                    sh 'docker build -t ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:${DOCKER_TAG} .'
                }
            }
        }
        stage('Push Docker Image') {
            steps {
                script {
                    // 将镜像推送到 Docker 仓库
                    sh 'docker push ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:${DOCKER_TAG}'
                }
            }
        }
        stage('Deploy Docker Container') {
            steps {
                script {
                    // 在目标服务器上拉取最新镜像并运行 Docker 容器
                    sh 'docker pull ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:${DOCKER_TAG}'
                    sh 'docker stop wechat-miniapp || true'
                    sh 'docker rm wechat-miniapp || true'
                    sh 'docker run -d --name wechat-miniapp -p 8080:80 ${DOCKER_REGISTRY}/${DOCKER_IMAGE}:${DOCKER_TAG}'
                }
            }
        }
    }
    post {
        always {
            // 清理 Docker 镜像和容器
            sh 'docker system prune -f'
        }
    }
}

说明：

Checkout：从 GitLab 仓库中拉取代码。
Install Dependencies：安装微信小程序的依赖。
Build：构建微信小程序，通常会生成一个 dist/ 或 build/ 文件夹。
Build Docker Image：使用 Dockerfile 构建 Docker 镜像。
Push Docker Image：将构建好的 Docker 镜像推送到 Docker 仓库（例如 Docker Hub 或私有 Docker Registry）。
Deploy Docker Container：在目标服务器上拉取镜像并运行 Docker 容器，将微信小程序部署到生产环境。
Post Actions：清理 Docker 镜像和容器，释放资源。

3.4 配置 GitLab Webhook

在 GitLab 中，进入你的项目设置，配置 Webhook，使每次代码推送后自动触发 Jenkins 构建：

在 GitLab 中，进入项目设置 -> Webhooks。

添加 Jenkins 的 Webhook 地址：

http://<jenkins-ip>:8080/project/<jenkins-job-name>

选择 Push events 和 Merge requests，这样每次代码提交或合并时，Jenkins 会自动构建。

4. 总结

通过以上步骤，你可以实现以下目标：

Docker 部署微信小程序：使用 Nginx 作为 Web 服务器，部署构建好的微信小程序。
Jenkins 自动构建和发布：通过 Jenkins Pipeline，自动化从 GitLab 拉取代码、构建 Docker 镜像、推送镜像到 Docker 仓库、部署到目标服务器。
自动更新：每次代码提交到 GitLab，Jenkins 会自动触发构建并部署最新版本的小程序。

这样，你就可以通过 Docker 容器化的方式，利用 Jenkins 自动化构建和部署微信小程序，从而提高开发和发布的效率。

到此这篇关于docker部署微信小程序自动构建发布和更新的文章就介绍到这了,更多相关docker部署微信小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！