写在开头，单纯的做个记录，如有错误劳烦指正，谢谢。
前期准备工作：
云服务器，开启需要访问的端口号
1.先登录阿里云，找到云服务器ECS → 网络与安全 → 安全组
-
点击安全组列表页面的配置规则进入安全组规则配置页面
安全组规则配置页面
3.配置安全组规则（设置服务器开放的端口号）
配置好之后可以在Windows下cmd中 使用telnet命令测试端口号是否开启成功
端口未开启
image.png
安装Xshell 和 Xftp
也可选择不下载，直接在阿里云ECS实例控制台远程登陆
Xshell 和 Xftp家庭/学校免费版本下载地址
下载安装好之后打开Xshell，新建会话
打开Xshell
创建会话
点击连接后输入登录的账号（没额外创建就是用root账号）
输入默认的root账号
输入实例密码
如果忘记实例密码，在ECS实例控制面板重置密码
重置密码
连接成功
云服务器安装Nginx
-
首先了解自己的云服务器是什么操作系统，大部分都是linux，然后了解属于哪个发行版。
查看服务器的操作系统
- 安装nginx（以CentOS 7为例），
sudo yum -y install nginx # 命令行输入即可安装 nginx
systemctl start nginx #启动 Nginx
systemctl enable nginx #开机启动nginx
sudo yum remove nginx # 卸载 nginx
systemctl stop nginx #停止 Nginx
systemctl disable nginx #禁用开机启动 nginx
有可能还要配置yum源，这里我也不是很了解，如果不能连接到nginx，原因很多，但是可以先检查 1,nginx服务是否真的起来了；2,linux服务器防火墙是否打开，建议直接百度一下云服务器安装nginx，都有很多很好的教程。
打包Vue项目
用脚手架构建的Vue项目打包只需要一行命令即可打包
npm run build
package.json 文件下可以看见其对应的是vue-cli-service build命令
打包编译成功
打包成功的文件
将打包好的文件传输到服务器上去并配置好nginx即可访问
-
使用Xshell 和 Xftp 工具传输打包好的文件
先使用Xshell连接远程服务器
使用Xftp即可便捷地使用图形化的操作方式将本地文件上传到远程服务器
在远程服务器的窗口上进行操作，即可对远程服务器上的文件进行更改
从本地服务器复制打包好的文件到远程服务器上
这样就将打包好的项目放在服务器上了，最后写好nginx配置文件即可访问到dist下的index.html
Nginx 配置文件编辑
使用Xftp，可以很方便地直接用记事本编辑远程服务器上的配置文件，可以无需用linux的vim命令编辑。
先找到nginx配置文件
右键nginx.conf配置文件选择用记事本编辑
大体结构是这样的：
xxxxxxxxxxxxxxxxxx #一些配置代码
http {
xxxxxxxxxxxxx #一些配置代码
server {
#这里就是我们进行配置文件编辑的地方
}
}
给个简单的样例
server {
listen 8083; #监听的端口号为 8083
server_name ; #设置主机域名，最好别和其他server_name重复
root /home/test/dist; #访问的根目录
index index.html #访问8083端口时默认的主页
}
在Xshell中重启一下nginx 以便更新配置文件
nginx -s reload
没报错就是配置文件生效了
最后在浏览器输入远程服务器Ip地址/域名+指定的端口号即可访问自己的项目了
部署成功
总结
部署项目到远程服务器主要就是要配置好nginx文件，让nginx监听的端口对应上项目的入口index.html，因为有脚手架所以vue项目的打包也变得很简单，打包好即可直接上传使用。但是本文章只是介绍一个大概流程，配置文件的编写可以参考其他更详细的教程，我仅给出了一个最简单的样例。
网友评论