位置: IT常识 - 正文

前端如何将静态页面部署到服务器,并可以通过公网ip访问。(前端静态页面)

编辑:rootadmin
前端如何将静态页面部署到服务器,并可以通过公网ip访问。 问题描述

推荐整理分享前端如何将静态页面部署到服务器,并可以通过公网ip访问。(前端静态页面),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端如何将静态资源存放在项目中并可以导出,前端如何将静态路由设置,前端如何将静态变成动态,前端如何将静态路由设置,前端如何将静态路由设置,前端如何将静态变成动态,前端如何将静态资源存放在项目中并可以导出,前端如何将静态变为动态,内容如对您有帮助,希望把文章链接给更多的朋友!

作为卑微的前端页面仔。在我们公司项目上线的时候,一般都是我们前端 npm run build,然后直接把打出来的dist包丢给后端,后端上传到服务器完成前端的部署。这个时候我就很好奇,页面是怎么上传到服务器的呢?上传到服务器后是怎么可以访问的呢?怎么通过域名来访问呢?今天必须把它学会。

准备工作

首先要准备一台服务器,我这里选择的阿里云的服务器,因为是练手用,所以买的是最便宜的1块钱30天(因为我是新用户)的(放一个静态页面绰绰有余了)。 https://www.aliyun.com/daily-act/ecs/activity_selection?utm_content=se_1011961458

其次是上传静态文件到服务器的ftp工具,我选择的是filezilla客户端,下载地址是 https://filezilla-project.org/

服务器的购买以及相关配置

现在让我们回到第一步,去买服务器,(练手用的话直接买一个最便宜的好了)

配置就直接用他给的配置就好了,操作系统的话选择linux操作系统

服务器买好后,我们可以直接打开阿里云的控制台,来管理我们的服务器。https://ecs.console.aliyun.com/#/home

点击实例,就可以查看我们的服务器

然后我们点击实例名称进入到服务器的详情里面,第一步就是去配置我们的安全组规则(开放对应的端口)

点击配置规则

选择快速添加,直接像我选择的这样选就好了,开放22端口是为了ftp工具连接服务器时和服务器建立连接。

FTP工具配置以及链接到云服务器

打开filezilla,点击这个地方配置站点

协议选择SFTP-SSH协议,主机一项填写的是服务器的公网的IP,在阿里云的控制台可以查看到服务器的公网IP,端口写服务器安全组规则开放的22端口,也可以不填默认就是22端口,用户名如果买服务器后没有改动的话一般是root,密码就是服务器的密码(购买服务器的时候会填写)。

然后点击连接,就会看到下面的效果,到这一步的时候,我们就已经连接到了自己的远端的云服务器。

然后我们在FTP工具里面,在和root同级的目录创建一个文件夹,用来放我们自己的资源,这里我们就创建一个名字叫做 website 的文件夹。

然后我现在去自己的vue项目里面打一个包,把打包后的 dist 文件里面的静态资源,用鼠标直接拖到可视化工具我们刚刚创建的website文件夹里面。这里可以看到我已经上传到服务器上去了。

到这一步的时候,是不是我们就可以用公网的ip访问服务器上的静态文件了呢?答案当然是 NO~~ (颤抖音)。为什么呢?先说答案,因为没有配置nginx,不配置nginx是不能访问服务器的,那么为什么不配置nginx不能访问服务器呢?首先要解答这个问题先看一下nigix的作用:

云服务器本质上就是一台电脑,给你电脑的ip地址就可以访问到电脑上的静态资源了吗,显然是不可以的。那么nginx可以作为web服务器,请求发送到服务器,nginx去查找本地静态资源,nginx就做了一个中间人的角色。如果不启动nginx,是访问不到静态资源的,nginx用于http服务,如果没有安装则无法访问自己的网页。

云服务器配置nginx并启动

来到阿里云服务器控制台,点击远程连接(远程连接可以连接到服务器,模拟打开服务器的控制台,通过控制台对服务器进行操作)

前端如何将静态页面部署到服务器,并可以通过公网ip访问。(前端静态页面)

在弹出的选项中选择第一项登录

填写服务器用户名密码登录

接下来是就是环境配置,以及nginx下载以及启动,按照步骤一步一步来就好了,首先是环境配置

1、环境配置

//安装gccyum install gcc-c++//安装PCRE pcre-develyum install -y pcre pcre-devel//安装zlibyum install -y zlib zlib-devel//安装Open SSLyum install -y openssl openssl-devel

2、创建nginx目录并下载安装包

//进入usr/local目录cd /usr/local//创建nginx目录mkdir nginx//进入nginx目录cd nginx

//下载tar包(我下载的是1.22.0版本)

wget http://nginx.org/download/nginx-1.22.0.tar.gz

