CentOS 7 部署Nginx和前端框架

1年前未命名35
CentOS 7 部署Nginx和前端框架 星空你好 于2023-02-03 22:46:33发布 333 收藏 2 分类专栏: 运维 linux web前端 文章标签: nginx centos 前端框架 运维 同时被 3 个专栏收录 1 篇文章 0 订阅 订阅专栏 linux 1 篇文章 0 订阅 订阅专栏 web前端 29 篇文章 0 订阅 订阅专栏

参考: Centos 7下安装配置Nginx-阿里云开发者社区 (aliyun.com) 阿里P8架构大牛整理的Nginx 从入门到实践,万字详解 安装nginx之后,处理 conf.d下无default.conf文件

1. CentOS 7 下安装配置 Nginx 一、配置 EPEL 源 sudo yum install -y epel-release sudo yum -y update 二、安装 Nginx sudo yum install -y nginx

安装成功后,默认的网站目录为: /usr/share/nginx/html

默认的配置文件为:/etc/nginx/nginx.conf

自定义配置文件目录为: /etc/nginx/conf.d/

也可以通过一下命令查看 Nginx 被安装到了什么地方,有哪些相关的目录:

rpm -ql nginx 三、开启端口80和443

如果你的服务器打开了防火墙,你需要运行以下命令,放行80和443端口。

sudo firewall-cmd --permanent --zone=public --add-service=http sudo firewall-cmd --permanent --zone=public --add-service=https sudo firewall-cmd --reload # 验证端口是否放行 firewall-cmd --list-all 四、操作 Nginx # 查看nginx版本 nginx -v # 启动nginx systemctl start nginx # 停止nginx systemctl stop nginx # 重启nginx systemctl restart nginx # 查看nginx状态 systemctl status nginx # 开机启动nginx systemctl enable nginx # 关闭开机启动nginx systemctl disable nginx # 重载 nginx 配置文件 systemctl reload nginx # 或者 nginx -s reload # 测试 nginx 配置(在重新启动或重新加载服务之前测试配置) nginx -t 五、前端文件打包 npm run build # 打包演示环境包,会加载 .env.preview 配置文件 npm run build:preview # 如果需要生成打包分析图 npm run build:report 六、复制文件到网站根目录

复制dist.zip文件到网站根目录(/usr/share/nginx/html)

unzip -d /usr/share/nginx/html/ /root/Desktop/dist.zip

此时可以预览,http://localhost/

七、Nginx配置

在 /etc/nginx/nginx.conf文件中增加配置:

http { # 在http下面增加这一段 server { # 这里配置端口 listen 8080; server_name localhost; location / { # 加这个是支持history的路由模式,很重要,不然刷新会404 try_files $uri $uri/ /index.html; # 这里配置项目位置 root C:/webapp/eleadmin; index index.html index.htm; } } }

开启gzip功能

项目打包后一般都有一两个核心的 js 体积会很大,推荐 nginx 服务器开启 gzip 功能,gzip 可以压缩 3-5 倍左右, 能够大幅度优化首屏加载的速度,ele-admin 已经配置了打包生成 gzip 文件,只需要给 nginx 增加如下配置:

server { listen 80; server_name demo.eleadmin.com; # 开启gzip功能 gzip on; gzip_min_length 10k; gzip_comp_level 9; gzip_types text/plain text/css application/javascript application/x-javascript text/javascript application/xml; gzip_vary on; gzip_disable "MSIE [1-6]\."; location / { try_files $uri $uri/ /index.html; root C:/webapp/eleadmin; index index.html index.htm; } }
标签: [db:标签TAG]

相关文章

爬虫实例(二)—— 爬取高清4K图片

爬虫实例(二)—— 爬取高清4K图片...

[Python从零到壹] 六十四.图像识别及经典案例篇之图像傅里叶变换和傅里叶逆变换详解

[Python从零到壹] 六十四.图像识别及经典案例篇之图像傅里叶变换和傅里叶逆变换详解...

98年表示真干不过,部门新来的00后测试员已把我卷崩溃,想离职了...

98年表示真干不过,部门新来的00后测试员已把我卷崩溃,想离职了......

Python---人生重开模拟器(简版)

Python---人生重开模拟器(简版)...

如何用ChatGPT高效完成工作

如何用ChatGPT高效完成工作...

在CSDN年收入竟达五位数?----大学生技术自媒体成长之路

在CSDN年收入竟达五位数?----大学生技术自媒体成长之路...