vue发布Nginx配置Https

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

#

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

  • Linux服务器：CentOS、Ubuntu

  • 域名：云服务商处购买域名

  • SSL证书：云服务商购买或Open SSL

#

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

#

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

Copy

# 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路径

Copy

    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自动提示连接不安全

#

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

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

#

#

#

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

#

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

#

#

#

#

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

#

#

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

#

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

#

#

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

#

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

#

Copy

    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 {
        }
    }

#

#

#

#

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

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

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

以上是 vue发布Nginx配置Https 的全部内容， 来源链接： utcz.com/z/379512.html

回到顶部