首页 / VUE / vue发布Nginx配置Https
vue发布Nginx配置Https
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue发布Nginx配置Https，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5190字，纯文字阅读大概需要8分钟。
内容图文
介绍
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端口访问一致
内容总结
以上是互联网集市为您收集整理的vue发布Nginx配置Https全部内容，希望文章能够帮你解决vue发布Nginx配置Https所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。