腾讯云+nginx部署nodejs应用(二)

声明:有些内容是TL那里学来的,后面会有版权说明。

部署静态页面

现在学习如何将一个较完整的是由webpack打包前端,hapi启动后端构成的nodejs项目。继续上一篇的todos应用。

新建分支

该项目由webpack+react+koa搭建,现在需要经过webpack打包出静态文件,该静态文件用于渲染前端页面,因为打包比较繁琐加缓慢,如果在云上打包,会增加服务器压力,所以这里采取本地打包上传的解决方案。

静态文件打包脚本

package.json里面添加命令

1
"build": "NODE_ENV=production ./node_modules/.bin/webpack --config webpack.config.js --colors"

根目录下新建bin文件夹,新建static文件,这里webpack打包的文件是存放在static里面的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#!/bin/bash
pushd $(dirname "${0}") > /dev/null
DIR=$(pwd -L)
popd > /dev/null
cd $DIR/../
rm -rf static
mkdir static
cp favicon.ico static/favicon.ico
npm run update
npm run build
cd static
git init
git add .
git commit -m "React Auto Deployed"
git remote add origin git@code.aliyun.com:candyzheng/todos.git
git push -f origin master:static

版本更新脚本

package.json里面添加命令

1
"update": "./bin/update"

新建bin/update文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#!/usr/bin/env node
const path = require('path');
const fs = require('fs');
const exec = require('child_process').exec;
const file = path.join(__dirname, '../package.json');
let pack = require(file);
const idx = 2;
const version = pack.version.split('.').map(Number).map((d, i) => {
if (i > idx) {
return 0;
}
if (i < idx) {
return d;
}
return d + 1;
})
.join('.');
pack.version = version;
pack.description = (new Date()).toLocaleString();
pack = JSON.stringify(pack, null, 2);
fs.writeFileSync(file, pack);
exec([
`cd ${path.join(__dirname, '../')}`,
'git add .',
`git commit -m 'v${version} - Static Files Generator'`,
'git push'
].join('\n'), (err, stdout, stderr) => {
if (err) {
console.log(err);
}
if (stderr) {
console.log(stderr);
}
console.log(stdout);
});

权限设置

执行命令

1
2
chmod 755 ./bin/static
chmod 755 ./bin/update

打包后提交静态文件

执行命令

1
./bin/static

代码就提交到master分支并打包static提交到static分支,然后就可以看到阿里云code代码库todos里面多了个static分支,里面只有打包好的静态文件。

修改部署命令

修改前一篇文章讲到的工作流todos的部署命令。

1
2
3
4
5
6
7
cd /home/ubuntu/apps/todos
git checkout .
git fetch
git checkout $CODE_VERSION
npm -d install
npm update
pm2 restart server/babel.js

该部署项目todos下,新建static工作流,选择todos项目的static分支

crp04

crp05

对应的正式部署命令:

1
2
3
tar -xf /home/ubuntu/apps/package.tgz -C /home/ubuntu/apps/todos
cd /home/ubuntu/apps/todos
pm2 restart server/babel.js

在这之前,先在云服务器上todos文件夹新建static文件夹。

biubiubiu接下来就可以触发部署啦,只要本地代码提交,就会触发todos流,更新云服务器代码,如果开发只是更改了前端静态文件,只需执行./bin/static,就会触发static流和todos流,更新云服务器代码,就可以实现持续交付啦开心~~

然后就可以访问ip:4000,就可以看到你的todos页面,下面一章讲如何使用Nginx代理应用。

云主机手动部署

git clone 项目代码
npm i安装依赖
webpack静态页面部署
本地打包静态文件,上传到static分支
git clone -b static git@xxx static将静态文件拷贝到云主机项目对应静态文件夹。

部分内容版权所有者:blog.willin.wang

如果您觉得受益了,欢迎打赏鼓励。