//解压tar

tar -xvf nginx-1.22.0.tar.gz

3、安装nginx

//进入nginx目录cd /usr/local/nginx/nginx-1.22.0//执行命令./configure//执行make命令(要是执行不成功请检查最开始安装的四个有没有安装成功)make//执行make install命令make install

4、启动nginx

//进入/usr/local/nginx/sbin目录,输入./nginx即可启动nginx./nginx//关闭nginx./nginx -s quit 或者 ./nginx -s stop//重启nginx./nginx -s reload//查看nginx进程ps -ef|grep nginx

如何查看nginx是否成功启动? 输入 ps -ef|grep nginx 显示下面👇🏻这样的时候代表nginx启动成功了

nginx启动成功后,接下来就是配置Nginx访问路径,回到跟目录下,复制静态资源的地址,这里我的静态资源的地址是 "/website " 。

1、进入nginx下

cd /usr/local/nginx

2、进入nginx的配置文件目录

cd conf

3、进入conf下的nginx.conf配置文件

vim nginx.conf

4、按下 键盘i 进行编辑文件进入nginx配置界面,将这个位置的路径,改为我们静态资源的路径👇🏻👇,端口改为80端口,改完后按下Esc退出编辑,然后输入 “:wq” ,回车,退出这个界面

5、然后重新回到nginx文件夹下面的/sbin目录下面,重新启动一下nginx

//关闭nginx

./nginx -s quit

//启动nginx

./nginx

这个时候我们再通过服务器的公网ip,去浏览器上访问一下,可以发现,我们的项目已经部署到了服务器上面。

如何在一台服务器上根据端口的不同访问不同的静态资源

1、进入nginx下

cd /usr/local/nginx

2、进入nginx的配置文件目录

cd conf

3、进入conf下的nginx.conf配置文件

vim nginx.conf

4、将server复制一份出来,然后修改端口号和root,分别监听不同的端口指向不同的静态文件即可

如果后续想用域名访问服务器的话,需要买一个域名,让服务器绑定域名等操作,后续可以研究一下。

end…

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

上一篇:JS正则 身份证号脱敏(js身份证正则验证)

