一,创建后端
- 建立后端文件夹 vue-back 并初始化
npm init -y
- 创建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")
})
- 修改packges.json中的启动项
{
"name": "vue-back",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./server.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 创建.gitignore git忽略文件.
lib
node_modules
.idea
package-lock.json
Dockerfile
.dockerignore
二,创建前端.
// 初始化一个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
[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
- 创建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
- 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自定义配置文件
-
先在服务器上安装nginx
yum install nginx -y
-
创建 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;
}
}
- 查看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('邮件已经发生完成')
}
})