位置: 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)

  • 淘宝怎么查看自己的登录密码(淘宝怎么查看自己的评价星级)

    淘宝怎么查看自己的登录密码(淘宝怎么查看自己的评价星级)

  • opporeno可以开空调吗(oppo reno手机能不能开空调?)

    opporeno可以开空调吗(oppo reno手机能不能开空调?)

  • QQ群怎么打卡(qq群怎么打卡签到领分)

    QQ群怎么打卡(qq群怎么打卡签到领分)

  • 屏幕镜像怎么在转圈(屏幕镜像怎么在电脑上用)

    屏幕镜像怎么在转圈(屏幕镜像怎么在电脑上用)

  • iphone11支持北斗导航吗(Iphone11支持北斗吗)

    iphone11支持北斗导航吗(Iphone11支持北斗吗)

  • 网易云下载的vip音乐不是vip以后能听吗(网易云下载的vip歌曲到期还能听吗)

    网易云下载的vip音乐不是vip以后能听吗(网易云下载的vip歌曲到期还能听吗)

  • 录好的视频声音太小怎么办(录好的视频声音怎么变大)

    录好的视频声音太小怎么办(录好的视频声音怎么变大)

  • 苹果8p手机信号时有时无(苹果8p手机信号弱怎么解决)

    苹果8p手机信号时有时无(苹果8p手机信号弱怎么解决)

  • vivo手机换卡怎么换(vivo手机换卡怎么换视频)

    vivo手机换卡怎么换(vivo手机换卡怎么换视频)

  • 与软件描述语言相比,VHDL有什么特点(与软件描述语言相比vl hd l有什么特点特点)

    与软件描述语言相比,VHDL有什么特点(与软件描述语言相比vl hd l有什么特点特点)

  • 爱奇艺下载的视频在哪(爱奇艺下载的视频怎么传到u盘)

    爱奇艺下载的视频在哪(爱奇艺下载的视频怎么传到u盘)

  • word文档序号自动排序(word文档序号自动生成1234)

    word文档序号自动排序(word文档序号自动生成1234)

  • 微信阅读量算人数还是次数(微信阅读量能挣钱吗)

    微信阅读量算人数还是次数(微信阅读量能挣钱吗)

  • 短信有个感叹号啥意思(14promax短信有个感叹号)

    短信有个感叹号啥意思(14promax短信有个感叹号)

  • 暗黑模式怎么设置(暗黑模式怎么添加到控制面板)

    暗黑模式怎么设置(暗黑模式怎么添加到控制面板)

  • whatsapp用不了怎么办(whatsapp怎么不能用了)

    whatsapp用不了怎么办(whatsapp怎么不能用了)

  • linux系统中调度的基本单位是(linux 调度)

    linux系统中调度的基本单位是(linux 调度)

  • 艺术字位置水平在哪里(艺术字位置水平6cm左上角怎么设置)

    艺术字位置水平在哪里(艺术字位置水平6cm左上角怎么设置)

  • 阀控式蓄电池是什么意思(阀控式蓄电池是铅酸蓄电池吗)

    阀控式蓄电池是什么意思(阀控式蓄电池是铅酸蓄电池吗)

  • 路由器管家怎么用?(路由器管家怎么登录)

    路由器管家怎么用?(路由器管家怎么登录)

  • Linux基金会官网公布最佳Linux发行版名单详解(哪一年底,由linux基金会成立?)

    Linux基金会官网公布最佳Linux发行版名单详解(哪一年底,由linux基金会成立?)

  • SpringBoot+Vue实现文件上传下载功能

    SpringBoot+Vue实现文件上传下载功能

  • phpcms参数错误怎么办(php 错误提示)

    phpcms参数错误怎么办(php 错误提示)

  • 超过小规模纳税人
  • 甲供材料的增值税是多少
  • 企业所得税纳税义务人
  • 月末计提无形资产的折旧
  • 发票未到已验收什么意思
  • 云信付款如何贴现
  • 在途物资的会计凭证怎么做
  • 年度销售返利的计算方法
  • 公司代扣社保为什么是400多余的钱
  • 应收账款减值后可以转回吗
  • 接受固定资产投资的企业,应该按照投资合同
  • 计提以前年度税金
  • 征收开票信息
  • 小规模纳税人开具增值税专用发票
  • 个体工商户可以给自己交五险一金吗
  • 银行利息现金流量表什么科目
  • 广告行业监管政策
  • 修理时换下的废品配件怎么处理?
  • 不占股权投资如何做账
  • 转销和冲销是什么意思
  • 增值税留抵退税账务处理
  • 工会经费的开支必须取得发票么
  • 员工出差时法律规定
  • 房地产开发有限公司英文
  • 为什么盈余公积补亏不会影响留存收益
  • php实现原理
  • node.js最新版本
  • 可抵扣增值税有哪些
  • /locate village村庄
  • 瓦尔加德
  • 会计政策变更常见例子
  • 未分配利润可以弥补亏损吗
  • 新会计准则开办费如何做账务处理
  • html与js之间如何配合
  • php修改图片尺寸
  • php接收post
  • 弃置费用预计负债的摊余成本
  • 产品维修费的会计怎么做
  • ubuntu16安装教程
  • 文化事业建设费税收优惠2023
  • 股东投资款超过实收资本怎么处理
  • 其他应付款二级明细科目有哪些
  • 个税申报赡养老人可以填公婆吗
  • 筹建期间的开办费为什么不属于资产
  • 买车哪些费用可以计入固定资产
  • 稳岗补贴算不算财政补贴
  • 办公桌椅入什么会计科目
  • 补发工资怎么补发
  • 费用报销如何做账务处理分录
  • 公司对员工罚款怎么处理
  • 注册资金未缴齐怎么处理
  • 员工社保,个税怎么计算
  • MS-SQL Server 2005 其中三个版本的比较
  • win7打开浏览器很慢
  • linux 主力机
  • windows终端美化
  • hda linux
  • windows远程桌面连接怎么用
  • mac命令行指令
  • sentstrt.exe - sentstrt进程是什么文件 有什么用
  • win10正版和盗版区别大吗
  • linux shell脚本编写实例
  • python模拟reversed功能
  • jquery的实现原理
  • node网络爬虫
  • js中math.pow
  • python-flask
  • nodejsorg
  • 刨根问底造句
  • js中的继承
  • 社保批扣和灵活就业批扣有什么区别
  • 去哪儿网客服电话怎么转人工
  • 河北省国税局发展前景
  • 仓储物流企业的双控是指什么
  • 公司变更税务局
  • 计算车辆购置税公式
  • 岗位能手竞赛
  • 电子缴款凭证可以用于报销吗
  • 税务稽查局工资高吗
  • 烟叶税的税收优惠
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设