详解如何部署前端代码到云服务器上
一.购买云服务器
腾讯云、阿里云、华为云等网站上都可以购买云服务器，根据个人需求对比下价格酌情购买。购买完成后即可查看云服务器IP地址和密码
二.下载Xshell和Xftp
NetSarang官方网站下载免费版即可，下载完成后下一步安装
三.使用Xshell远程连接云服务器
三.搭建Nginx服务器
我们购买的云服务器一般是有安装linux系统的
以centos 8为例 使用Xshell远程连接云服务器后，使用命令安装nginx
$ sudo yum install epel-release && yum install nginx [On CentOS/RHEL]
$ sudo dnf install nginx [On Debian/Ubuntu]
$ sudo apt install nginx [On Fedora]
nginx 命令 安装完 nginx 服务器的软件包后，我们就可以使用 nginx 的一些命令来进行相关的控制操作了。这里我就直接把所有 nginx 命令给出：
这些命令中，我们用的比较多的应该是信号控制命令以及 nginx -t 了。
启动 nginx 服务 在我们实际的工作中很少直接用信号控制命令来控制 nginx 服务器的启动与重启等操作。通常我们都是通过将 nginx 作为系统服务，使用 CentOS 系统的 service命令来控制 nginx 服务的启动与重启等操作。命令如下：
#设置为系统服务
sudo systemctl enable nginx
#启动nginx服务使用start，此外还有stop、restart、reload、命令
sudo service nginx start
启动 nginx 服务后，我们可以用以下命令查看 nginx 服务的运行状态：
#验证查看nginx服务状态
sudo service nginx status
nginx 关键文件 除了上面介绍的 nginx 常用命令，使用 nignx 另外一个需要了解的基础知识就是 nginx 服务的一些关键文件的路径和作用（PS：以下这些 nginx 关键文件的路径，都是指使用 yum 直接安装 nginx 的默认路径。）
- /etc/nginx：nginx 配置文件的根目录，nginx 的所有配置文件都在这个目录下面；
- /etc/nginx/nginx.conf：nginx 主配置文件，所有 nginx 的基础和全局配置都应该在这个文件中配置；
- /etc/nginx/conf.d：nginx 默认站点配置文件所在目录；
- /var/log/nginx：nginx 日志文件目录，访问日志 access.log 和 错误日志 error.log 都在这个目录中；
防火墙配置 到目前为止，我们已经启动了 nginx 服务了，不过如果想要外网能够访问我们在 nginx 服务器中配置的 Web 站点，我们还需要做一些额外的操作————那就是做防火墙配置，让 CentOS 系统对外网公开 80 端口和允许外部访问 http 服务。命令如下：
#开启80端口
sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
sudo firewall-cmd --zone=public --add-service=http --permanent
#重新加载防火墙配置
sudo firewall-cmd --reload
如果你的 Web 站点启用 HTTPS 协议，那么你还需要让防火强对外公开 443 端口和 https 服务。
#开启443端口
sudo firewall-cmd --zone=public --add-port=443/tcp --permanent
sudo firewall-cmd --zone=public --add-service=https --permanent
#重新加载防火墙配置
sudo firewall-cmd --reload
现在，如果你在你的 DNS 服务器上做域名解析，将域名解析到目前 CentOS 服务器的 IP 地址，其他用户就可以通过域名访问你的 Web 站点了。
selinux 配置 通常，我们都会用 nginx 服务器做反响代理设置，配置 Web 站点集群，实现站点的高可用。那么这个时候我们还需要配置 selinux 配置，允许 http 服务间的通信。
#允许http服务间的通信
sudo setsebool -P httpd_can_network_connect 1
到此为止，我们就完成了在 CentOS 安装和配置 nginx 服务全部基础操作了。
四.打包部署
执行前端项目打包命令生成dist文件夹，打开Xftp工具，输入服务器ip和密码进行连接
连接后把本地dist文件夹里的所有文件传输到nginx的html目录下就大功告成了
浏览器输入IP地址即可访问页面了，如果网页无响应，检查下云服务器的安全组规则，一键放通就OK了。当然了有兴趣的朋友也可以仔细研究这块的配置。
