使用Termius在服务器上安装Nginx，并部署前端项目

緣字訣
431 阅读4分钟

因为实验室最近新买了一个华为云的服务器，实验室老大便让我在上面部署一个前端项目。于是便打算写此文章来记录一下第一次自己在服务器上安装nginx，并实现前端部署的过程。希望对大家也能有所帮助。

连接服务器

因为我是通过Termius来连接服务器的，所以直接在Termius上点击新建服务器，填写相关信息就行了，也是比较方便。 Termius.png 填完必要信息后，点击Connect即可连接服务器(中途还会询问你是否连接，点击继续连接，并再次输入密码就行了)。

下载Nginx

首先去nginx官网下载nginx镜像文件nginx官方网站，一般我们都选择稳定版来进行下载。 nginx.png 下载完成后，将nginx的tar.gz压缩包通过Termius中的SFTP上传至服务器。 sftp.png 在SFTP界面，左边是本地文件，右边是服务器文件，这里我将tar.gz压缩包放到了D盘里面，大家找到压缩包在自己本地的地址，在SFTP中打开后，直接拖到右边根目录就行。

解压并安装Nginx

在终端中(在Termius的Hosts界面里双击服务器即可进入)，进入服务器nginx压缩包所在目录，使用tar命令进行解压。

tar -zxvf nginx-1.24.0.tar.gz

解压完成后，会得到名为nginx-1.24.0的文件夹，觉得文件夹名太长可以使用mv nginx-1.24.0/ nginx将nginx-1.24.0重名为nginx。 nginx 1.24.png 接着，我们需要下载nginx需要的相关依赖，不然等会make的时候会报错。以此在终端中执行以下命令即可。

yum -y install gcc-c++ //c语言环境
yum install -y pcre pcre-devel //正则
yum install -y zlib zlib-devel //lib包
yum install -y openssl openssl-devel //插件

#如果服务器中没有yum，或者运行yum的时候报错，可以使用apt-get
apt-get install build-essential zlib1g-dev libpcre3-dev libssl-dev

成功执行完上述命令后，进入nginx文件夹(cd /nginx)接着执行以下代码即可。

./configure
make
make install

执行完上述命令后，我们可以进入nginx默认安装目录(/usr/local/)来查看是否有nginx文件夹，如果有，则说明安装成功。

使用Nginx

在终端中，进入nginx的安装目录cd /usr/local/nginx，使用ls命令可以看到4个文件夹，分别是conf(nginx配置目录)，html(默认的代理目录)，logs(nginx日志目录)，sbin(二进制文件目录)。
进入sbin文件夹，执行./nginx便可启动nginx。 sbin.png 再使用ps -ef | grep nginx命令，可以查看系统中运行的所有nginx程序。 ps ef grep nginx.png 这个时候我们打开服务器的80端口，就可以看到nginx界面啦😁！如果打开还是显示无法访问此页面的话，可以检查一下服务器的防火墙，或者打开相关云服务器的网站查看80端口是否开放。

Nginx全局配置

通过上述方法安装nginx后，nginx命令只在默认安装目录里生效，所以我们还需要对nginx进行全局环境配置。在终端中执行vi /etc/profile命令，在profile中添加相关配置。 profile.png 这样，就可以全局运行nginx命令了😊。
v.png

部署前端

成功配置好nginx后，我们就可以开始部署前端啦。不过由于Nginx的默认配置文件并不适合我们的需求，所以我们还需要对其进行修改。先在/etc目录下新建nginx文件夹，再在nginx文件夹中新建conf.d文件夹用来存放我们前端项目的nginx配置文件。接着对Nginx的默认配置文件(/usr/local/nginx/conf/nginx.conf)进行修改，修改内容如下： etcnginx.png 修改完成后记得nginx -s reload重新启动一下。现在我们就可以在/etc/nginx/conf.d/中加入我们项目的nginx配置文件(文件类型必须是.conf)啦。

server{
    listen 8080 default_server; #部署端口
    listen [::]:8080 default_server;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /var/www/html/hospital; #项目打包后生成的dist文件夹所在服务器的位置
    try_files  $uri $uri/ /index.html;

    #nginx反向代理
    location /api/ { 
        proxy_pass  http://localhost; #localhost是后端所在服务器和端口
     }

}

上面是一个简单的nginx配置文件，大家可以参考一下。现在再nginx -s reload重新启动nginx配置，就可以在相应服务器端口看见我们的项目啦！ 20010.png

总结

总的来说，使用Termius在服务器上配置Nginx以及部署项目还是比较简单的，如果大家通过上述方法部署后，页面仍然显示无法访问，可以通过ps -ef | grep nginx检查相应端口，如果端口正在运行，那应该就是云服务器上的相应的端口没有打开，把打开就好了。希望对大家能有所帮助。

avatar
文章
阅读
粉丝