docker部署_docker⾃动化部署前端项⽬实战
docker⾃动化部署前端项⽬实战
本⽂适⽤于个⼈项⽬，如博客、静态⽂档，不涉及后台数据交互，以部署⽂档为例。
思路
利⽤服务器node脚本，监听github仓库webhook push事件触发post请求，⾃动拉取最新代码，再⽤docker接管项⽬编译、部署。
环境
本⽂使⽤云服务器搭建，环境版本：
OS：CentOS Linux release 8.2.2004
docker：19.03.12
node：14.5.0
git：2.18.4
云服务器如果没有安装以下环境，需要安装。
docker
node
pm2
git
docker
# Step 1: 安装必要的⼀些系统⼯具sudo yum install -y yum-utils# Step 2: 添加软件源信息，使⽤阿⾥云镜像sudo yum-config-manager --add-repo mirrors.aliyu
不出意外，出现hello world，docker安装成功
git
从代码仓库拉取最新代码
yum install git
node
创建js脚本。使⽤nvm管理node版本，先安装nvm
curl -o- raw.githubusercontent/nvm-sh/nvm/v0.34.0/install.sh | bash
将nvm设置环境变量
export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_通过 nvm 安装最新版 node
nvm install node
PM2
安装pm2，服务器后台运⾏js脚本
npm i pm2 -g
webhook
github 的 webhook 会在当前仓库触发某些事件时，发送⼀个 post 形式的 http 请求
创建webhook
进⼊github项⽬仓库，按下图顺序操作
验证webhook配置成功，点击红⾊感叹号右侧内容，出现如下请求信息
docker部署
创建Dockfile
在这⾥，将拉取的项⽬存放在app⽬录下，Dockerfile内容如下，放到服务器根⽬录(/root/Dockerfile)
FROM nginxCOPY /app/docsify /usr/share/nginx/html/EXPOSE 80CMD ["nginx", "-g", "daemon off;"]
创建 http 服务器
创建index.js，放到服务器根⽬录(/root/index.js)
const http = require("http")const { execSync } = require("child_process")const fs = require("fs")const path = require("path")// 递归删除⽬录function deleteFolderRec 解析，
创建docker镜像
docker build . -t docsify-image:latest
build：创建 docker 镜像
.：使⽤当前⽬录下的 Dockerfile ⽂件，这⾥在根⽬录(/root/)执⾏
-t：使⽤ tag 标记版本
docsify-image:latest：创建名为 docsify-image 的镜像，并标记为 latest(最新)版本
创建docker容器
docker run -d -p 88:80 --name docsify-container docsify-image:latest
run：创建并运⾏ docker 容器
-d：后台运⾏容器
-p：端⼝指令
88:80：冒号前，本地/服务器端⼝，冒号后，容器端⼝；这⾥意思是将当前服务器的 88 端⼝，映射到容器的 80 端⼝
–-name：给容器命名，便于之后定位容器，命名可选
docsify-image:latest：基于 docsify-image 最新版本的镜像创建容器
运⾏node脚本
pm2 start index.js
test
服务器运⾏pm2 logs查看index.js打印⽇志
pm2 logs
本地仓库修改⽂件内容，提交远程仓库，⽇志出现deploy success,⾃动化部署成功。
访问47.108.82.91:88，记得在云服务器上放开访问端⼝号
域名访问
在拥有域名的前提下，优先使⽤域名访问。为什么？域名当然⽐IP+端⼝号好记，且美观。
这⾥为了⽅便控制，使⽤nginx-proxy镜像来操作，如下操作docker会⾃动去镜像仓库拉取，建议服务器80端⼝给nginx使⽤，⽅便以后增加域名和访问端⼝监听。
docker run --name nginx-proxy -d -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy
然后绑定域名到新建容器，这⾥使⽤我的⼆级域名。
docker run -e VIRTUAL_foo docsify-image
这⾥创建容器省略了容器名，
-e：设置环境变量
这时，域名已经配置好了，访问foo可以看到效果。
前⾯每次提交内容到github，服务器都会重新拉取最新代码，新建image，销毁container，新建container，访问内容才会更新，为了实现⾃动化，需要改造⼀下上⾯的index.js脚本,
const http = require("http")const { execSync } = require("child_process")const fs = require("fs")const path = require("path")// 递归删除⽬录function deleteFolderRec 修改后覆盖之前存放的index.js，然后重启脚本。
pm2 restart index.js
nginx部署前端项目配置完成后，以后每次提交github，都会⾃动更新，访问域名就会看到最新的内容。
note：本⽂中使⽤的端⼝号都需要在云服务器平台创建安全组策略，放开端⼝
https
使⽤ Letsencrypt 证书加密
letsencrypt-nginx-proxy-companion 是⼀个轻量级的代理容器，配合 nginx-proxy实现⾃动创建和⾃动更新 Let’s Encrypt 证书。
下载镜像
docker pull jrcs/letsencrypt-nginx-proxy-companion
启动 nginx-proxy
启动前，需要先将上⾯创建的nginx-proxy容器删掉，
docker rm nginx-proxy

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。