使用centos 7 和nginx 搭配使用Xshell和Xftp部署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上传到服务器上所以我们需要去用这灵感个工具连接到服务器

    步骤如下:

    新建会话

    使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第1张图片

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

使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第2张图片

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

使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第3张图片

选择一次性接受

使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第4张图片

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

使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第5张图片

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

使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第6张图片

  1. 下载nginx

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

    • 安装gcc

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

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

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

      gcc -v

      安装命令:

      yum -y install gcc

      使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第7张图片

      可以用命令查看是否成功

      使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第8张图片

    • pcre、pcre-devel安装

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

      安装命令:

      yum install -y pcre pcre-devel

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

      使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第9张图片

  • zlib安装

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

    安装命令:

    yum install -y zlib zlib-devel

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

    使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第10张图片

  • 安装openssl

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

    安装命令:

    yum install -y openssl openssl-devel

    如下图所示则安装成功:

    使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第11张图片

  • 安装nginx

    1. 命令安装

      首先:

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

      安装命令如下:

      yum install wget

      如下图所示为安装成功:

      使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第12张图片

      其次:

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

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

      mkdir nginx

      然后cd nginx 进入文件夹

      具体步骤如下图所示

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

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

      下载当前最新稳定版本,如果想下载具体版本可以去nginx官网下载地址找对应版本下载输入版本号进行下载
      使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第13张图片
      可以通过ls查看当前文件夹里面的内容如下图所示为安装成功:

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

      tar -zxvf nginx-1.24.0.tar.gz

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

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

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

      使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第14张图片

  • 注意:

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

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

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

    make

    make install

  1. 上传项目并启动nginx

    • 部署项目到指定位置

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

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

      使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第15张图片

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

      使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第16张图片

  • 修改nginx配置并启动

    我们用Xftp把目录切换到/usr/local/nginx/conf下,找到nginx.conf文件直接右键用技术本打开
    使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第17张图片
    打开后具体配置说明请看下图:
    使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第18张图片

    配置完成之后保存即可

    启动nginx

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

    使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第19张图片

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

    使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第20张图片

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

    使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,_第21张图片

  • 注意

    • 在启动项目时可能报找不到页面什么的,大概率时端口号没开放,所以我们要开放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

你可能感兴趣的:(使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目,)