位置: IT常识 - 正文

前端项目部署,阿里云服务器部署前端项目,超详细(前端项目部署到nginx)

编辑:rootadmin
前端项目部署,阿里云服务器部署前端项目,超详细

推荐整理分享前端项目部署,阿里云服务器部署前端项目,超详细(前端项目部署到nginx),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端项目部署到docker,前端项目部署上线流程,前端项目部署上线,前端项目部署上线,前端项目部署上线,前端项目部署到服务器的几种方式,前端项目部署到服务器的几种方式,前端项目部署到服务器,内容如对您有帮助,希望把文章链接给更多的朋友!

需求背景:作为一个前端,特别身处于中小公司时,对于部署也需要有所了解。本次就介绍前端基础的项目部署。本次使用的是阿里云服务器进行的部署

部署核心步骤

1.准备打包好的前端代码(dist包)或者是一个html文件 2.购买阿里云服务器,并且连接 3.为阿里云服务器安装ngnix开启web服务 4.使用xshell和sftp将自己的前端代码放到服务器上

1.准备前端代码

这部分很简单,可以随意准备。我这边就随便起了个vue脚手架,然后打了个dist包。

大家嫌麻烦那么就直接使用一个html文件也可以,里面随意写点内容就行

2.购买阿里云服务器

如果是作为练习的话,买最便宜的就OK了。其实没什么,地域选择国内,然后配置选最低的就行了,便宜。操作系统一般都是选centOS64 ,把免费分配公网ip勾上就行

购买完成后,你可能不知道在哪里,你需要点控制台,然后找到云服务器ECS

然后你就能找到你的服务器了,其中最重要的就是实例(管理你的服务器状态)和安全组(控制可访问该服务器的端口号)

点击实例中的远程连接,看是否能正常连接。 这里的ip地址(公)就是待会你要连接的服务器的ip地址,也是别人访问你网站的地址,可以注意一下。

如果你的页面显示这个,说明你与远程连接已经成功了

3.为阿里云服务器安装ngnix开启web服务

a.准备工作:安装xshell(用来连接服务器)和xftp(用来上传你的文件)。 如何安装这两个软件:直接从360安全卫士安装吧,迅速还无毒

b.打开xshell,然后连接你的远程服务器

之后会弹出让你输用户名(一般是root)和密码。最后就是连接成功了

前端项目部署,阿里云服务器部署前端项目,超详细(前端项目部署到nginx)

恭喜你,此刻已经可以和服务器通信了。虽然刚才在云服务器上也可以远程连接,但是使用xshell一般比较方便

注意点,如果你这里如果连接不上。那么你一定需要看我这一步!!!!很重要!!!去云服务器页面设置安全组,建议大家都去做这一步!!!!

添加一个22的入口(这个和xshell连接的端口号需要是一致的,xshell默认是22),其他选择如图

再添加一个80的入口,用于nginx的,跟上面的一样的步骤

c.安装反向代理nginx 命令:yum install nginx

然后中途会停一下让你选择,输入y再按回车就行了。最后就是安装成功。

有这个complete就说明成功了 但是此时你只是在服务器安装了nginx,并没有在远程服务器启动这个nginx的服务。这里就要用到几个命令了。我先全部放出来,后面会用到部分。 (注意千万不要把nginx打成了ngnix!!!!!!!!!!我老是打错) 安装nginx:yum install nginx 看是否有ngnix进程:netstat -anput | grep nginx 查看服务器端口占用情况:netstat -ntlp nginx启动:nginx nginx重启:nginx -s reload 关闭nginx: nginx -s stop : 快速停止nginx nginx -s quit :完整有序的停止nginx 查看默认的nginx配置文件路径: nginx -t

d.启动nginx 命令:nginx,一般输完没有任何的反馈,如果你不确定有没有启动nginx,那么你可以使用netstat -anput | grep nginx这个命令看看有没有nginx的端口占用 上面这个图看不出来,可以输这个命令netstat -anput | grep nginx看看有没有端口占用

很明显我这里有nginx占用的80端口 然后在浏览器输入你对外的ip地址。如果页面出现了内容(一般是centos或者nginx页面)就说明你的nginx启动成功了,我这里是因为放了页面,所以有页面了,你们的应该不是这个页面,但是只要出现了有文字,就说明步骤是正确的

