前端代码的简单部署

在前端的工作流中呢，前端还是要接触到运维服务器的，要会部署前端资源。比如，当第一次部署时，运维小伙伴给你配置好之后，测试环境就可以正常访问了。后期的前端资源会频繁更新，每次更新前端资源，都去麻烦人家就不太好了吧！这个时候，前端申请服务器权限，自己部署，这样就能随时更新测试环境。

部署过程

• 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)
})