欢迎光临
我们一直在努力

前端项目部署到服务器

1.准备工具

服务器:阿里云 腾讯云 华为云都可以 我这里使用的是阿里云ECS共享型(推荐)

xshell:用于远程连接服务器,修改配置文件

xftp:用于连接远程服务器,将本地资源上传到远程服务器

2.服务器设置

1.第一次需重置实例密码

前端项目部署到服务器

2.配置安全组规则

开启常用的端口

22必须要开 80是默认访问端口也打开

前端项目部署到服务器

3.使用Xshell连接服务器

打开Xshell新建连接,名称自己起一个,主机写自己服务器的公网地址,协议不需要更改。端口选择22(默认的,所以刚刚需要开启22端口)

前端项目部署到服务器

点击连接

输入用户名root 密码是自己设置的密码

前端项目部署到服务器

4.使用xftp将dist文件上传到服务器

一样 新建会话 输入账号密码连接服务器

前端项目部署到服务器

进入下面的画面,左侧是本地的,右侧就是服务器的空间,可以在服务器的root文件夹下新建文件,将dist文件拷贝过去。拷贝完成之后就可以退出xftp了前端项目部署到服务器

4.这个时候访问主机会提示网络错误,因为此时我们的主机相当于还只是一个电脑,需要安装nginx代理服务器

回到xshell面板 输入 yum install nginx 安装nginx服务器

linux常用指令:cd进入文件夹 /表示根目录 ls显示当前目录下所有文件 cd ../退回上一层目录

linux中 蓝色的表示文件夹 白色的表示文件 vim xxx可以进入编辑文件

安装完成后 输入cd /进入根目录,nginx默认被安装到了根目录的etc文件下

前端项目部署到服务器

cd etc 里面有nginx文件夹

前端项目部署到服务器

cd nginx进入nginx文件夹

找到nginx.conf 是nginx的配置文件

前端项目部署到服务器

vim nginx.conf编辑nginx的配置文件

修改user为root

前端项目部署到服务器

在server中可以指定端口号文件路径,listen表示监听的端口号,默认是80 我们可以自己修改

root是访问改主机的这个端口的时候,会到哪个根目录下去找资源,这里就是将我们的dis文件的目录放进来就可以了。

index是在root指定的目录下去找哪个文件

前端项目部署到服务器

修改完成之后保存退出 重启一下nginx服务器即可

nginx启动命令:nginx

nginx停止命令:nginx -s stop

vim用到的命令:q!不修改退出 wq保存退出

如果用到了代理已经history模式的话 还需要再location中去配置,这里暂时没有用到 后面会补充

  • 海报
海报图正在生成中...
赞(0) 打赏
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。
2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。
3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。
4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
文章名称:《前端项目部署到服务器》
文章链接:https://www.456zj.com/33184.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址