e.将你的文件放置到服务器上 点击你的xshell传输新建文件,会把刚才下载的xftp打开

此时右边就是你的云服务器的桌面了,右键新建一个web文件夹,再在里面新建一个html1文件夹,把你的dist文件传输上去

怎么把本地的放上去?直接拖拽到文件夹的空白区域就行

f.修改nginx文件,让我们的nginx服务代理我们自己的html文件 先找到默认的nginx配置文件路径: nginx -t

在xftp上找到该文件传输到自己的电脑上(默认是传输到桌面上的)

使用vscode(没有vscode,用webstorm和记事本也可以)编辑该文件,主要是改这里的路径改成我们刚才上传的路径

然后把该nginx.conf覆盖服务器上(就是上传到服务器,拖进去)的这个文件

g.重启nginx(nginx要求修改了nginx.conf配置之后必须重启后才生效) 打开xshell:输入nginx -s reload,重启,重启之后没有任何反应,这是正常的不要慌

此时用浏览器,打开你的ip地址。如果显示出来了你自己的网页,那就要说明你的网页已经上线成功了,你可以把你的ip发给任意一个人,他们都能访问你的网站了

本文链接地址:https://www.jiuchutong.com/zhishi/290841.html 转载请保留说明!

上一篇:Chrome谷歌浏览器安装与配置教程(Chrome谷歌浏览器网页)