下一篇:vue项目引入百度地图BMapGL和BMap实例,以及辅助工具BMapGLLib 的引入,BMapGL鼠标绘制功能(vue引入mui)

  • 支付宝开学大礼包如何领取(支付宝大学生活动 几天领一次)

    支付宝开学大礼包如何领取(支付宝大学生活动 几天领一次)

  • 微信怎么实名制(企业微信怎么实名制)

    微信怎么实名制(企业微信怎么实名制)

  • qq群太阳花怎么设置(qq群里的太阳花标识怎么获得)

    qq群太阳花怎么设置(qq群里的太阳花标识怎么获得)

  • 手机拍led会闪怎么解决(手机拍led闪烁)

    手机拍led会闪怎么解决(手机拍led闪烁)

  • 华为7和7se的区别(华为七和华为7 se有什么区别)

    华为7和7se的区别(华为七和华为7 se有什么区别)

  • miui11比miui10省电吗(小米10miui11最省电版本)

    miui11比miui10省电吗(小米10miui11最省电版本)

  • 搜狗输入法怎么开启暗黑模式(搜狗输入法怎么删除记忆词汇)

    搜狗输入法怎么开启暗黑模式(搜狗输入法怎么删除记忆词汇)

  • 手机qq打字看不到输入框(手机qq打字不见打字栏)

    手机qq打字看不到输入框(手机qq打字不见打字栏)

  • 苹果电量只能充到80(苹果电量只能充到81怎么回事)

    苹果电量只能充到80(苹果电量只能充到81怎么回事)

  • 页面加载超时什么意思(页面加载超过()秒,57%的用户会放弃当前浏览)

    页面加载超时什么意思(页面加载超过()秒,57%的用户会放弃当前浏览)

  • 锐龙53500u什么水平(锐龙ryzen53500u怎么样)

    锐龙53500u什么水平(锐龙ryzen53500u怎么样)

  • 99新手机是翻新机吗(99新和翻新机有什么不同)

    99新手机是翻新机吗(99新和翻新机有什么不同)

  • 微信朋友圈怎么跳到顶部(微信朋友圈怎么批量删除)

    微信朋友圈怎么跳到顶部(微信朋友圈怎么批量删除)

  • dc5v能用手机充电器吗(dc5v接口可以充手机吗)

    dc5v能用手机充电器吗(dc5v接口可以充手机吗)

  • 为什么打电话显示无法访问移动网络(为什么打电话显示无法连接到服务器)

    为什么打电话显示无法访问移动网络(为什么打电话显示无法连接到服务器)

  • word怎么取消兼容模式(word2003怎么取消兼容模式)

    word怎么取消兼容模式(word2003怎么取消兼容模式)

  • 苹果7重启电量就变1(苹果重启电量更准确吗)

    苹果7重启电量就变1(苹果重启电量更准确吗)

  • 苹果a1660是什么意思(苹果a1660是苹果几)

    苹果a1660是什么意思(苹果a1660是苹果几)

  • iphone8怎么拍夜景(iphone8如何拍夜景)

    iphone8怎么拍夜景(iphone8如何拍夜景)

  • 快手视频怎么加边框(快手视频怎么加速)

    快手视频怎么加边框(快手视频怎么加速)

  • 华为p30应用建议怎么关闭(华为p30应用建议怎么删除)

    华为p30应用建议怎么关闭(华为p30应用建议怎么删除)

  • 小米mix2怎么打开otg(小米mix2怎么打开开发者模式)

    小米mix2怎么打开otg(小米mix2怎么打开开发者模式)

  • ipad已停用连接itunes如何解决(ipad已停用连接itunes什么原因)

    ipad已停用连接itunes如何解决(ipad已停用连接itunes什么原因)

  • vue3中使用echart的两种引入方式,以及需要注意的事项。(vue+echarts)

    vue3中使用echart的两种引入方式,以及需要注意的事项。(vue+echarts)

  • OpenAI是什么?和疯狂ChatGPT什么关系?(open是什么含义)

    OpenAI是什么?和疯狂ChatGPT什么关系?(open是什么含义)

  • 共享税种
  • 等线补交以前年度附加税会计分录是?
  • 什么是国税发票号码
  • 摊余成本的构成内容
  • 其他应收款和其他应付款可以通用吗
  • 企业申报表有异常期间可以更换财务负责人吗
  • 电子税务局怎么登录
  • 银行理财产品的特点
  • 科目余额表一定要编吗
  • 个人股东之间股权转让的溢价账务处理
  • 销售承兑现金会退回来吗
  • 原材料加工成品怎么做账
  • 股权收购的好处
  • 支出没有发票怎么做账
  • 车船税法律制度的规定什么是以每米为计税依据的
  • 互联网合同要交社保吗
  • 企业法人股东向个人借款能起诉查封公司财产吗
  • 未认证的增值税发票如何开具红字发票
  • 免抵退说
  • 一个十图
  • 不动产取得以什么为要件
  • 如何申请残疾人
  • 发票冲红后是否可以重开
  • 下花园6路公交车时间表
  • 费用票可以抵扣什么税
  • 如何设定电脑开机密码锁
  • 银行账户销户余额转入另外的公司账户分录
  • PHP:oci_define_by_name()的用法_Oracle函数
  • 增值税已认证抵扣
  • php运用
  • 汇算清缴的表在哪里
  • vue3中使用window方法
  • chkconfig命令参数
  • 员工报销医药费的会计分录
  • java动态代理的实现方式
  • 子公司借钱给母公司使用
  • 包装费包含什么
  • 帝国cms使用手册
  • 企业所得税营业收入包括什么
  • ps像素大小怎么调整不了
  • 上月增值税报表还可以更正吗
  • 收到一分钱的红包表情包
  • 购入画图软件
  • 给员工发放礼品的祝福
  • 影响公司股利分成的因素
  • 开具利息收入发票需不需要有经营范围
  • 固定资产与固定资产净值的区别
  • sql2000数据库怎么删除数据
  • 房屋消防工程
  • 公司利润如何提取避税
  • 物业公司代收代缴水电费
  • 本年利润如何记账
  • 固定资产能直接计入费用吗为什么
  • 借长期借款贷在建工程
  • 上年度计提多了的奖金怎么办
  • 机票行程单上没有金额怎么报销
  • 汽车几年折旧年限
  • 企业在计划内应生产的工业产品
  • 怎么做windows
  • win7开机启动
  • linux mount命令详解
  • win7 桌面空白
  • Serv-U 构建个人FTP服务器图解
  • win8.1无法进入系统
  • win8安装盘
  • Windows8和Windows8 RT版的区别介绍
  • ExtJS TabPanel beforeremove beforeclose使用说明
  • awk中RS、ORS、FS、OFS的区别和联系小结
  • bat命令详解
  • opengl es4
  • Open quote is expected for attribute "name" associated with an element type "item".
  • 基于stm32的100个毕业设计
  • javascript简明教程
  • 深入解析抑郁症:什么是它的表现?别小看它的危害程度!
  • JavaScript中的方法名不区分大小写
  • jQuery实现checkbox列表的全选、反选功能
  • 用javascript
  • angularjs1.5
  • 总包发票税率
  • 深圳纳税信息查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设