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

  • 个人所得税清算怎么操作
  • 营业现金比率是用经营活动净流入还是经营活动流入
  • 申请退还增量留抵税额的条件包括
  • 消费税的账务处理流程
  • 进项税和销项税怎么理解
  • 社保按基数交工资按时发怎么做账
  • 汇总记账凭证核算组织程序的缺点主要有
  • 房屋改造工程怎么计入固定资产
  • 贴标企业
  • 注册资本增资印花税减半
  • 开专用发票可以不写单位与型号么?
  • 购入工程物资的账务处理
  • 企业大中小型划分最新标准
  • 融资性售后回租按什么缴纳增值税
  • 2019年收入不足6万如何退税
  • 进项税额不得抵扣在哪个科目
  • 小规模纳税人交企业所得税吗
  • 如何区分纳税调额和补税
  • 福利费专票进项转出怎么做账
  • 免税农产品加工企业
  • 有哪些方法可以判断乳剂的类型
  • 劳务工程款和工人工资的区别
  • 广告业文化事业建设费2023标准
  • 库管和车间工人哪个好
  • 工信部推出一键解绑怎么用
  • 职工福利费的会计科目是什么
  • PHP:mb_encode_numericentity()的用法_mbstring函数
  • 核定征收的企业利润怎么处理
  • regsync.exe - regsync是什么进程 有什么用
  • macOS Big Sur 11.2 RC 3(版本号20D64)预览版正式发布(附更新内容)
  • php 数组定义
  • 支付境外设计费合同备案流程
  • un system
  • 固定资产抵账的增值税
  • vue 自适应网站ui框架
  • 专家坐诊信息
  • 服务什么行业
  • 超市账目月底怎么核算
  • 支付工资会计
  • 所有者权益变动表模板excel
  • mysql备份原理
  • 帝国cms会员发布信息数量
  • php.ini上传限制
  • 票据承兑和贴现是指
  • 发票备注栏必须写吗
  • 售后回租融资租赁会计处理
  • mysql 自动重启
  • 可供出售金融资产名词解释
  • 企业出租房产增值税怎么计算
  • 企业销售收入确认条件
  • 减值准备减少记哪方
  • 残疾人就业保障金会计分录怎么做
  • 房产契税新政策2023
  • 建筑业异地预交税款最新规定
  • 公司库存现金提现流程
  • 公司年底做财务报表什么吗
  • 利息发票可以抵税吗
  • 劳务派遣人员能有营业执照吗
  • mysql kill -9
  • xp系统为什么不能用了
  • linux系统怎么停止ping
  • 电脑window8系统怎么样
  • kernel32在哪个文件夹
  • vim删除^m
  • 游戏引擎的重要性
  • webrtc opus
  • 浅析中国式现代化的理论价值与现实意义
  • Node.js中的包管理工具是什么
  • shell脚本自动化
  • jquery.js插件
  • jquery validate表单校验html
  • 税务局的人工资多少
  • 发票打印怎么调整尺寸
  • 青岛的红叶什么时候红
  • 信用社股金分红时间
  • 湖北税务网上登录
  • 痛点 堵点 难点 盲点
  • 广东省社保缴费基数
  • 广州天河东路税务局地址
  • 收心归位经典语录短句
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设