vue发布Nginx配置Https

2022-01-29 04:36:14

介绍

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端口访问一致