Xshell7 +Xftp7 将Vue项目发布上线到腾讯云服务器详解

Caramelzz7
366 阅读5分钟

使用nginx项目发布上线

什么是项目上线

vue项目上线的文件就是执行完 npm run build 后生成的dist文件下的内容 我们项目上线，不管是vue还是react，我们都会上线到Linux服务器上，我们需要再Linux上部署一个nginx静态服务器，这样我们把dist目录下的的文件，传输到linux下的nginx服务器上，才能够被外网访问到。

nginx的好处

image.png 1、可以高并发连接

官方测试Nginx能够支撑5万并发连接，实际生产环境中可以支撑2~4万并发连接数。

原因，主要是Nginx使用了最新的epoll（Linux2.6内核）和kqueue（freeBSD）网路I/O模型，而Apache使用的是传统的Select模型，其比较稳定的Prefork模式为多进程模式，需要经常派生子进程，所以消耗的CPU等服务器资源，要比Nginx高很多。

2、内存消耗少

Nginx+PHP（FastCGI）服务器，在3万并发连接下，开启10个Nginx进程消耗150MB内存，15MB10=150MB，开启的64个PHP-CGI进程消耗1280内存，20MB64=1280MB，加上系统自身消耗的内存，总共消耗不到2GB的内存。

如果服务器的内存比较小，完全可以只开启25个PHP-CGI进程，这样PHP-CGI消耗的总内存数才500MB。

3、成本低廉

购买F5BIG-IP、NetScaler等硬件负载均衡交换机，需要十多万到几十万人民币，而Nginx为开源软件，采用的是2-clause BSD-like协议，可以免费试用，并且可用于商业用途。

BSD开源协议是一个给使用者很大自由的协议，协议指出可以自由使用、修改源代码、也可以将修改后的代码作为开源或专用软件再发布。

4、配置文件非常简单

网络和程序一样通俗易懂，即使，非专用系统管理员也能看懂。

5、支持Rewrite重写

能够根据域名、URL的不同，将http请求分到不同的后端服务器群组。

6、内置的健康检查功能

如果NginxProxy后端的某台Web服务器宕机了，不会影响前端的访问。

7、节省带宽

支持GZIP压缩，可以添加浏览器本地缓存的Header头。

8、稳定性高

用于反向代理，宕机的概率微乎其微。

9、支持热部署

Nginx支持热部署，它的自动特别容易，并且，几乎可以7天*24小时不间断的运行，即使，运行数个月也不需要重新启动，还能够在不间断服务的情况下，对软件版本进行升级。

腾讯云服务器

地址：腾讯云 产业智变·云启未来 - 腾讯 (tencent.com) 因为我们要将项目上线到腾讯云的服务器所以需要购买轻量化的服务器

image.png

购买之后需要在产品控制台找到自己购买的服务器进行系统的重装（按需求进行重装）以及密码的修改

image.png

重装的系统选择（供参考，按需求来）

image.png

这里我们可以看到服务器的基本信息 image.png

之后我们就可以开始安装Xshell和Xftp

Xshell Xftp nginx 如何安装使用

1.安装Xshell Xftp （家庭/学校版本是免费的）

免费安装地址：家庭/学校免费 - NetSarang Website (xshell.com) 因为window本身的命令系统不够强大，他需要接触外力，类似Xshell这样的脚本对linux服务器进行操控

但是像mac电脑就不需要，因为mac本身是unix，他大部分的命令和linux是一样的

2.安装配置nginx

首先我们需要在登录Xshell之后，安装nginx

如何登陆 image.png 在Xshell新建一个会话插件 名称以及主机填写为腾讯云网络与域名里的IP地址

image.png 在登陆Xftp时用户名密码主机名与Xshell一致

登陆成功之后，左边窗口是你的桌面，右边做文件上传，可以把我们本地的文件传输到linux服务器上 image.png

必须掌握的linux命令

ls：展示当前文件下的所有文件

pwd：当前路径

mkdir folder 创建一个folder的文件夹

cd folder 进入到folder这个文件夹下

touch folder.txt 创建一个folder.txt的文件

vim folder.txt 进入文件后 按键盘的 i 键 然后输入你要修改的内容

按 Esc 键盘键

输入：wq 回车，修改的文件内容就保存好了

rm -rf tanwei.txt 强制删除 谨慎使用

rm -rf * 删除当前文件夹下的所有

连上nginx服务器以后我们一般再/root目录下，但我们的nginx需要发布到/usr/local文件夹下

因为/root目录和/usr是同级目录 cd ../usr/local

mkdir nginx 创建一个文件夹

cd nginx

下载tar包 ：wget nginx.org/download/ng…

tar -xvf nginx-1.13.7.tar.gz

进入nginx目录 cd /usr/local/nginx

进入目录 cd nginx-1.13.7

执行命令 考虑到后续安装ssl证书 添加两个模块 ./configure --with-http_stub_status_module --with-http_ssl_module

执行make命令 make

执行make install命令 make install

cd ../ 退到nginx目录下

cd sbin 进入sbin

./nginx

npm run build 打包我们的项目

通过xftp 把dist目录下的文件直接拖拽到 nginx 下的html文件夹下，覆盖原文件即可，刷新页面即可

最后在浏览器地址栏里输入我们在腾讯云的ip地址就可以看到我们自己编写上线的项目了

avatar
文章
阅读
粉丝