位置: IT常识 - 正文

前端项目如何部署到服务器实现网址访问(前端项目如何部署到服务器)

编辑:rootadmin
前端项目如何部署到服务器实现网址访问

目录

前言

需要用到的东西

购买云服务器和域名

绑定域名

使用Xshell连接云服务器

下载Nginx

安装nginx

配置nginx

启动nginx

传输文件

配置防火墙

卸载自带的防火墙

安装iptables防火墙

最后


前言

推荐整理分享前端项目如何部署到服务器实现网址访问(前端项目如何部署到服务器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端项目如何部署到服务器,前端项目如何部署,前端项目如何部署上线,前端项目是怎么部署的,前端项目如何部署工作,前端项目如何部署上线,前端项目如何部署到服务器,前端项目如何部署上线,内容如对您有帮助,希望把文章链接给更多的朋友!

        写了那么久的前端,就想着让朋友们欣赏欣赏,但是要怎么让他们看见呢,是打包工程文件、录视频还是把电脑抱到他们面前呢。首先打包工程文件发出去是不可能的,录视频也没意思,抱电脑那就太难了,那这个时候,我们自然想到平时我们访问网站时,都是直接通过网址来实现访问的,那么我们能不能也把自己的项目也像这样让朋友们通过网址访问呢,那问当然就是可以了。

需要用到的东西

云服务器

域名

主机软件:Xshell(用于主机连接到云服务器)、Xftp(用于主机传输文件到云服务器)

云服务软件:Nginx

购买云服务器和域名

        阿里云与腾讯云都有免费试用一个月的服务器,大家可以先用试用来感受与学习一下,这里我就以阿里云服务器为例了。

        阿里云官网:https://www.aliyun.com/ 

        在首页位置可以免费试用一个月。

 点击后体验后就可以按步骤来选择服务器的配置。

  

地域,可以选择靠近自己的地域,他这里的配置规格因为我以及试用过了所以有很多选项,如果是第一次免费试用那就是 2核4GiB 也够了。

镜像,服务器的操作系统,这里我用的是CentOs 版本可以自己选择(我用的的7.9 64位),存储默认40G,然后按步骤下去我们就获得了云服务器。

安全组在后面还可以重新配置或者修改

我们可以进入控制台,选择 云服务器ECS在实例中可以看见我们刚刚创建的云服务器,这里有公网IP,要记录一下,后面绑定域名需要使用。

接下来就是域名了,点击图片上一口价域名可以去往域名交易的页面。

 

这里有许多的域名可以购买, 如果只是为了测试,可以想我这样筛选,一般价钱3~5元的都是还剩几天或一个月的,这种的话不能进行备案(备案要求域名有效期大于90天),但是用于测试还是可以的,后面可以通过ip地址来访问页面。(购买域名需要提交身份证正面照)

绑定域名

        到了这一步,我们服务器和域名都有了,但是呢现在他们还只是互为陌生人,我们需要让他们互相认识一下。

去到控制台选择域名、然后选择域名列表,在这里可以看见我们所购买的域名,选择解析。

        我们选择新手引导,在记录值中填写我们服务器的公网IP地址。

        那这里的记录值呢就是填写我们云服务器的公网IP,忘记的可以再去云服务器中的实例中看一下,这样填完后,你得到了两条记录,一条为www,一条为@

这个时候我们可以在浏览器输入www.你的域名来访问初始网页。

        之后我们还要为云服务器配置安全组,在云服务器的安全组中,点击创建安全组。

这里只需要注意入方向,得把80端口给开开,配置完成后。

我们点击左侧实例,选择更多、网络与安全组、加入安全组,选择我们刚刚创建的安全组。

 使用Xshell连接云服务器

Xshell 下载 - NetSarang Website

前端项目如何部署到服务器实现网址访问(前端项目如何部署到服务器)

官网右侧有家庭和学校用户的免费许可证 选择免费授权页面,然后填写自己的邮箱就可以在邮箱中获得他的下载链接,Xshell和Xftp都是这样下载。

安装完成后打开软件,新建会话。

        主机填写云服务器的公网IP,端口号默认22,选择左侧用户身份验证,用户名默认是root,密码就是大家在初始化云服务器时,阿里云让你设置的实例密码。连接成功会显示

Welcome to Alibaba Cloud Elastic Compute Service ! 

        连接成功后看此时的操作是否为root用户,如果不是root用户记得输入su来切换为root用户

         在Xshell中用指令来创建我们网站的根目录,用来存储我们项目的打包文件,创建文件夹命令,文件夹名字随意。

mkdir /myhtml

通过ls 可以看到当前文件夹下的文件或者是文件夹,如果输入ls没有反应,可以输入cd /

再输入ls ,可以看见文件夹创建成功了 。

通过cd到我们的目录 中

cd /myhtml

再次创建

mkdir /dist 下载Nginx

        在操作界面输入指令,下载Nginx

yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pcre-devel

        等待一会,下载完成后,我们要对Nginx进行解压

cd /usr/local && wget http://nginx.org/download/nginx-1.21.6.tar.gz && tar zxvf nginx-1.21.6.tar.gz安装nginx

        首先cd到软件目录中,输入指令

cd nginx-1.21.4

   然后再输入

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-pcre --with-http_ssl_module

最后输入

make && make install

启动nginx

/usr/local/nginx/sbin/nginx配置nginx

        接下来就是配置nginx了,我们用指令打开配置文件

vim /usr/local/nginx/conf/nginx.conf

        输入字母(’i‘)进入编辑模式,找到server 。

         其中listen是端口号,这也是为什么之前安全组入口留80的原因,server_name的内容可以把默认的localhost改为服务器的公网IP地址,在下面的location中,root后面改为

/myhtml/dist

 最后先按esc键 然后输入 :wq 回车保存。

启动nginx/usr/local/nginx/sbin/nginx

此处下载安装参考 https://www.jianshu.com/p/c051164e4203

传输文件

        接下来,我们使用Xftp软件,连接服务器,连接方法和刚刚差不多,主机就是云服务器公网IP,勾选使用身份验证代理,输入root账户和实例密码

 将我们项目打包的文件(我这里是vue的打包),我们在右侧云服务器找到我们创建的文件夹

/myhtml/dist 然后直接将左侧打包文件夹中的所有文件拖到右侧服务器我们刚刚创建的dist中。

 配置防火墙

        原先我以为这样就够了,但是后面还是访问不了,后来看见了这篇文章

基于VMware虚拟机, Linux下的Nginx配置, 和外部主机访问配置_Twilight.c的博客-CSDN博客原来还需要配置防火墙。

关闭自带的防火墙

        首先我们需要禁用自带的防火墙,输入指令

systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止firewall开机启动安装iptables防火墙 

        输入指令来安装iptables防火墙

yum install iptables-services

        打开配置文件

vi /etc/sysconfig/iptables

         输入字母(’i‘)进入编辑模式,然后添加一行,允许80端口通过防火墙

-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT

        最后先按esc键 然后输入 :wq 回车保存。

最后

        到了这一步,我们就已经部署完成了,你可以在浏览器地址栏中输入

http:// 你的云服务器公网IP:80 或者http:// 你的域名

        直接通过IP地址的方式来有些low了,但是要想使用域名访问需要备案,填写资料然后等待。。。首先域名有效期一定要大于90天,我这里的只有38天,所以我就没有去备案了。        

        我这里的方法适用于静态页面或者是通过网址接口所写的项目,我这里是用的黑马提供的接口,对于本地自写数据库和接口的部署方法我还在学习中。

        欢迎大家指正讨论!

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

上一篇:Vue - 图片浏览组件v-viewer(vue查看图片组件)

下一篇:Element-Plus el-col、el-row快速布局

  • b站网页版怎么关闭弹幕(b站网页版怎么下载视频缓存)

    b站网页版怎么关闭弹幕(b站网页版怎么下载视频缓存)

  • 京东闪付卡绑定微信怎么消费(京东闪付卡绑定微信银行卡状态不正确)

    京东闪付卡绑定微信怎么消费(京东闪付卡绑定微信银行卡状态不正确)

  • 苹果手机的铃声怎么设置(苹果手机的铃声和媒体声音是一个键吗)

    苹果手机的铃声怎么设置(苹果手机的铃声和媒体声音是一个键吗)

  • 红米10xpro有红外线功能吗(红米10x有红外线)

    红米10xpro有红外线功能吗(红米10x有红外线)

  • soul无声连麦是什么(soul连麦怎么没有了)

    soul无声连麦是什么(soul连麦怎么没有了)

  • 苹果手机设置都开了微信不通知怎么办(苹果手机设置都是黑色)

    苹果手机设置都开了微信不通知怎么办(苹果手机设置都是黑色)

  • oppo watch支持微信吗(oppowatch支持微信语音聊天吗)

    oppo watch支持微信吗(oppowatch支持微信语音聊天吗)

  • 网易云购买的专辑在哪(网易云购买的专辑可以一起听吗)

    网易云购买的专辑在哪(网易云购买的专辑可以一起听吗)

  • 键盘分为哪几个区(键盘分为哪几个区图片)

    键盘分为哪几个区(键盘分为哪几个区图片)

  • 苹果ipad键盘缩小了,怎么扩大(ipadair键盘缩小)

    苹果ipad键盘缩小了,怎么扩大(ipadair键盘缩小)

  • 红米k30移动信号经常无服务(红米k305g版信号差)

    红米k30移动信号经常无服务(红米k305g版信号差)

  • 计算机网络安全策略是指(计算机网络安全的定义)

    计算机网络安全策略是指(计算机网络安全的定义)

  • 微信好友批量转移到另一个号(微信好友批量转移到企业微信)

    微信好友批量转移到另一个号(微信好友批量转移到企业微信)

  • 苹果11耐摔吗(苹果11耐摔还是12耐摔)

    苹果11耐摔吗(苹果11耐摔还是12耐摔)

  • 双十一是天猫还是淘宝(双十一天猫还是京东优惠大)

    双十一是天猫还是淘宝(双十一天猫还是京东优惠大)

  • 打开nfc是不是更耗电(打开nfc是不是更省电)

    打开nfc是不是更耗电(打开nfc是不是更省电)

  • r11pluskt是什么版本(r11pluskt和r11plusk的区别)

    r11pluskt是什么版本(r11pluskt和r11plusk的区别)

  • 滴滴一定要按导航走吗(滴滴必须按导航开吗)

    滴滴一定要按导航走吗(滴滴必须按导航开吗)

  • 手机不能锁屏怎么办(手机锁屏不能锁怎么办)

    手机不能锁屏怎么办(手机锁屏不能锁怎么办)

  • 怎么把qq昵称弄成彩色(怎么设置qq昵称并...)

    怎么把qq昵称弄成彩色(怎么设置qq昵称并...)

  • wps文字怎么做表格(wps文字做表格)

    wps文字怎么做表格(wps文字做表格)

  • 苹果11怎么连接蓝牙耳机(苹果11怎么连接电脑)

    苹果11怎么连接蓝牙耳机(苹果11怎么连接电脑)

  • 惠普m154a感叹号闪烁(惠普color laser jet pro m154a感叹号)

    惠普m154a感叹号闪烁(惠普color laser jet pro m154a感叹号)

  • 苹果7怎么指纹加密微信(苹果7怎么指纹解锁直接进去桌面)

    苹果7怎么指纹加密微信(苹果7怎么指纹解锁直接进去桌面)

  • 批量获取某文件夹内多个文件的文件名(批量获取文件信息)

    批量获取某文件夹内多个文件的文件名(批量获取文件信息)

  • 应用程序无法正常启动0xc000007bwin7解决方法(应用程序无法正常启动0xc000012d)

    应用程序无法正常启动0xc000007bwin7解决方法(应用程序无法正常启动0xc000012d)

  • 计提工资时个税怎么处理
  • 金税三期的主要系统
  • 所得税预缴怎么做分录
  • 金税盘纳税申报流程
  • 长期待摊费用可以转入固定资产吗
  • 增值税留抵税额计入什么科目
  • 零售行业的销售员有加班费吗
  • 小规模纳税人如何转一般纳税人
  • 销售收入打折后怎么算
  • 政府补助款提现流程
  • 房地产行业增值税筹划
  • 汽车贷款利息是什么
  • 预存送返利的帐户怎么查
  • 增值税留抵的原因
  • 境内机构经常项目外汇账户
  • 对方收到发票不付款怎么办
  • 金三打印客户端插件如何下载?
  • 有形动产租赁印花税税率是多少
  • 金税盘如何红冲已抵扣专票
  • 个人开机械租赁发票需要什么
  • 出口企业应交税费是负数怎么解释
  • 公司注销增值税在借方有余额怎么处理
  • 营改增贷款服务包括哪些
  • 30万的营业额20%是多少
  • 事业单位年末预算会计货币资金在贷方有余额对吗
  • 单位购买短期保本理财产品如何做账?
  • 公司注册资金抽逃
  • 出口退税率为0%退税收入怎么算
  • 公司纳税高说明什么
  • 财务软件的摊销额计入管理费用
  • php 字符串函数
  • PHP:pg_num_rows()的用法_PostgreSQL函数
  • 不动产税费
  • 补缴增值税和滞纳税区别
  • Win7系统僵尸部队4存档丢失的解决方法
  • flash process
  • php生成html
  • php超强防cc页面
  • 作废的发票对方钱能打出来吗
  • php屏蔽错误
  • java webflux
  • phpweb缓存技术
  • 原材料用于在建工程增值税如何处理
  • 资产处置损益怎么结转到本年利润
  • 临时工工资无发票可以扣除吗
  • 小微企业所得税税率2.5% 10% 25%
  • jsoncpp使用
  • 固定资产变卖怎么做账务处理
  • 动迁补偿金
  • 报销原材料运输费怎么算
  • 收到待报解预算收入是国家退的税吗
  • 上年度财务费用会计分录
  • 预支差旅费怎么记账
  • 物流公司的会计怎么样
  • 车辆保险费会计账务处理
  • 维保业务怎么开展
  • 股东实收资本超额到位
  • 以前年度调整要更正申报吗
  • 企业偿债能力的含义
  • sql server使用教程
  • mysql索引实战
  • 怎么操作win10系统
  • ubuntu选择语言
  • linux用户管理器在哪
  • linux配置java环境变量无法保存并退出
  • 如何在mac中安装windows
  • win1020h2版本千万别更新
  • 如何在mac系统和win10之间转换
  • linux禁止root用户远程登录
  • explorer.exe进程文件
  • Linux系统如何创建目录
  • cocos2d原理
  • 一行指令
  • js操作对象的方法
  • python 网络编程总结
  • 全面解析少女时代关系
  • 国家税务局发票查验平台查验官网
  • 重庆税务电子税务
  • 开发区税务局咨询电话
  • 广东发票查验平台下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设