Vue 项目nginx部署流程
2020-08-10 本文已影响0人
弱冠而不立
写在开头,单纯的做个记录,如有错误劳烦指正,谢谢。
前期准备工作:
云服务器,开启需要访问的端口号
1.先登录阿里云,找到云服务器ECS → 网络与安全 → 安全组

-
点击安全组列表页面的配置规则进入安全组规则配置页面
安全组规则配置页面
3.配置安全组规则(设置服务器开放的端口号)
配置好之后可以在Windows下cmd中 使用telnet命令测试端口号是否开启成功
端口未开启
image.png
安装Xshell 和 Xftp
也可选择不下载,直接在阿里云ECS实例控制台远程登陆

Xshell 和 Xftp家庭/学校免费版本下载地址
下载安装好之后打开Xshell,新建会话


点击连接后输入登录的账号(没额外创建就是用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



将打包好的文件传输到服务器上去并配置好nginx即可访问
-
使用Xshell 和 Xftp 工具传输打包好的文件
先使用Xshell连接远程服务器
使用Xftp即可便捷地使用图形化的操作方式将本地文件上传到远程服务器
在远程服务器的窗口上进行操作,即可对远程服务器上的文件进行更改
从本地服务器复制打包好的文件到远程服务器上
这样就将打包好的项目放在服务器上了,最后写好nginx配置文件即可访问到dist下的index.html
Nginx 配置文件编辑
使用Xftp,可以很方便地直接用记事本编辑远程服务器上的配置文件,可以无需用linux的vim命令编辑。

右键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项目的打包也变得很简单,打包好即可直接上传使用。但是本文章只是介绍一个大概流程,配置文件的编写可以参考其他更详细的教程,我仅给出了一个最简单的样例。