作者Gitee地址 https://gitee.com/thciweicloud
作者项目 面包博客，一个微服务架构的前后端分离博客系统。
CI/CD目前有Gitee go、Gitlab私库+jekins、K8s、GithubAction等主流方案，鉴于是面包博客是个人项目且前三个需要的服务器资源比较多或付费的问题，还是选择了GithubAction(毕竟免费的2核7G资源)
我的笔记
流程
整体流程是Git将代码上传到Github仓库，由于编写了workflow文件，Action会自动感知，通过在服务器中执行工作流指令，读取项目中的dockerfile文件对每个项目模块进行打包、打包成镜像，最后推送到DockerHub。使用DockerCompose对容器进行编排，拉取镜像最后部署到个人服务器上，由portainer进行监控。
这里使用面包博客作为演示
前后端打包
后端打包
先使用idea将java代码打jar包
编写Dockerfile，放在resource中，由于javaJDK通常比较庞大，为了节省空间，使用java:alpine这个简化版JDK镜像，同时设置占用内存大小(多个容器对资源消耗是比较大的)
FROM java:alpine
VOLUME /tmp
ADD loafblog-blog-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-Xms100m","-Xmx100m","-jar","/app.jar"]
前端打包
npm run build将vue项目打包，注意像renren-fast这类gulp自动打包，使用gulp build
编写Dockerfile文件，放置于根目录下，在dev环境中，我们常常会被跨域的问题所困扰(dev的跨域并不是真正意义上的跨域)，生产环境我们通过nginx作为转发代理就能解决这一问题
FROM nginx
ADD ./dist /usr/share/nginx/html/
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
CMD ["nginx", "-g", "daemon off;"]
nginx配置文件，每个nginx配置文件不同，将监听端口改为你服务的端口
server {
listen 8001;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
GithubAction
GithubAction是一种工作流，在CI/CD中你可以看作流水线，根据jobs的顺序执行指令，最后实现项目的打包、部署等等
由于我们的工作流文件是所有人可见的，在一些填写密码的部分是不安全的（比如登录DockerHub），我们可以使用Github的secrets功能，在settings中创建一个环境存放我们的账号密码
- name: Login to DockerHub
uses: docker/login-action@v1
with:
username: ${
{
secrets.DOCKERHUB_USERNAME }}
password: ${
{
secrets.DOCKERHUB_TOKEN }}
指定环境
jobs:
build:
runs-on: ubuntu-latest
environment: loafblog
完整workflow代码见最后样例
容器编排
在个人服务器中创建一个文件夹，举个例子
--/opt
--loaf
--docker-image.yml
在loaf文件夹中使用 docker-compose up来根据yml内容拉取镜像编排
version: "3.0"
services:
loafblog-gateway:
image: thciwei/loafblog-gateway #这里是dockerhub中镜像名称
ports:
- "88:88" #设置端口
networks:
- loaf
loafblog-blog:
image: thciwei/loafblog-blog
ports:
- "7000:7000"
networks:
- loaf
loafblog_vue_web:
image: thciwei/loafblog_vue_web
ports:
- "8888:8888"
networks:
- loaf #将服务设置为同一个网络环境
networks: #定义一个网桥
loaf:
样例
GithubAction workflow.yml
name: Master-Docker-Images
on:
push:
branches: master
jobs:
build:
runs-on: ubuntu-latest
environment: loafblog
steps:
- uses: actions/checkout@v2
- uses: actions/setup-java@v1
with:
java-version: 1.8
- uses: actions/setup-node@v2
with:
node-version: '14'
- uses: docker/setup-buildx-action@v1
- name: Maven Install
run: |
echo '======= 开始mvn clean ======='
mvn clean
echo '======= 开始mvn install&&package ======='
mvn install -DskipTests=true && mvn package -DskipTests=true
- name: Build vue web
run: |
echo '======= 开始构建前端镜像 ======='
echo '======= 开始构建loafblog_vue ======='
cd ./loafblog_vue
npm install
gulp build
echo '== 防止index页面无效 =='
npm install -g http-server
docker build -t thciwei/loafblog_vue .
cd ..
echo '======= 开始构建loafblog_vue_web ======='
cd ./loafblog_vue_web
npm install
npm run build
docker build -t thciwei/loafblog_vue_web .
cd ..
- name: Build Server Images
run: |
echo '======= 开始构建后端镜像 ======='
echo '======= 开始构建loafblog-auth-server ======='
cd loafblog-auth-server
mvn docker:build
cd ..
echo '======= 开始构建loafblog-blog ======='
cd loafblog-blog
mvn docker:build
cd ..
echo '======= 开始构建loafblog-gateway ======='
cd loafblog-gateway
mvn docker:build
cd ..
echo '======= 开始构建loafblog-mail ======='
cd loafblog-mail
mvn docker:build
cd ..
echo '======= 开始构建loafblog-picture ======='
cd loafblog-picture
mvn docker:build
cd ..
echo '======= 开始构建loafblog-search ======='
cd loafblog-search
mvn docker:build
cd ..
echo '======= 开始构建renren-fast ======='
cd renren-fast
mvn docker:build
cd ..
- name: Login to DockerHub
uses: docker/login-action@v1
with:
username: ${
{
secrets.DOCKERHUB_USERNAME }}
password: ${
{
secrets.DOCKERHUB_TOKEN }}
- name: push Images to DockerHub
run: |
docker images
echo '======= 开始上传镜像 ======='
echo '======= 开始上传loafblog_vue_web ======='
docker push thciwei/loafblog_vue_web
echo '======= 开始上传loafblog_vue ======='
docker push thciwei/loafblog_vue
echo '======= 开始上传loafblog-auth-server ======='
docker push thciwei/loafblog-auth-server
echo '======= 开始上传loafblog-blog ======='
docker push thciwei/loafblog-blog
echo '======= 开始上传loafblog-gateway ======='
docker push thciwei/loafblog-gateway
echo '======= 开始上传loafblog-mail ======='
docker push thciwei/loafblog-mail
echo '======= 开始上传loafblog-picture ======='
docker push thciwei/loafblog-picture
echo '======= 开始上传loafblog-search ======='
docker push thciwei/loafblog-search
echo '======= 开始上传renren-fast ======='
docker push thciwei/renren-fast
echo '=====镜像上传结束====='