使用centos 7 和nginx部署vue或react项目

使用centos 7 和nginx部署vue或react项目

众所周知vue和react在国内是非常受欢迎的前端框架,市场上大部分项目都是用vue或者react去搭建的。

在项目完成之后，就需要部署上线,客户才能体验到我们开发的项目。大多时候都是后端去统一部署的。

而其实在前后端分离的大前端时代，前后端代码是可以分开去部署的，那么接下来就是任何理由nginx部署项目到centos上

工具介绍

工欲善其事,必选利其器，了解好使用的工具，才能更好的去完成好工作

1. centos

   centos的全称是社区ENTerprise操作系统，是Linux的发行版之一，由红帽企业Linux按照开源法规发布的源代码编译而成。

2. nginx

   nginx 是异步框架的网页服务器，也可以用作反向代理、负载平衡器和HTTP缓存。该软件由俄罗斯程序员伊戈尔·赛索耶夫（Игорь Сысоев）开发并于2004年首次公开发布[7]。2011年成立同名公司以提供支持服务[8]。2019年3月11日，Nginx公司被F5网络公司以6.7亿美元收购[9]。

   Nginx是免费的开源软件，根据类BSD许可证的条款发布。一大部分Web服务器使用Nginx，通常作为负载均衡器。

3. Xshell 和Xftp

   Xshell是一个功能强大的终端模拟器,支持SSH,SFTP、TELNET、远程登录命令连接，让本地和服务器之间产生连接。

   Xftp是一个灵活和轻量级SFTP / FTP客户端用户需要安全地通过网络传输文件。让本地和服务器之间进行文件交换(上传和下载)。简单来说就是图形化可以直接上传文件到服务器上面

   这两个工具的下载步骤和破解就不做详情介绍了，自己可以去网上找或者下载免费版的

搭建和部署步骤

1. 使用Xshell和Xftp连接到服务器

   因为我们要在服务器上下载和使用nginx，我们可以通过命令来下载，或者通过本地下载然后再通过Xftp上传到服务器上所以我们需要去用这灵感个工具连接到服务器

   步骤如下：

   新建会话

   

   然后输入对应的名称选择为ssh协议，和输入对应的服务器ip

点击用户身份验证输入登录服务器的用户名和密码，然后点击连接

选择一次性接受

成功后后进入到服务器根目录

Xftp也是同样的步骤，成功后出现如图页面

2. 下载nginx

   在下载nginx的时候我们需要去下载一些插件才能去运行和编辑nginx

   • 安装gcc

     gcc是linux下的编译器，可以编译C,C++,java等语言，具体详情大家感兴趣可以自行去了解

     如果是阿里云的centOs7服务器，都会自带gcc。

     可以通过以下命令查看是否安装

     gcc -v

     安装命令：

     yum -y install gcc

     

     可以用命令查看是否成功

     

   • pcre、pcre-devel安装

     pcre是一个perl库，其中包含perl兼容的正则表达式库,使 nginx 支持 HTTP Rewrite 模块

     安装命令：

     yum install -y pcre pcre-devel

     如出现下图则证明安装成功

     

   • zlib安装

     zlib库提供了很多种压缩和解压缩方式，nginx使用zlib对http包的内容进行解压

     安装命令：

     yum install -y zlib zlib-devel

     如下图所示则安装成功了：

     

   • 安装openssl

     openssl是web安全通讯的基石，可以使nginx支持 https使用（即在ssl协议上传输http）

     安装命令：

     yum install -y openssl openssl-devel

     如下图所示则安装成功：

     

   • 安装nginx

     1. 命令安装

        首先:

        要想用命令下载nginx就得安装wget,其是一个用于从网络上下载文件的命令行工具，它可以通过 HTTP、 HTTPS 和 FTP 等协议下载文件

        安装命令如下：

        yum install wget

        如下图所示为安装成功：

        

        其次：

        我这里选择是在/usr/local下面新建一个文件夹nginx

        首先cd /usr/local 在目录下执行以下命令创建文件夹

        mkdir nginx

        然后cd nginx 进入文件夹

        具体步骤如下图所示

        

        然后在该目录下执行如下命令：

        wget http://nginx.org/download/nginx-1.24.0.tar.gz

        下载当前最新稳定版本，如果想下载具体版本可以去nginx官网下载地址找对应版本下载输入版本号进行下载

        

        可以通过ls查看当前文件夹里面的内容如下图所示为安装成功：

        

        然后通过以下命令把压缩包解压到nginx文件夹

        tar -zxvf nginx-1.24.0.tar.gz

        通过ls看到当前目录有如图文件夹就解压成功了

        

     2. 官网下载后解压后通过Xftp安装

        这种方法安装是比较简单的，直接通过nginx官网下载地址下载解压后直接把对应文件夹拖到图片对应位置即可

        

   • 注意：

     如果直接使用./configure可能会出现ssl模块没有安装问题，小编查找资料后执行以下三个命令可以解决

     首先进入到cd nginx-1.24.0 文件夹 ,然后执行以下三个命令

     ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

     make

     make install

3. 上传项目并启动nginx

   • 部署项目到指定位置

     在项目完成后，我们把进行打包的项目文件通过Xftp上传到服务器指定位置。这里演示的项目我直接从开源仓库里拉取的，你们可以打包自己的项目上传即可。

     首先把目录切换到/usr/local/nginx

     

     直接把打包好的项目拖到该目录下

     

   • 修改nginx配置并启动

     我们用Xftp把目录切换到/usr/local/nginx/conf下，找到nginx.conf文件直接右键用技术本打开

     

     打开后具体配置说明请看下图：

     

     配置完成之后保存即可

     启动nginx

     用Xshell把目录切换到/usr/local/nginx/sbin在该目录下执行以下命令./nginx 启动nginx

   

   可以通过ps -ef | grep nginx检查nginx是否启动成功，如同所示为成功：

   

   然后我们在，浏览器输入服务器域名或者ip和端口号，加上项目路径就可以看到了如下图证明成功了

   

   • 注意

     • 在启动项目时可能报找不到页面什么的，大概率时端口号没开放，所以我们要开放nginx对应的端口

       • 命令如下

       • 开启放对应端口

         firewall-cmd --zone=public --add-port=80/tcp --permanent

         出现success证明成功了

         命令的含义：

         –zone #作用域

         –add-port=80/tcp #添加端口，格式为：端口/通讯协议

         –permanent #永久生效，没有此参数重启后失效

       • 重启防火墙

         systemctl restart firewalld.service

       

     • 在重新上传项目或者修改nginx配置时我们需要重新启动nginx

       ./nginx -s reload