下一篇:四川成都熊猫基地的小熊猫 (© Biosphoto/Alamy)(四川成都熊猫基地介绍)

  • 微信健康码行程码图片二合一怎么弄(微信健康码行程码二合一)

    微信健康码行程码图片二合一怎么弄(微信健康码行程码二合一)

  • qq如何切换青少年模式(怎么更改qq青少年模式密码)

    qq如何切换青少年模式(怎么更改qq青少年模式密码)

  • 苹果猪头特效在哪(苹果猪头特效怎么变声)

    苹果猪头特效在哪(苹果猪头特效怎么变声)

  • 苹果手机提示音怎么改(苹果手机提示音没有了怎么回事)

    苹果手机提示音怎么改(苹果手机提示音没有了怎么回事)

  • 微信朋友圈设置一年可见(微信朋友圈设置位置)

    微信朋友圈设置一年可见(微信朋友圈设置位置)

  • 华为手机怎样找回删除的照片(华为手机怎样找回删除的短信)

    华为手机怎样找回删除的照片(华为手机怎样找回删除的短信)

  • 苹果手机右上角发烫是怎么回事呀(苹果手机右上角有个麦克风怎么关闭)

    苹果手机右上角发烫是怎么回事呀(苹果手机右上角有个麦克风怎么关闭)

  • gpon的组网模式是什么(gpon的组网模式是基于以下哪种网络模型)

    gpon的组网模式是什么(gpon的组网模式是基于以下哪种网络模型)

  • qq空间头像怎么换不了(qq空间头像怎么看)

    qq空间头像怎么换不了(qq空间头像怎么看)

  • 为什么打别人电话总是在通话中(为什么打别人电话是空号)

    为什么打别人电话总是在通话中(为什么打别人电话是空号)

  • 闲鱼注销了淘宝还在吗(闲鱼账号)

    闲鱼注销了淘宝还在吗(闲鱼账号)

  • 华为的圆圈怎么开(华为那个圆圈圈怎么弄)

    华为的圆圈怎么开(华为那个圆圈圈怎么弄)

  • 微信显示1条信息但不知道在哪(微信显示有1条信息却看不到)

    微信显示1条信息但不知道在哪(微信显示有1条信息却看不到)

  • 华为笔记本电脑充电常识(华为笔记本电脑哪个系列最好)

    华为笔记本电脑充电常识(华为笔记本电脑哪个系列最好)

  • 电脑聊天记录怎么导入手机(电脑聊天记录怎么同步到手机)

    电脑聊天记录怎么导入手机(电脑聊天记录怎么同步到手机)

  • e1230v2最高配什么显卡(e1230v2配什么主板稳)

    e1230v2最高配什么显卡(e1230v2配什么主板稳)

  • ipad可以画cad图吗(ipad可以画cad好用吗)

    ipad可以画cad图吗(ipad可以画cad好用吗)

  • 抖音直播音浪是什么意思(抖音直播音浪是点赞吗)

    抖音直播音浪是什么意思(抖音直播音浪是点赞吗)

  • 抖音可以同时在线吗

    抖音可以同时在线吗

  • 戴尔电脑做系统按f几(戴尔电脑做系统找不到硬盘)

    戴尔电脑做系统按f几(戴尔电脑做系统找不到硬盘)

  • 小米平板4上市时间(小米平板4上市时间及价格)

    小米平板4上市时间(小米平板4上市时间及价格)

  • 怎样通过手机知道对方的位置(怎样通过手机知道自己的车在哪里)

    怎样通过手机知道对方的位置(怎样通过手机知道自己的车在哪里)

  • 怎样去除快捷方式小箭头?(怎样去除快捷方式小箭头win10)

    怎样去除快捷方式小箭头?(怎样去除快捷方式小箭头win10)

  • 终于体验了一下ChatGPT(体验了一回)

    终于体验了一下ChatGPT(体验了一回)

  • 税务迁移麻烦吗
  • 劳务报酬个人所得税税率表
  • 计入资本公积的固定资产报废
  • 为员工集中购买医疗保险
  • 购买基金会计分录怎么填
  • 监理费可以由施工方出吗
  • 会计凭证的保管期限为多少
  • 三栏式和多栏式的账目有哪些
  • 债权投资损失准备
  • 停产期间产生的费用怎么处理?
  • 银行卡收单机构外包业务管理指引
  • 出口退税进项抵扣了不退税可以吗
  • 房地产企业预收账款
  • 单位参加城镇职工基本养老保险基数怎么填
  • 关联交易类型有哪些
  • 个税申报错误怎么更改
  • 法人垫付现金的原始凭证
  • 如何安装os x
  • 无形资产原值增加,净值减少的原因
  • 消耗性生物资产如何结转成本
  • 如何计算劳务费个人所得税
  • php数组清空
  • 赡养人 被赡养人
  • 建筑工程增值税税率是多少
  • 投资企业流程
  • 商会收到的会费要交企业所得税
  • 产品外包装的作用
  • 绿萝怎么样养
  • 下载文件是php
  • 存货怎么预估
  • 贴现会不会损害所有者权益
  • react connect用法
  • web服务器的搭建与应用
  • php索引类型
  • 分包缴纳的个税怎么算
  • 圣米歇尔山法语介
  • static php作用
  • 深究Python中的asyncio库-线程同步
  • 会计月末账务处理程序
  • 技术咨询费属于
  • 工程代建的性质
  • python中map和filter有啥区别
  • 生产车间领用材料的会计分录
  • 涉税金额是指金额还是税额
  • 工商企业年报网上申报流程
  • 事业单位结余分配的去向有
  • 出现什么情况企业不能持续经营
  • 结转生产成本是不是成品入库
  • 企业所得税法允许按规定的比例在税前扣除的准备金
  • 应交增值税结转账务处理
  • 2021年购买土地需要缴纳什么税
  • 研发项目会计分录
  • 坏账准备的会计处理方法
  • 预计负债是暂时性差异还是永久性差异
  • 退回的保证金多了一点怎么做分录
  • 养老保险 退钱
  • 中药饮片盘点损耗率 法律
  • 装修待摊费用当月摊销吗
  • 跨境汇款汇错
  • 公用事业费属于什么会计科目
  • 企业清算主要清算哪些项目?
  • sql作业怎么执行
  • 怎样设置禁
  • xp系统鼠标右键无法弹出菜单
  • centos6.5dns配置
  • windows保护电脑
  • linux下4种kill某个用户所有进程的方法
  • win7系统桌面右键没有个性化
  • mfc界面布局
  • 谈一谈js中的执行者是谁
  • 怎么看判断
  • macos moja
  • js 单击弹出对话框
  • js的span标签
  • 浙江网上税务局登录官网
  • 江苏国税电子税务局网登录
  • 税务u盘是干嘛的
  • 怎么查询小米手机位置
  • 新车交购置税的流程图
  • 省银保监局长是什么级别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设