Github Actions + Docker实现HTML静态前端页面CICD部署

2023-05-16

使用 Github Actions 可以实现 CICD 自动构建部署

简单来说就是你只需要执行 git push 命令,你服务器上的网页就可以自动部署更新,无需你执行编译指令

前置环境

  1. 服务器一台,我的是腾讯云服务器,上面部署了 Docker
  2. Github 账号一个
  3. 本地 HTML 代码

Github 仓库配置

首先创建一个 Github 仓库
在这里插入图片描述

本地 HTML 代码配置

本地 HTML 代码打包需要准备如下配置文件,配置文件的内容下面会给出

  1. .github (Github Actions 配置文件存放的目录)
  2. Dockerfile
  3. nginx.conf
    在这里插入图片描述

.github/ 目录说明
.github/ 目录下需要创建一个 workflows 目录,然后在 workflows 目录下创建一个 yml 配置文件,配置文件名称是随意的,我取名为 docker-image.yml

docker-image.yml 配置文件内容:

name: Lianjia CI

on:
  # push操作触发
  push:
    branches: [ "main" ]
  # pr操作触发
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      # Docker 构建镜像和发布镜像
      - name: Docker Build and Push
        run: |
          docker login -u ${{ secrets.DOCKER_HUB_USERNAME }} -p ${{ secrets.DOCKER_HUB_PASSWORD }}
          docker buildx build \
            --platform=linux/amd64 \
            --file ./Dockerfile . \
            --tag ${{ secrets.DOCKER_HUB_USERNAME }}/${{ secrets.DOCKER_IMAGE_NAME}}:0.0.1
          docker push ${{ secrets.DOCKER_HUB_USERNAME }}/${{ secrets.DOCKER_IMAGE_NAME}}:0.0.1

      # 连接 ssh 执行启动服务的脚本
      - name: SSH
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.LIANJIA_HOST }}
          username: ${{ secrets.LIANJIA_USERNAME }}
          password: ${{ secrets.LIANJIA_PASSWORD }}
          script: |
          	# 此脚本是放到服务器自定义的目录上,此处写你脚本对应的路径就可以了
            sh /root/docker/lianjia/start-lianjia.sh

我写的 Github Actions 配置文件中的 secrets 参数是需要配置的,配置路径如下:
在这里插入图片描述

Dockerfile 内容:

FROM nginx
COPY . /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf 内容:

user root;

worker_processes  1;

# 进程限制,与ulimit -n的值保持一致
worker_rlimit_nofile 100001;

# grep ^processor /proc/cpuinfo | wc -l  设置CPU的核心,Nginx1.9之后自动配置了核心数
#worker_processes 2;
#worker_cpu_affinity 01 10
worker_cpu_affinity auto;

