前端项目部署实战 nginx+docker持续集成

一，创建后端

建立后端文件夹 vue-back 并初始化

bash 复制代码

 npm init -y

创建server.js

js 复制代码

let http = require("http")
const users = [
    { id: 1, name: 'bian' },
    { id: 2, name: '张三' },
    { id: 3, name: '李四' },
]
let server = http.createServer(function(req, res) {
    console.log("req", req.url)
     // 为了防止中文乱码问题，需要设置响应头，
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    //解决跨域
    res.setHeader('Access-Control-Allow-Origin', '*')

    if (req.url === '/api/users') {
        res.end(JSON.stringify(users))
    } else {
        res.end("not found")
    }
})

server.listen(3001, () => {
    console.log("3001端口服务已启动", "http://localhost:3001")
})

修改packges.json中的启动项

js 复制代码

{
    "name": "vue-back",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "node ./server.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

创建.gitignore git忽略文件.

bash 复制代码

lib
node_modules
.idea
package-lock.json
Dockerfile
.dockerignore

二，创建前端.

bash 复制代码

// 初始化一个vue项目
vue create vue-front
//安装axios请求接口用
npm install axios

三，创建webhook

先创建文件夹vue-webhook,进入文件夹内初始化 npm init -y
安装nodemailer npm i nodemailer -S

四，服务器

去阿里云选个ecs服务器
购买后ssh 连接ssh 用户名@IP地址
连接后开始在服务器中安装环境. npm update //升级命令
创建文件夹projects并安装git

mkdir /usr/projects
yum install git -y

生成git公钥 ssh-keygen -t rsa -b 4096 -C 'xxxxxxxx@qq.com' //邮箱地址
查看公钥 cat /root/.ssh/id_rsa.pub
进入到/usr/projects文件夹拉取前后端代码

git clone git@github.com:github-bian/vue-front.git
git clone git@github.com:github-bian/vue-back.git

服务器上安装nvm wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
执行shell脚本 . /root/.bashrc
安装最新稳定版本的 npm和node nvm install stable
安装nrm （切换npm的源） npm install nrm -g

五，安装Docker

安装yum工具包 yum install -y yum-utils device-mapper-persistent-data lvm2
添加阿里的安装源 yum-config-manager \ --add-repo \ http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
安装docker yum install -y docker-ce docker-ce-cli containerd.io
安装docker镜像切换阿里云镜像阿里云加速 mkdir -p /etc/docker tee /etc/docker/daemon.json <<-'EOF' { "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"] } EOF
重载所修改的配置 sudo systemctl daemon-reload sudo systemctl restart docker

六，希望服务长久运行

pm2 服务管家 npm install pm2 -g

去vue-webhook改变启动方式

"scripts": { "start": "pm2 start ./webhook.js --watch --name webhook --watch", "stop": "pm2 stop webhook" },

pm2操作命令

停止 pm2 stop
查看日志pm2 logs

七，git短命令

服务器配置： vi ~/gitconfig

bash 复制代码

[alias]
 a=add -A
 c=commit -m'msg'
 p=push origin master
 pu=pulll origin master

八，vue-back下创建Dockerfile

bash 复制代码

FROM node
LABEL name='vue-back'   
LABEL version='1.0'     
COPY . /app
WORKDIR /app 
RUN npm install
EXPOSE 3001
CMD npm start

创建dockerignore 忽略文件

bash 复制代码

.gitignore
node_modules 
Dockerfile
.dockerignore

九，vue-webpack下创建vue-back.sh 脚本文件

bash 复制代码

#!/bin/bash
WORK_PATH='/usr/projects/vue-back'
cd $WORK_PATH
echo '先清除老代码'
git reset --hard origin main
git clean -f
echo '拉取代码'
git pull origin main
echo '开始构建'
docker build -t vue-back:1.0 .
echo '停止并删除旧容器'
docker stop vue-back-container 
docker rm vue-back-container 
echo ' 启动新容器'
docker container run -p 3001:3001 --name vue-back-container -d vue-back:1.0

vue-webpack文件内容

javascript 复制代码

let http = require("http")
let crypto = require('crypto')
let SECRET = '123456'

function sign(body) {
   return `sha1=` + crypto.createHmac('sha1', SECRET).update(body).digest('hex');
}

let server = http.createServer(function(req, res) {
   console.log("触发webhook", req.method)
   if (req.method == 'POST' && req.url === '/webhook') {
       let buffers = [];
       req.on('data', function(buffer) {
           buffers.push(buffer)
       })

       req.on('end', function(buffer) {
           let body = Buffer.concat(buffers);
           let event = req.headers['x-gitHub-event'];
           let signature = req.headers['x-hub-signature'];
           if (signature !== sign(body)) {
               return res.end("not found")
           }

       })
       res.setHeader('Content-Type', 'application/json')
       res.end(JSON.stringify({ ok: true }))
   } else {
       res.end("not found")
   }
})

server.listen(4000, () => {
   console.log("webhook服务已经在4000端口服务已启动")
})

十，vue-webpack下创建vue-front.sh 脚本文件

bash 复制代码

#!/bin/bash
WORK_PATH='/usr/projects/vue-front'
cd $WORK_PATH
echo '先清除老代码'
git reset --hard origin main
git clean -f
echo '拉取新代码'
git pull origin main
echo '开始编译'
npm run build
echo '开始构建'
docker build -t vue-front:1.0 .
echo '停止并删除旧容器'
docker stop vue-front-container 
docker rm vue-front-container 
echo ' 启动新容器'
docker container run -p 80:80 --name vue-front-container -d vue-front:1.0

十一，vue-front下创建vue-front.conf 。 nginx自定义配置文件

先在服务器上安装nginx yum install nginx -y
创建 vue-front.conf 文件

server{ 复制代码

  listen:80;
  server_name 106.14.181.6;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location /api{
    proxy_pass http://106.14.181.6:3001;
  }
}

查看docker 的包/ 删除包 docker container ps //查看docker容器下所有的包 docker container rm bc9a21e87416 2d1ce2995142 -f //删除docker下指定ID的包 bc9a21e87416包ID

十二，webhook项目下创建sendMail.js

安装nodemailer插件 npm install nodemailer -g

smtp授权码：txakqvjzeiqqcbea

js 复制代码

const nodemailer = require('nodemailer');
let transporter = nodemailer.createTransport({
  service: 'xxx2@qq.com', // 发给QQ邮箱
  port: 465, // 发邮箱的端口号
  secureConnection: true, // 使用SSL加密传输
  auth: { // 权限认证
    user: 'QQ邮箱',
    pass: '这是邮箱的授权码在邮箱后台生成的'
  }
})

let mailOptions = {
  from: '来自xxx1@qq.com', // 发邮件的账号
  to: 'xxx2@qq.com', // 收邮件的账号
  subject: 'hello', // 标题
  html: '<html><h1>world</h1></html>' // 邮寄的内容
}

transporter.sendMail(mailOptions, (err, info) => {
  if (!err) {
    console.log('邮件已经发生完成')
  }
})