初次使用Nginx部署项目（待更新）

清疚 2022-10-09 03:12 158阅读 0赞

### Nginx部署Vue项目 ###

*   *  第一步：Nginx介绍
     *  第二部：本地Windows使用Nginx部署Vue静态项目
     *  第三步：阿里云 CentOS 7.6 64 位操作系统~部署Vue前端项目
     *   *  步骤一：
         *  步骤二：
     *  写在最后：
     *  后续：卸载nginx(依赖库未删除)

## 第一步：Nginx介绍 ##

*  概念： 一个高性能的Web服务器和反向代理服务器；
 *  问世：由俄罗斯人lgor Sysoev采用C语言开发编写于2004年10月4日发布第一个版本；
 *  特点：占内存少，并发处理能力强，以高性能、底系统资源消耗而闻名，Nginx官方测试为5万并发请求。与Nginx的并发处理能力在同类型Web服务器中表现极好（Apache）；
 *  官网下载版本：分为Linux版（tar.gz）和Windows版（zip），前者用于线上互联网Linux系统上部署项目，后者用于个人的windows本机测试部署项目使用。

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]

## 第二部：本地Windows使用Nginx部署Vue静态项目 ##

*  在官网下载nginx.zip压缩文件，本地解压后，打开路径下文件

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]  
> \*修改nginx.conf文件  
> \*双击启动nginx,若再次修改配置文件，则需要重新加载配置文件，执行命令：或直接通过任务管理器关闭在开启。![在这里插入图片描述][20210623155102950.png]  
> \*serve中的配置不可少！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]

> \*这是我的路由配置文件，除了nginx设置，vue项目并未有任何添加和修改！  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]

server {
            listen       81;
            server_name  localhost;
    
    		location / {
                          root   D:\HengKang\vue-element\dist2;
                          try_files $uri $uri/ @router;
                          index index.html index.html;
            }
    
             # 路由配置信息 （去掉报500）
               location @router {
                 rewrite ^.*$ /index.html last;
               }
    		
    
        }

## 第三步：阿里云 CentOS 7.6 64 位操作系统~部署Vue前端项目 ##

### 步骤一： ###

*  在官网下载的Nginx的Linux版本（后缀tar.gz的压缩包）；
 *  通过xhell软件，连接服务器；
 *  创建soft文件夹，使用 yum install lrzsz (一个可支持在Linux上传Windows系统的压缩包) ，然后执行rz -y 命令出现上传窗口，最后将所需的nginx.tar.gz压缩包上传到soft文件夹中；
 *  执行命令：tar-zxvf nginx-1.20.1.tar.gz 将压缩包解压至当前目录；

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 5]

### 步骤二： ###

*  将打包好的项目，上传到nginx的html目录下 （我使用的是FileZilla软件上传的）
 *  安装前的准备：Nginx的安装需要Linux安装几个库，否则出现配置和编译错误，执行命令：yum install gcc openssl openssl-devel pcre pcre-devel zlib zlib-devel -y 一次性安装gcc、openssl、pcre、zlib四个库的依赖安装。因为Nginx是基于C语言编写的，正式安装之前必须保证已经四个库的依赖。
 *  正式安装nginx：执行命令指定安装路径 .  
    /configure --prefix=/usr/local/nginx  
    其次执行编译：make  
    最后执行命令安装：make install （到这一步nginx就可以直接通过命令启动，看到成功看到nginx的页面）

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 6]  
> ![在这里插入图片描述][20210623174643803.png]

*  进入vi nginx.conf，配置和Windows配置相同，只要修改此处的项目路径，然后esc + :wq 保存并退出（注意键盘处于英文状态下）

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 7]

*  执行：/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 命令启动nginx服务器；

## 写在最后： ##

*  初次使用，建议先本地Windows系统下，先将配置文件中按上图配置，然后启动，可以访问通了，在去下Linux版的nginx丢服务器上部署。

## 后续：卸载nginx(依赖库未删除) ##

*  查找nginx文件：find / -name nginx\*
 *  执行删除文件命令： rm -rf file 文件名
 *  ctrl + L 清空当前Linux面板信息；

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20221005/521d505ef41a4e6c967673961a03e1d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]: /images/20221005/847a712fc3c24a65860fffb9011809fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]: /images/20221005/b55129ac349545f591a07aa6f5b1b279.png
[20210623155102950.png]: /images/20221005/a8685b5a5a564f9d84256b3ddd098312.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]: /images/20221005/4b38aba376984780a5d76750afba1dff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]: /images/20221005/3068592dd2bb424bae8c8caad35a8a47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 5]: /images/20221005/eddcb410ef784da0a73824a54ed195f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 6]: /images/20221005/57e5a03096ef419b9a904a7d9fa6c193.png
[20210623174643803.png]: /images/20221005/25edc939b7dc4086a0d40268e7e5ccd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 7]: /images/20221005/7286f0e0b9944bd19b446c99a4cc7ba0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 8]: /images/20221005/0df227a54cba40d0ba3158ae0e04ce1f.png