vue发布Nginx配置Https

介绍

vue在国内的前端地位可谓是如日中天，由于目前主流的前后端分离式开发，让许多前端小伙伴不太了解服务器操作特别是Linux，而许多后台开发人员虽然精通服务器，却不懂前端框架如何发布。本篇将详细介绍vue构建静态文件发布至Linux并配置Nginx服务代理https，在发布前我们先需要准备以下环境：

• Linux服务器：CentOS、Ubuntu
• 域名：云服务商处购买域名
• SSL证书：云服务商购买或Open SSL

配置服务器

下面以阿里云服务为例，介绍Linux服务搭建过程，购买过程省略

安装Nginx

使用SSH工具进入服务器（推荐XShell），安装Nginx：
CentOS使用以下命令：
yum update
yum install nginx
Ubuntu使用命令：
sudo apt update
sudo apt install nginx
安装完成后启动nginx并配置开机自动启动
sudo systemctl start nginx
sudo systemctl enable nginx
浏览器输入服务IP查看nginx是否成功启动，出现以下界面说明安装成功（Ubuntu有差异），需要先开启80端口，参考下面端口配置

发布vue静态文件

在vue项目目录下输入npm run build:prod，复制dist打包文件上传至Linux服务器，上传成功后复制文件所在路径，最后配置nginx服务
输入以下命令进入配置nginx
vi /etc/nginx/nginx.conf
nginx配置大致如下：

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;

配置文件较长，主要配置server节点的内容，其他给中配置都是默认不需要修改，将第一个server节点中的root路径改为复制的dist路径

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /home/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

修改完成后退出vi并保存，然后刷新浏览器IP访问页面，可以看到nginx服务已经使用http成功代理vue发布文件

图中可以看到http代理下chrome自动提示连接不安全

域名配置

域名配置以阿里云域名服务为例，其他供应商均大同小异，购买过程省略。

注：域名服务最好和云服务使用同一供应商，如阿里云域名代理会对其服务器进行优化，速度更优，域名购买后需要实名认证才能使用。

域名解析

1. 进入阿里云域名管理控制台-域名列表，选择你需要解析的域名

2. 在解析设置中添加一条IPV4记录

保存成功后域名解析配置完成

SSL证书配置

SSL证书同样以阿里云为例，购买过程省略，开发者可以选择购买个人免费证书。

SSL证书下载

1. 进入阿里云SSL证书管理控制台-证书列表，选择你购买的证书并按步骤提交申请-审核验证。

2. 审核通过后在证书列表下载项中选择Nginx服务器下载

3. 下载完成后上传至Linux服务器并解压

解压文件后复制文件路径，可以根据需要修改文件名，如文件名太长。

Nginx配置

修改Nginx默认配置

进入nginx按照目录并修改nginx.conf默认配置
cd /etc/nginx
vi nginx.conf

1. 开启nginx 443端口监听

将nginx.conf中http节点第二个server配置注释解除，也就是开启nginx 443端口监听。

2. 将ssl_certificate、ssl_certificate_key配置更换为上传的SSL证书

3. 修改https代理根目录文件

将root替换发布的vue静态文件目录

4. 配置http请求自动跳转https

在nginx 80端口配置中，也就是第一个server节点配置添加一行自动跳转
rewrite ^(.*)$ https://$host$1 permanent;

完整配置如下

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  xucz.vip;
        rewrite ^(.*)$  https://$host$1 permanent;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

# Settings for a TLS enabled server.
 
    server {
        listen       443 ssl http2;
        listen       [::]:443 ssl http2;
        server_name  xucz.vip;
        root         /home/doc;

        ssl_certificate "/var/lib/nginx/xucz.vip.pem";
        ssl_certificate_key "/var/lib/nginx/xucz.vip.key";
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers on;
        error_page 497 301 =307

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

端口配置

1. 以上配置完成后需要开发端口才能正常访问，阿里云中端口不能在服务器防火墙中配置，只能在云服务管理控制台-实例中添加安全组

2. 在安全组配置规则中选择快速添加，并将http和https加入安全组

完成

在浏览器中使用域名进行访问

可以看到连接自动启用https，如果将连接改为http同样会自动跳转至https

注：使用域名访问80端口需要进行备案，我的域名暂时没有备案所有使用端口进行访问，效果同80端口访问一致