Nginx的使用和vue项目打包部署

安安小菜鸟
128 阅读5分钟

零、初识Nginx和环境准备

  1. Nginx介绍 "Nginx是款轻量级的HTTP服务器，采用事件驱动的异步阻塞处理式框架，这让其具有极好的IO性能，时常于服务端的反向代理和负载均衡。"

  2. Nginx的优点

  • 持海量并发：采用IO多路复epoll。官方测试Nginx能够支持5万并发链接，实际生产环境中可以支撑2-4万并发连接数。
  • 内存消耗少：在主流的服务器中Nginx目前是内存消耗最小的了，例如我们：Nginx+PHP，在3万并发链接下，开启10个Nginx进程消耗150M内存。
  • 免费使用可以商业化：Nginx为开源软件，采用的是2-clause BSD-like协议，可以免费使用，并且可以用于商业。
  • 配置简单：网络和程序配置通俗易懂，即使非专业运维也能看懂。 当然它的优点还有很多，如反向代理功能，负载均衡功能
  • 现在Nginx非常流行：我们可以通过连接这个网站看到，Nginx在服务器中的排名，占有率达到39.7%。

一、Nginx安装与使用

1. windows系统

  1. 根据不同电脑设备，下载不同版本的Nginx压缩包。

下载地址

这里以，window版本的 nginx/Windows-1.18.0 为例

  1. 将压缩包解压至电脑的某个盘符下。
  2. 在该盘符nginx目录中调出命令终端，执行启动命令
cd nginx-1.18.0

nginx
### 2. Linux系统

1. Nginx版本说明
Mainline version ：开发版,主要是给Nginx爱好者，测试、研究和学习的，
但是不建议使于产环境。
Stable version : 稳定版,也就是我们说的期更新版本。这种版本般较成
熟，经过时间的更新测试，所以这种版本也是主流版本。
legacy version : 历史版本，如果你需要以前的版本，Nginx也是有提供的。
2. 基于Yum的式安装Nginx

3. 安装的命令非常简单：

yum install nginx


安装完成后可以使⽤命令，来检测Nginx的版本。

nginx -v

## 二、Nginx目录简介

![image](https://user-gold-cdn.xitu.io/2020/4/29/171c4e969c75753f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)

主要的文件是conf/nginx.conf核心配置文件，我们将在这个配置文件中完成我们项目访问路径，及静态资源加载配置。

1. 在云服务器中找到Nginx安装目录

百度云服务器 cd /etc/nginx

## 三、认识nginx.conf
1. nginx.conf中常用配置项介绍。

main # 全局配置，对全局生效 ├── events # 配置影响 Nginx 服务器或与用户的网络连接 ├── http # 配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置 │ ├── upstream # 配置后端服务器具体地址，负载均衡配置不可或缺的部分 │ ├── server # 配置虚拟主机的相关参数，一个 http 块中可以有多个 server 块 │ ├── server │ │ ├── location # server 块可以包含多个 location 块，location 指令用于匹配 uri │ │ ├── location │ │ └── ... │ └── ... └── ...



2. 通过观察nginx.conf中的默认server配置块，完成如下配置：

server { listen 8088; server_name yooye.vip;

location / {
    root   /usr/share/nginx/html;
    index  dist/index.html;
}

}

3. 配置本地电脑的hosts文件，使得浏览器支持自定义域名yooye.vip访问。

> 自定义域名配置流程参考 [链接](https://jingyan.baidu.com/article/5bbb5a1b15c97c13eba1798a.html?qq-pf-to=pcqq.c2c)

4. 通过自定义域名yooye.top成功访问abc.html内容。



## 四、Nginx常用命令

Nginx 的命令在控制台中输入 `nginx -h` 就可以看到完整的命令，这里列举几个常用的命令：

nginx # 启动nginx服务器 nginx -s reload # 向主进程发送信号，重新加载配置文件，热重启 nginx -s reopen # 重启 Nginx nginx -s stop # 快速关闭 nginx -s quit # 等待工作进程处理完成后关闭


## 五、vue项目打包部署

1. 在vue.config.js中配置publicPath为`/static`,方便后续做nginx的资源路径配置。
2. 执行`npm run build`打包vue项目，得到dist目录。
3. 将dist目录整体放置于nginx安装目录的`html`目录下。
4. 调整nginx.conf中的配置，保证用户可以通过自定义域名，访问到dist中的index.html。
配置参考：

server { listen 80; server_name yooye.vip;

location / {
    root   html;
    index  dist/index.html;
}

location /static {  #静态资源访问配置
    alias  html/dist;
    autoindex  on;
    autoindex_exact_size off;
    autoindex_localtime  off;
}

location ^~/api/ {  #nginx代理配置
    proxy_pass http://localhost:3000/; #注意这个域名后面的/一定要保留，不保留无法剔除/api
}

location ^~/hello/ {
    proxy_pass https://m.maoyan.com/;
}

}


## 六、nginx路径匹配规则
server 块可以包含多个 location 块，location 指令用于匹配 uri，语法：

location [ = | ~ | * | ^] uri { ... }

代码指令后面：

1. = 精确匹配路径，用于不含正则表达式的 uri 前，如果匹配成功，不再进行后续的查找；
2. ^~ 用于不含正则表达式的 uri； 前，表示如果该符号后面的字符是最佳匹配，采用该规则，不再进行后续的查找；
3. ~ 表示用该符号后面的正则去匹配路径，区分大小写；
4. ~* 表示用该符号后面的正则去匹配路径，不区分大小写。跟 ~ 优先级都比较低，如有多个location的正则能匹配的话，则使用正则表达式最长的那个；

如果 uri 包含正则表达式，则必须要有 ~ 或 ~* 标志。
 


## 七、Nginx中模块化配置文件

因为在nginx上部署的项目可能会比较多，为了独立维护每一个项目的配置项文件，我们需要将单个项目的配置文件独立提取。

1. 在nginx安装目录下新建conf.d文件夹
2. 在该文件夹中新建yooye.vip.conf文件
3. 在yooye.vip.conf中写入上一步的项目配置的server块
4. 在nginx.conf中使用`include`引入conf.d文件夹中的配置文件

http { include D:/r/nginx-1.18.0/conf.d/*.conf; #注意这里采用绝对路径引入 server { listen 8088; server_name localhost; location / { root html; index index.html index.htm; } location = /50x.html { root html; } } }


## 八、Nginx的gzip加速

对比gzip开启与关闭状态下，vue项目的首屏加载速度

http { gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 8; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; gzip_vary on; gzip_disable "MSIE [1-6]."; }

avatar
文章
阅读
粉丝