前端代码的简单部署

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

部署过程

• ssh 用户名@服务器ip，比如登录阿里云服务器 ssh [email protected]，输入密码就可以连接上远程服务器了
• 一般会在/home下面建立每个用户对应的文件夹，这样每个用户把自己的资源放到自己的文件夹下面，便于服务器管理者管理。阿里云上我设置的目录是/home/jason
• 把本地打包好的前端资源拷贝到远程服务器上
  scp /Users/jason/Desktop/public.zip [email protected]:/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 [email protected]:/home/jason/
• 在服务器执行sh deploy.sh

这样就完成了一次简单的部署，前端代码如果有变动，前端自己就很方便地部署了。也建议前端买个服务器，自己玩玩，毕竟前端已经不是以前的前端了，掌握点服务端的知识还是必要的。