nginx 部署前端项目至腾讯云服务器(CentOS系统)

慈云数据 2023-08-10 网络资讯 736 0

nginx 部署前端项目至腾讯云服务器CentOS系统

远程部署流程

之前介绍了用nginx把项目部署在本地window服务器上的操作,现在讲解一下远程部署在服务器上的操作。

注意本次讲解是基于远程服务器为Linux系统,如果是window系统可以通过远程桌面连接可视化控制远程桌面,然后部署过程与本地部署大致一致,原理是这样的,在此不做演示。

另外:本次的部署依靠的API是别人服务器部署好的在线API接口,并非本地后台服务器运行搭建的数据库,由于本人属于新手,经过多次尝试,依旧未能将本地数据库也部署到远程服务器上,因此此种状况依旧不做讲解,后续掌握了再进行补充。此处只对使用在线API的前端项目进行远程部署,请知悉!

1、基本需求准备 (1)、服务器系统

基于已有腾讯云服务器的前提,本人服务器系统为Linux下的CentOS系统,此处只对该系统服务器介绍。

注意以腾讯云服务器为例,买了服务器之后会发送站内信告诉服务器账户为root,以及相应密码,千万注意等下xshell链接用的就是这个账户密码!!!!!千万别用自己的腾讯云登录账户密码去xshell链接!!!那样会一直失败!!!

在这里插入图片描述

(2)、需要的软件 (3)、实现原理的解释 通过xshell软件连接上我们的腾讯云服务器;通过命令符安装和启动nginx;通过WinSCP软件可视化的把打包文件复制到服务器上;通过WinSCP软件找到nginx.conf文件修改默认执行路径;nginx重新加载配置;服务器ip地址打开部署的项目; 2、部署过程 (1)、安装 xshell

下载xshell,并安装。

①安装之后打开文件>新建,按下面提示输入并确定。

在这里插入图片描述

腾讯云服务器安装教程_腾讯云服务器安装软件教程_腾讯云服务器安装方法

②点击新建ssh链接会话,在弹出框输入用户名root(可以在系统发送的站内信看,有写用户名密码,注意此处填写的用户名密码不是腾讯云网站的登录密码!切记!),点击确定。

在这里插入图片描述

③输入密码,点击确定(如果xshell没有提示成功可以多试几次)。

在这里插入图片描述

④看到如下信息表示链接成功。

在这里插入图片描述

(2)、远程服务器安装nginx

依次输入下面三条命令:

一些其他命令(等下会用到,先贴出来):

(3)、使用WinSCP

①安装过程省略,链接过程也省略,进去输入ip和密码就能连上。

连接后效果图如下,左边是本地的文件管理,右边的是我们腾讯云服务器的文件管理(注意是在root路径内)

腾讯云服务器安装软件教程_腾讯云服务器安装教程_腾讯云服务器安装方法

在这里插入图片描述

②我们从本地把打包好的dist文件夹复制到右侧服务器上。接下来就是找到nginx.conf修改默认路径,并重启nginx就可以。nginx.conf文件放在/etc/nginx/nginx.conf,打开这个文件。

在这里插入图片描述

③我们把文件的server中默认的 root /usr/share/nginx/html;前面加#注释掉,然后再下面location中配置自己得实际路径,代码如上图,具体路径根据实际需求修改。

④保存退出,注意此处还有一个地方要修改,可以暂时不改,等下来改,就是该文件顶部在我们修改完上述内容后退出重启nginx后会发现依旧连不上,此时再进来会发现顶部写着user nginx;即使用权在nginx,我们需要改成user root;使用权改为用户本身。此步骤可以先忽略等下来改。

在这里插入图片描述

⑤接下来重启nginx,先用ps -ef | grep nginx查找到nginx目录,然后输入cd进该目录中,并输入nginx -s reload 重启nginx。

在这里插入图片描述

⑥按理说我们修改完配置,也重新加载了nginx,我们通过ip地址在浏览器便可以打开我们的项目,但是我们实际打开浏览器会发现,页面提示404错误!这是因为我们没有使用权限,因此就需去执行步骤④的内容,然后重新执行步骤⑤重新加载nginx,就可以了。

⑦现在我们打开浏览器,输入服务器地址(注意本文操作未对ip地址进行https安全协议加密)

在这里插入图片描述

以上便是前端项目部署在远程服务器上的操作过程!

本文如有解释不当之处,望不吝告知,谢谢!!!

微信扫一扫加客服

微信扫一扫加客服

点击启动AI问答
Draggable Icon