在前端的工作流中呢，前端还是要接触到运维服务器的，要会部署前端资源。比如，当第一次部署时，运维小伙伴给你配置好之后，测试环境就可以正常访问了。后期的前端资源会频繁更新，每次更新前端资源，都去麻烦人家就不太好了吧！这个时候，前端申请服务器权限，自己部署，这样就能随时更新测试环境。
部署过程
-
ssh 用户名@服务器ip，比如登录阿里云服务器ssh jason@139.196.79.6，输入密码就可以连接上远程服务器了 -
一般会在
/home下面建立每个用户对应的文件夹，这样每个用户把自己的资源放到自己的文件夹下面，便于服务器管理者管理。阿里云上我设置的目录是/home/jason -
把本地打包好的前端资源拷贝到远程服务器上
scp /Users/jason/Desktop/public.zip jason@139.196.79.6:/home/jason/，发现用命令行传输文件真6。注意，这一步是在本机的控制台面板里面执行的，不是在远程服务器对应的面板。因为是要把本地的资源copy到某个地方去，如果不在本地执行命令行，显然不行 -
在
/home/jason下面新建一个目录/home/jason/web，专门用于存放解压后的前端资源，Nginx配置的时候，root就指向web下面的index.html -
解压
unzip /home/jason/public.zip -
把web目录下面的资源删除
rm -rf /home/jason/web -
把解压的新资源move到web目录中
mv public/ /home/jason/web -
从解压开始，这几步可以写一个shell脚本，这样就不用每次敲这么多键盘了
// deploy.sh，文件是存放在 /home/jason目录下的 #!/bin/sh sudo unzip /home/jason/public.zip sudo rm -rf /home/jason/web sudo mv public/ /home/jason/web直接执行
sh deploy.sh即可 -
部署之后，如果不进行其他操作了，就可以输入
exit断开与远程服务器的连接
Nginx配置
我也尝试了一下简单的Nginx配置，就是把root指向到刚才的/home/jason/web目录，会碰到很常见的403错误，我也查了一下，就是访问权限的问题，参照这个http://aftercode.club/afterco... 处理了一下，然后就能访问了。前端不一定要对Nginx很熟，但是简单的配置、转发等还是有必要了解的，这也是我对自己的要求。
deploy.sh脚本写好之后，部署就变成三步了：
- 登录服务器
- 在本机执行
scp /Users/jason/Desktop/public.zip jason@139.196.79.6:/home/jason/ - 在服务器执行
sh deploy.sh
这样就完成了一次简单的部署，前端代码如果有变动，前端自己就很方便地部署了。也建议前端买个服务器，自己玩玩，毕竟前端已经不是以前的前端了，掌握点服务端的知识还是必要的。
metadata-changsha 的例子
const path = require('path')
const fs = require('fs')
const moment = require('moment')
const { execCmd } = require('./utils')
const indexHTMLPath = path.resolve(__dirname, '../dist/index.html')
const indexHTML = fs.readFileSync(indexHTMLPath, 'utf-8')
fs.writeFileSync(indexHTMLPath, indexHTML.replace('%lastDeployTime%', `${moment().format('YYYY-MM-DD HH:mm:ss')}`), 'utf-8')
const host = 'root@172.21.1.197'
const clearArr = ['rm -rf /var/www/html/metadata', 'mkdir /var/www/html/metadata']
const cmdArr = [
`ssh ${host} '${clearArr.join(';')}'`,
`scp -r ${path.join(__dirname.replace(/build$/, 'dist'), '*')} ${host}:/var/www/html/metadata`
]
const cmd = cmdArr.join(';')
execCmd(cmd, (stdout) => {
console.log('部署完成', stdout)
})
网友评论