记一次nginx部署Vue静态页面

前言

用Vue写了个博客，第一次打包后正式部署到服务器上，将其中遇到的问题，及参考的资料分享一下。

服务器准备

本次部署使用的阿里云的ecs云服务器，系统为ubuntu16.04，由于购买的香港地区的服务器，因此无需备案。使用香港服务器有以下优缺点：

1. 优点
   • 不需要备案，简化流程
2. 缺点
   • 配置域名时无法针对该服务器进行显性或隐性url转发，如转发到端口等操作（可以用nginx配置解决，后文详述）
   • 有和谐风险（讲道理阿里这么明目张胆的卖应该没啥问题，如果用来搭梯子就另当别论）

域名准备

同样是阿里云购买的域名，如果要使用阿里云的服务器，强烈建议在阿里云购买域名，省去许多不必要的步骤。域名购买后应该进行域名解析，解析过程中由于无法解析到端口，因此没有特殊需求选择第一类A类即可，后续根据不同的二级域名在nginx中配置。

nginx安装与配置

3. 安装（我在安装前删除了服务器自带的apache，参考彻底删除apache）

   官方安装指导：http://nginx.org/en/linux_packages.html

   总结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/nginx/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，这里我参考文章，个人项目配置可以去看我的源码