前言

用Vue寫了個部落格，第一次打包後正式部署到伺服器上，將其中遇到的問題，及參考的資料分享一下。

伺服器準備

本次部署使用的阿里雲的ecs雲伺服器，系統為ubuntu16.04，由於購買的香港地區的伺服器，因此無需備案。使用香港伺服器有以下優缺點：

1. 優點
   • 不需要備案，簡化流程
2. 缺點
   • 配置域名時無法針對該伺服器進行顯性或隱性url轉發，如轉發到埠等操作（可以用nginx配置解決，後文詳述）
   • 有和諧風險（講道理阿里這麼明目張膽的賣應該沒啥問題，如果用來搭梯子就另當別論）

域名準備

同樣是阿里雲購買的域名，如果要使用阿里雲的伺服器，強烈建議在阿里雲購買域名，省去許多不必要的步驟。域名購買後應該進行域名解析，解析過程中由於無法解析到埠，因此沒有特殊需求選擇第一類A類即可，後續根據不同的二級域名在nginx中配置。

nginx安裝與配置

3. 安裝（我在安裝前刪除了伺服器自帶的apache，參考徹底刪除apache）

   總結ubuntu16.04安裝程式如下（其他系統和其他版本ubuntu請自行參考文件）：

   sudo apt-key add nginx_signing.key
   deb http://nginx.org/packages/ubuntu/ xenial nginx
   deb-src http://nginx.org/packages/ubuntu/ xenial nginx
   apt-get update
   apt-get install nginx
   

4. 拷貝你的靜態檔案到相應目錄 如果之前有安裝過apache等，會留有/var/www

   目錄，我之前解除安裝apache時已經刪掉了，所以新建，再在裡面新建static-blog資料夾，將經過webpack打包生成後的靜態檔案放入

5. 配置nginx 安裝後進入/etc/conf.d/資料夾，第一次進入為空，新建blog-collinjs-site.conf檔案（檔名自定，我的域名解析為blog.collinjs.site），內容如下：

   server {
     server_name blog.collinjs.site; // 你的域名或者 ip
     root /var/www/static-web/static-blog; // 靜態檔案路徑
     index index.html; // 顯示首頁
     location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
       root /var/www/static-web/static-blog;
     } // 靜態檔案訪問
   }
    
   

   如無意外經過以上步驟後可以通過域名訪問到你的靜態部落格啦~ 但發現以下問題：

   1. 打包後的靜態檔案較大，首頁載入慢
   2. chrome提示不安全，原因是因為沒有配置https服務

   首先解決不安全問題，採用https服務

nginx配置https服務

1. 到阿里雲證書服務上申請證書，參考文章
2. 下載證書放到雲伺服器上解壓，分兩步修改配置

   • 修改blog-collinjs-site.conf

   • 增加blog-collinjs-site-base.conf，將http請求轉為https請求

     // blog-collinjs-site.conf
     server {
       listen 443;
       ssl on;
       ssl_certificate /etc/nginx/cert.conf/*****.crt;//解壓後的crt檔案地址
       ssl_certificate_key /etc/nginx/cert.conf/*****.key;//解壓後的key檔案地址
       ssl_session_timeout 5m;
       ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
       ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
       ssl_prefer_server_ciphers on;
       server_name blog.collinjs.site;
       root /var/www/static-blog;
       try_files $uri $uri/ /index.html last;
       index index.html;
       location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
         root /var/www/static-blog;
       }
     }
     

     //blog-collinjs-site-base.conf
     server {
       listen 80;
       server_name blog.collinjs.site;
       rewrite ^(.*) https://$server_name$1 permanent;
     }
     
     

加快首次頁面載入速度

1. 採用懶載入vue元件，也即用到的時候再載入，不用一次性全部打包載入，參考官方文件
2. 採用Gzip形式打包，進一步減小檔案大小，同時去除sourceMap，這裡我參考文章，在使用gzip的過程中發現必須要將webpack升級到4.0，這裡我參考文章，個人專案配置可以去看我的原始碼