云服务器 + 宝塔实现前端项目部署上线

1.购买服务器

目前本人用已有的Linx服务做为展示，要记住该公共ip地址，可全网进行访问

2.Xshell的安装与使用

下载安装Xshell，选择家庭教育版下载后，一直next就可以了

XSHELL - NetSarang Website

2.1使用Xshell 

新建会话

填写完后选择连接

连接后需要重新填写一下密码弹窗，填写完后确定即可

连接成功后会有绿色提示标志

3.服务器安装宝塔服务

打开宝塔官网进行下载宝塔面板，目前是安装Linx系统的所以使用，根据自已服务器来选择安装

宝塔面板下载，免费全能的服务器运维软件

复制命令到Xshenll右键选择粘贴，并回车

剩下填写 y   和 yes，然后等待完成

成功后会生成宝塔面板的服务器登录地址

如果后续忘记了网站与密码，同样链接服务器使用 bt 14  或者 sudo  bt 14  可输出面板信息

3.1 去服务器上去防火墙菜单来配置上述图片中的端口号，不然会打不开服务器的宝塔面板

开始是没有任何的信息，新建添加一个模板选择要放行的端口，然后再进行设置实例

打开Xshenll输出的服务器面板地址，输入 输出的账号与密码

登录成功之后需要绑定自已的宝塔账号，这个自行注册就可以，然后在下面登录就可

登录成功后 默认选择推荐安装配置的信息，特殊情况自已选择其他，然后点击一键安装

后等待安装完成，这个过程可能会有点久

在这个过程中我们可以去打包一下前端的文件包

使用 npm run build   就可以了

准备域名和域名解析

以腾讯云的注册域名为例，查询并购买域名，自行选择下载就可

创建好域名后进行解析域名

添加解析的域名，并确定保存，一般正常是十分钟左右会生效

4.宝塔面板部署项目

在网站的 菜单进行新建站点

将原本的文件全部进行删除，在进行前端文件上传过来就可以了

上传好后，返回网站菜单，启动Nginx 

启动后再点击网站名进入

点击后就可进入网站并预览成功

至此网站就部署完成，首次部署是有点麻烦，后续就简单了