vue项目和nodejs项目部署实战 nginx+docker持续集成

一，创建后端

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

 npm init -y  

2. 创建server.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")
})

3. 修改packges.json中的启动项

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

4. 创建.gitignore git忽略文件.

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

二，创建前端.

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

三，创建webhook

1. 先创建文件夹vue-webhook,进入文件夹内初始化
   npm init -y

2. 安装nodemailer
   npm i nodemailer -S

四，服务器

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

• mkdir /usr/projects
• yum install git -y

5. 生成git公钥
   ssh-keygen -t rsa -b 4096 -C 'xxxxxxxx@qq.com' //邮箱地址

6. 查看公钥
   cat /root/.ssh/id_rsa.pub

7. 进入到/usr/projects文件夹拉取前后端代码

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

8. 服务器上安装nvm
   wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

9. 执行shell脚本
   . /root/.bashrc

10. 安装最新稳定版本的 npm和node
    nvm install stable

11. 安装nrm （切换npm的源）
    npm install nrm -g

五，安装Docker

1. 安装yum工具包
   yum install -y yum-utils device-mapper-persistent-data lvm2

2. 添加阿里的安装源
   yum-config-manager \ --add-repo \ http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

3. 安装docker
   yum install -y docker-ce docker-ce-cli containerd.io

4. 安装docker镜像 切换阿里云镜像 阿里云加速
   mkdir -p /etc/docker tee /etc/docker/daemon.json <<-'EOF' { "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"] } EOF

5. 重载所修改的配置
   sudo systemctl daemon-reload
sudo systemctl restart docker

六，希望服务长久运行

pm2 服务管家
npm install pm2 -g

1. 去vue-webhook改变启动方式

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

2. pm2操作命令

• 停止 pm2 stop
• 查看日志pm2 logs

七，git短命令

1. 服务器配置： vi ~/gitconfig

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

八，vue-back下创建Dockerfile

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

1. 创建dockerignore 忽略文件

.gitignore
node_modules 
Dockerfile
.dockerignore

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

#!/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

1. vue-webpack文件内容

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 脚本文件

#!/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自定义配置文件

1. 先在服务器上安装nginx
   yum install nginx -y

2. 创建 vue-front.conf 文件

  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;
  }
}

3. 查看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

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('邮件已经发生完成')
  }
})