events {
    worker_connections  10240;
    multi_accept on;
    use epoll;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format main '{"@timestamp":"$time_iso8601",'   
	'"host":"$server_addr",'
	'"clientip":"$remote_addr",'
	'"size":$body_bytes_sent,'
	'"responsetime":$request_time,'
	'"upstreamtime":"$upstream_response_time",'
	'"upstreamhost":"$upstream_addr",'
	'"http_host":"$host",'
	'"url":"$uri",'
	'"xff":"$http_x_forwarded_for",'
	'"referer":"$http_referer",'
	'"agent":"$http_user_agent",'
	'"status":"$status"}';
 
    # 开启高效文件传输模式
    sendfile        on;
    # 需要在sendfile开启模式才有效,防止网路阻塞,积极的减少网络报文段的数量。将响应头和正文的开始部分一起发送,而不一个接一个的发送。
    tcp_nopush      on;
    tcp_nodelay     on;
    server_names_hash_bucket_size 128;
    server_names_hash_max_size 512;
    keepalive_timeout  65;
    client_header_timeout 15s;
    client_body_timeout 15s;
    send_timeout 60s;

    limit_conn_zone $binary_remote_addr zone=perip:10m;
	limit_conn_zone $server_name zone=perserver:10m;
	limit_conn perip 2;
	limit_conn perserver 20;
	limit_rate 300k;

    client_body_buffer_size 512k;
	client_header_buffer_size 4k;
	client_max_body_size 512k;
	large_client_header_buffers 2 8k;

    proxy_connect_timeout 120s;
	proxy_send_timeout 120s;
	proxy_read_timeout 120s;
	proxy_buffer_size 16k;
	proxy_buffers 4 64k;
	proxy_busy_buffers_size 128k;
	proxy_temp_file_write_size 128k;
	proxy_next_upstream http_502 http_504 http_404 error timeout invalid_header;

    # 表示开启压缩功能
    gzip on;
    # 表示允许压缩的页面最小字节数,页面字节数从header头的Content-Length中获取。默认值是0,表示不管页面多大都进行压缩,建议设置成大于1K。如果小于1K可能会越压越大
    gzip_min_length  1k;
    # 压缩缓存区大小
    gzip_buffers     4 32k;
    # 压缩版本
    gzip_http_version 1.1;
    #vary header支持 
    gzip_vary on;
    #指定压缩的类型
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    gzip_disable "MSIE [1-6]\.";
    gzip_comp_level 6;

 
    server {
        listen       80;
        server_name  xxx.com;
        # rewrite ^(.*)$ https://$host$1 permanent;
        
		location / {
            root   /usr/share/nginx/html;
            # try_files $uri $uri/ /index.html last;
            index  index.html index.htm;
        }
        
		location /dev-api {
            proxy_pass http://host:port/dev-api;
        }

		location ~ .*\.(eot|svg|ttf|woff|jpg|jpeg|gif|png|ico|cur|gz|svgz|mp4|ogg|ogv|webm) {
            log_not_found off;
            access_log off;
            proxy_cache_valid 200 304 302 5d;
            proxy_cache_key '$host:$server_port$request_uri';
            add_header X-Cache '$upstream_cache_status from $host';
            # 所有静态文件直接读取硬盘
            root /usr/share/nginx/html;
            # 缓存30天
            expires 30d;
        }

        location ~ .*\.(js|css)?$
        {
            proxy_cache_valid 200 304 302 5d;
            proxy_cache_key '$host:$server_port$request_uri';
            add_header X-Cache '$upstream_cache_status from $host';
            # 所有静态文件直接读取硬盘
            root /usr/share/nginx/html;
            expires      12h;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

启动 Docker 服务的脚本 start-lianjia.sh 内容如下:

# 配置镜像名称
img=镜像名称,如 yanhuiyang/myimg
# 配置镜像标签(版本)
tag=版本号,如 0.0.1
# 配置容器名称
container=容器名称,如 mycontainer

# 判断容器是否存在,存在则删除。
if sudo docker ps -a --filter name=^/$container$ | grep -i "$container"; then
  echo "容器: $container 存在,删除容器."
  sudo docker stop "$container"
  sudo docker rm -f "$container"
else
  echo "容器: $container 不存在" 
fi

# 判断镜像是否存在,如存在则删除
if sudo docker images --filter=reference="$img:$tag" | grep -i "$img"; then
  echo "镜像: $img:$tag 镜像存在, 删除镜像重新构建."
  sudo docker rmi $img:$tag
fi

# 构建新镜像
echo "构建 $img:$tag 新镜像."
sudo docker build -t $img:$tag .


# 启动服务,挂载外部数据信息
echo "启动 $img:$tag 容器服务!"
sudo docker run -d -p 80:80 \
    --restart=always --name $container $img:$tag

# 检测服务是否启动成功
if sudo docker ps --filter name=^/$container$ | grep -i "up"; then
    echo "$img:$tag 服务启动成功Pass"
else
    echo "$img:$tag 服务启动失败Fail"
fi

测试 CI

准备好如上配置文件之后,就可以 push 到 git 仓库,查看自动部署的效果了

git status

git add .

git commit -m "add: init my cicd repo"

git push

执行结果

在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Github Actions + Docker实现HTML静态前端页面CICD部署 的相关文章

随机推荐

  • ubuntu18.04 下firefox 不能 播放视频,因为默认未安装FLASH插件。(当然只是原因之一)

    ubuntu18 04 下firefox 不能 播放视频 xff0c 默认未安装FLASH插件 终端输入 xff1a sudo apt get install flashplugin nonfree
  • Ubuntu上可使用的15个桌面环境

    Ubuntu上可使用的15个桌面环境 发布者 红黑魂 来自 Ubuntu之家 摘要 Linux下桌面环境很多 xff0c Ubuntu之家给大家总结了比较常用的15个桌面环境 xff0c 并附上Ubuntu 12 10 xff08 Linu
  • C语言数据类型

    数据类型在数据结构中的定义是一个值的集合以及定义在这个值集上的一组操作 数据类型包括原始类型 多元组 记录单元 代数数据类型 抽象数据类型 参考类型以及函数类型 本文主要以51单片机中的数据类型为中心而展开的话题 在keil C51或者ia
  • 《Cortex-M0权威指南》之Cortex-M0技术综述

    Cortex M0权威指南 之Cortex M0技术综述 转载请注明来源 xff1a cuixiaolei的技术博客 Cortex M0 处理器简介 1 Cortex M0 处理器基于冯诺依曼架构 xff08 单总线接口 xff09 xff
  • xos详解5:PendSV_Handler

    PendSV Handler PendSV Handler LDR R2 61 OSTcbCurr 不必关中断 嵌套中断发生时会自动保存 R0 R3 到 MSP 并恢复 LDR R0 R2 如果发生咬尾的多个 PendSV xff0c 上半
  • M0最高优先级的中断设计

    1 Reset 3 Highest Reset 绝大部分处理器设计时 xff0c 将复位中断放在最高优先级 一般来说这样设计是合理的 xff0c 个人认为在某些应用场景这样处理仍有局限性 2 NMI 2 Nonmaskable interr
  • 如何从零开始写一个操作系统?

    首页发现等你来答 登录加入知乎 如何从零开始写一个简单的操作系统 xff1f 关注问题 写回答 操作系统 编程学习 如何从零开始写一个简单的操作系统 xff1f 看了这个 xff1a 从零开始写一个简单的操作系统 求指教 关注者 4 787
  • 每次听到同事跳槽后的薪资,我就像打了鸡血一样

    本文总结了现阶段 34 大龄程序员 34 的职业生存状况 xff0c 内容包含职位需求量 xff0c 议价能力如何以及如何度过传说中的 34 中年危机 34 等等 xff0c 供大家参考 xff01 值此金 三 银四跳槽季 的开端 xff0
  • Lua性能优化—Lua内存优化

    原文链接https blog uwa4d com archives usparkle luaperformance html 这是侑虎科技第236篇原创文章 xff0c 感谢作者舒航供稿 xff0c 欢迎转发分享 xff0c 未经作者授权请
  • Jetson Xavier NX(emmc)烧录系统时可能遇到的问题(避坑)

    目录 Ununtu18虚拟机无法联网 当NX接上电源后 xff0c 指示灯没有亮 xff08 不工作 xff09 在登陆SDK时 xff0c 可能会出现卡在初始界面的情况 在烧录镜像时 xff0c 可能会卡在该处没有变化 Ununtu18虚
  • 互斥量、条件变量与pthread_cond_wait()函数的使用,详解(一)

    1 首先pthread cond wait 的定义是这样的 The pthread cond wait and pthread cond timedwait functions are used to block on a conditio
  • STAR法则写简历

    STAR 法则是在面试 xff0c 求职 xff0c 写简历时候的常用利器 虽然常用 xff0c 但是我想知道的人一定很少很少 xff0c 不然为什么那么多人面试的时候犯那么低级的错误呢 xff1f STAR法则无法帮你提高你的实力 xff
  • 论文发表为什么不可以一稿多投呢

    论文发表为什么不可以一稿多投呢 很多作者在担心投一家杂志会被拒稿 xff0c 就会选择一篇稿件投多家期刊的方法 xff0c 大家应该或多或少都听过不能一稿多投 xff0c 但具体原因是什么大家知道吗 一稿多投会有什么后果 一稿多投是自稿件发
  • ROS下视频消息发布与订阅

    https download csdn net download v7xyy 10869743 下下来后 1 发布视频消息 rosrun video transport tutorial video publisher xff08 节点 c
  • ros中标志位设计(4)

    由于需要涉及控制权的交接事件 xff0c 需要通过标志位的方式进行设计 首先需要自定一个标志位的信息在ros中用于标志位信息的发布 下面是用于标志位的头文件Flag h Generated by gencpp from file xx ms
  • 全球最贵域名Sex.com将再度出售

    金融时报消息称 xff0c Sex com域名曾位居全球最贵域名前例 xff0c 四年前 xff0c 它以1400万美元成交 xff0c 不过 xff0c 买下此域名的公司面临破产 xff0c 因此Sex com将再度拿来出售 Sex co
  • 微信消息推送消息加解密(golang)

    本篇介绍如何使用golang对微信消息推送进行加解密 xff0c 后续会补充 xff0c 目前先写个原理 xff0c 大概自己看一下 xff0c 其他的自己应该也能写 老套路 xff0c 分为三步 xff0c 为啥写 xff0c 教程 xf
  • C++数据可视化MathGL使用简示

    C 43 43 数据可视化 MathGL 使用指南 效果演示 搭建环境与依赖项 Windows10 64位 VS2017 Zlib1 2 11 xff08 已编译好的可用版本已集成在我后面的项目链接里 xff09 libpng1 6 37
  • 飞思卡尔智能车——舵机及PID控制

    本篇博客已迁移至 xff1a 飞思卡尔智能车 舵机及PID控制 请帮个忙 xff0c 去新地址访问 xff1a xff09 舵机 xff1a 小车转向的控制 机构 也就是控制小车的转向 它的特点是结构紧凑 易安装调试 控制简单 大扭力 成本
  • Github Actions + Docker实现HTML静态前端页面CICD部署

    使用 Github Actions 可以实现 CICD 自动构建部署 简单来说就是你只需要执行 git push 命令 xff0c 你服务器上的网页就可以自动部署更新 xff0c 无需你执行编译指令 前置环境 服务器一台 xff0c 我的是