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

  • win10怎么把视频设置成壁纸(win10怎么把视频设置成动态壁纸)

    win10怎么把视频设置成壁纸(win10怎么把视频设置成动态壁纸)

  • AirPodspro怎么降噪(airpodspro怎么降噪模式华为)

    AirPodspro怎么降噪(airpodspro怎么降噪模式华为)

  • word怎么做索引目录(word怎么做索引页)

    word怎么做索引目录(word怎么做索引页)

  • 校园卡被冻结的原因(校园卡被冻结的怎么办)

    校园卡被冻结的原因(校园卡被冻结的怎么办)

  • 华为nova6se微信视频美颜怎么设置(华为nova6se微信来信息怎么显示)

    华为nova6se微信视频美颜怎么设置(华为nova6se微信来信息怎么显示)

  • 微信视频时怎么才能有美颜效果(微信视频时怎么把自己的小窗口隐藏)

    微信视频时怎么才能有美颜效果(微信视频时怎么把自己的小窗口隐藏)

  • 低系统苹果六怎么录屏(低系统苹果六怎么升级)

    低系统苹果六怎么录屏(低系统苹果六怎么升级)

  • oppor17系统更新的坏处(oppor17系统更新到几个版本了?)

    oppor17系统更新的坏处(oppor17系统更新到几个版本了?)

  • 计算机中用于算数和逻辑运算的部件是(用于计算的计算机是数字计算机吗)

    计算机中用于算数和逻辑运算的部件是(用于计算的计算机是数字计算机吗)

  • 电脑主板坏了里面的文件还在吗(电脑主板坏了里面的文件怎么办)

    电脑主板坏了里面的文件还在吗(电脑主板坏了里面的文件怎么办)

  • ipad充电几个小时充满(ipad充电几个小时最好)

    ipad充电几个小时充满(ipad充电几个小时最好)

  • 手机放久了开不了机怎么办(手机放久了开不了机怎么办oppo)

    手机放久了开不了机怎么办(手机放久了开不了机怎么办oppo)

  • 同代i5和i7的区别(同代i5和i7哪个好)

    同代i5和i7的区别(同代i5和i7哪个好)

  • 荣耀手环a2如何关机(荣耀手环a2功能)

    荣耀手环a2如何关机(荣耀手环a2功能)

  • 港版苹果xsmax是双卡吗(港版xsmax和国行区别)

    港版苹果xsmax是双卡吗(港版xsmax和国行区别)

  • 快手里的照片怎么删除(快手里的照片怎么保存到相册)

    快手里的照片怎么删除(快手里的照片怎么保存到相册)

  • vivo在哪找usb调试(vivo中的usb调试在哪里)

    vivo在哪找usb调试(vivo中的usb调试在哪里)

  • 红米k20pro怎样设置4G网(红米k20pro怎样设置扬声器)

    红米k20pro怎样设置4G网(红米k20pro怎样设置扬声器)

  • 喜马拉雅为什么在苹果手机下载不了(喜马拉雅为什么不能连续播放)

    喜马拉雅为什么在苹果手机下载不了(喜马拉雅为什么不能连续播放)

  • 电脑快捷键截图按哪几个键(电脑快捷键截图怎么截)

    电脑快捷键截图按哪几个键(电脑快捷键截图怎么截)

  • yolov5优化器及超参数设置(yolov5网络优化)

    yolov5优化器及超参数设置(yolov5网络优化)

  • 站在河马身上的锤头鹳,津巴布韦马纳潭国家公园 (© David Fettes/Getty Images)(河马是站在睡觉吗)

    站在河马身上的锤头鹳,津巴布韦马纳潭国家公园 (© David Fettes/Getty Images)(河马是站在睡觉吗)

  • 【特征提取】Hog特征原理简介与代码实践(特征提取原理)

    【特征提取】Hog特征原理简介与代码实践(特征提取原理)

  • 所得税税负率是125正常吗
  • 实收资本印花税如何申报
  • 未达到起征点的增值税会计处理
  • 金税开票系统怎么导出发票明细
  • 销售费用计入产品生产成本吗
  • 投资性房地产的初始计量
  • 公司车买保险怎么付款
  • 行政单位收入支出结转
  • 资产资本化的借款费用如何写分录?
  • 预售房提前还款需要去解押吗
  • 减免税期间是什么意思
  • 一般纳税人能开3个点的专票吗
  • 会计怎么避免坐牢
  • 无形资产属于什么行业
  • 高新企业研发人员
  • 预提费用的会计分录2018
  • 上年度少计提的税金及附加
  • 如何使用U盘启动盘进行分区
  • 客户收集软件
  • 安装win7前需要手动格式化c盘吗
  • imac夜间模式
  • 根据新企业所得税法的规定,企业购买并实际使用
  • PHP:pg_lo_tell()的用法_PostgreSQL函数
  • 固定资产一次性扣除后第二年账务处理
  • edi文件怎么打开
  • 经营租赁的房屋计提折旧吗
  • 父母将住房无偿赠送给子女 增值税
  • php 序列化函数
  • 合并报表六大抵消分录
  • 应收票据年末计息的分录
  • react by
  • thinkphp分表查询
  • 增删改查功能实现
  • php绘制图形函数
  • discuz怎么添加diy模块
  • spring5和6差别大吗
  • 拓展训练属于培训费吗
  • 电子发票冲红后对方能查到吗
  • 帝国cms采集教程
  • 公司开电费发票该怎么入账?
  • 发票冲红和作废有啥区别
  • 印花税购销合同包括哪些
  • 工伤鉴定费计入什么科目
  • 某项目施工成本计划如下图,则5月末
  • 税收制度政策
  • 抚恤金的种类有多少种
  • 付出对价的公允
  • 少计提的税费如何补提
  • 福利费可以计入销售费用吗
  • 政府会计制度之1613在建工程
  • 进项已抵扣,退货发票怎么处理
  • 暂估费用票的账务处理
  • 资产负债表和利润表的利润不一致
  • 财政登记证取消了吗
  • 防伪税控费用抵税分录
  • MySQL删除重复数据只保留一条
  • linux/fs.h
  • mac虚拟机安装教程win10正版
  • windows查找命令
  • Ubuntu Server 13.10 安装配置图解教程
  • WINDOWS操作系统属于什么操作系统
  • win7开始图标怎么变大点
  • win10系统的优化
  • win10系统怎么设置电脑密码
  • linux命令教程
  • css美化表单 案例
  • JavaScript不支持ie
  • shell编程简单实例
  • jquery validator
  • python生成txt文档
  • jquery删除table行
  • 能用javascript 最终
  • js中变量有哪几种?分别在哪里定义?
  • jquery遍历object
  • js面向对象写法
  • python批量修改文本内容
  • 河北税务怎么看自己绑定的银行卡号
  • 医保已申报未缴费可以撤销申报吗
  • 纳税人谈感受
  • 营业执照每个季度申报吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设