前端代碼的簡單部署

在前端的工做流中呢，前端仍是要接觸到運維服務器的，要會部署前端資源。好比，當第一次部署時，運維小夥伴給你配置好以後，測試環境就能夠正常訪問了。後期的前端資源會頻繁更新，每次更新前端資源，都去麻煩人家就不太好了吧！這個時候，前端申請服務器權限，本身部署，這樣就能隨時更新測試環境。

部署過程

• 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

這樣就完成了一次簡單的部署，前端代碼若是有變更，前端本身就很方便地部署了。也建議前端買個服務器，本身玩玩，畢竟前端已經不是之前的前端了，掌握點服務端的知識仍是必要的。