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

  • win7回收站图标不见了怎么办(win7回收站图标怎么找回来)

    win7回收站图标不见了怎么办(win7回收站图标怎么找回来)

  • 宝贝标题这样写才能增加曝光度(宝贝标题一般由哪些词组成)

    宝贝标题这样写才能增加曝光度(宝贝标题一般由哪些词组成)

  • 微信状态为什么会消失(微信状态为什么没有求锦鲤)

    微信状态为什么会消失(微信状态为什么没有求锦鲤)

  • 通用里访问限制不见了(设置通用访问限制的密码忘了怎么办)

    通用里访问限制不见了(设置通用访问限制的密码忘了怎么办)

  • 抖音如何看播放量(抖音如何看播放次数)

    抖音如何看播放量(抖音如何看播放次数)

  • 安卓8.1和9.0的区别(安卓8.1.0和安卓9)

    安卓8.1和9.0的区别(安卓8.1.0和安卓9)

  • 苹果x屏幕放大了怎么恢复(苹果14pro屏幕放大了怎么办)

    苹果x屏幕放大了怎么恢复(苹果14pro屏幕放大了怎么办)

  • 抖音可以设置不让评论吗(抖音可以设置不看直播吗)

    抖音可以设置不让评论吗(抖音可以设置不看直播吗)

  • 苹果6s更新13.4系统卡吗(苹果6s更新13.5.1怎么样)

    苹果6s更新13.4系统卡吗(苹果6s更新13.5.1怎么样)

  • p30锁屏时间位置(华为p30pro锁屏时间位置移动)

    p30锁屏时间位置(华为p30pro锁屏时间位置移动)

  • word自动换行符在哪里(word自动换行符怎么去掉)

    word自动换行符在哪里(word自动换行符怎么去掉)

  • ipad软件闪退怎么解决(ipad软件总是闪退怎么回事)

    ipad软件闪退怎么解决(ipad软件总是闪退怎么回事)

  • 投影仪中平面镜的作用(投影仪中平面镜的距离是多少)

    投影仪中平面镜的作用(投影仪中平面镜的距离是多少)

  • 小爱同学能连接电脑当音响吗(小爱同学能连接蓝牙吗)

    小爱同学能连接电脑当音响吗(小爱同学能连接蓝牙吗)

  • 手机屏幕乱跳或自动操作,是怎么回事(手机屏幕乱跳或自动操作能修吗)

    手机屏幕乱跳或自动操作,是怎么回事(手机屏幕乱跳或自动操作能修吗)

  • 仅退款成功还用退货吗(仅退款退款成功还能反悔吗)

    仅退款成功还用退货吗(仅退款退款成功还能反悔吗)

  • 为什么有的人朋友圈什么也没有(为什么有的人朋友很多,有的人没有朋友)

    为什么有的人朋友圈什么也没有(为什么有的人朋友很多,有的人没有朋友)

  • 支付宝好友怎么知道有没有被删(支付宝好友怎么拉黑名单)

    支付宝好友怎么知道有没有被删(支付宝好友怎么拉黑名单)

  • 快手为什么不能特别关注(快手为什么不能关注别人了)

    快手为什么不能特别关注(快手为什么不能关注别人了)

  • xp系统任务栏不见了

    xp系统任务栏不见了

  • 快手主页链接在哪复制(快手主页链接在哪里找)

    快手主页链接在哪复制(快手主页链接在哪里找)

  • 如何查看平板使用痕迹(如何查看平板使用痕迹华为)

    如何查看平板使用痕迹(如何查看平板使用痕迹华为)

  • 华为p30pro屏幕供应商(华为p30pro屏幕供电引脚在哪里)

    华为p30pro屏幕供应商(华为p30pro屏幕供电引脚在哪里)

  • 机械师电脑是不是杂牌(机械师电脑不充电)

    机械师电脑是不是杂牌(机械师电脑不充电)

  • 产品分成方式取得收入什么意思举例
  • 苗圃公司会计分录
  • 综合单价的调整计算公式
  • 综合所得申报是报上个月的吗
  • 政府补贴是否要交企业所得税
  • 购入股票作为短期投资是什么凭证
  • 投入实收资本需要缴纳什么税
  • 金税盘坏了更换需要几天
  • 房屋租赁收入还需要缴纳附加税吗
  • 仪器设备校验记录表
  • 哪些计入应收账款
  • 然后销售产品
  • 母公司借款给子公司作为投资
  • 含税金额怎么计算
  • 增值税专用发票有效期是多长时间
  • 个人安装设备属于劳务吗
  • 同一建筑工程签不同合同
  • 增值税扣税凭证抵减销项税额
  • 购买商品用于赠送
  • 收到留抵税额退税怎么做分录
  • 报关单上的运费怎么看
  • 金蝶标准版利润表季度怎么选
  • 小规模纳税人会计核算健全,能够提供准确
  • 高危行业企业提成怎么算
  • 未开发票的结算款怎么入账?
  • 税务局返还的个税手续费需要缴纳增值税吗
  • 电脑在线测速的软件
  • 利息如何做会计分录
  • 公司付款给个人,怎么处理
  • php mktime函数
  • 11的文件管理在哪
  • win10一直显示修复
  • 残疾人增值税即征即退政策2020
  • PHP:mcrypt_list_algorithms()的用法_Mcrypt函数
  • 应收账款转让的限制约定
  • vue url 参数
  • 结转代销成本
  • 固定资产已提完折旧后丢失怎么处理
  • 税款入库期是什么意思
  • css设置渐变色背景
  • 前端文件的上传和下载
  • java异常编程题
  • mysql 临键锁
  • 错开、补开发票问题
  • 发票边缘有孔的可以撕掉吗
  • 机动车发票哪几联 做帐
  • 简易计税项目可抵扣吗
  • <四>2:掌握Const 与一二级指针结合应用
  • 织梦商城网站源码
  • 税务查账后如何结转
  • 收到报销单如何处理
  • 代扣员工伙食费
  • 资产负债表是面子
  • SQL Server 2008 r2 完全卸载方法分享
  • 购买方收到红字发票怎么做凭证
  • 电子发票是否作废怎么查
  • 外单位替本单位缴纳社保
  • 普通发票可以扣除吗
  • 库存股 注销
  • 旅行社差额征收税率多少
  • 收到项目资本金怎么入账
  • 新开的公司税务那边要办什么
  • 管理费用和销售费用都有职工薪酬
  • 金税盘开完发票可以直接拔掉吗?
  • 税审报告一定要税所主任签吗
  • windows ip地址在哪里设置
  • 催化剂过低怎么解决
  • xp系统如何禁止开机启动软件
  • xp系统如何共享文件夹怎么弄
  • 2021年win10累积更新
  • windows 8 build 8148
  • 如何理解js中的原型
  • xcopy命令怎么用
  • javascript怎么学
  • Python连接MySQL并使用fetchall()方法过滤特殊字符
  • Python编程中装饰器的使用示例解析
  • 文山市税务
  • 工程开具增值税专用发票
  • 拆迁户契税减免政策文件
  • 办理企业步骤
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设