如何将前端项目部署到服务器,并通过域名访问(基于腾讯云)
前段时间我更新了有关于前端开发软件VS Code和运行环境Node.js的安装。随后又更新了对Html的学习。由于最近有了实习的需求我便决定把手头上的一个Web项目部署到我买的腾讯云服务器上。
照理来说一般服务器都应该是Linux操作系统,但是由于物联网老师的需求,我的服务器是Windows server2012的操作系统。新手用这个也许会更方便,因为Linux主要是指令为主,图形界面是外加;windows是图形界面为主,加一些指令。
话不多说,我们开始吧
首先将web项目部署到服务器你需要在服务器上安装web服务端程序,也就是Web容器。现在常用的有Tomcat和Apache。我选择的是Tomcat。如何安装Tomcat网上有很多教程。
.
.
OK,现在我们的前期准备已经完成。一个已经安装了Tomcat的腾讯云服务器、一个web项目、一个购买后完成备案的域名(没有域名的公网IP也可以哦)
一,修改Tomcat
首先我们将Web项目文件夹整个复制到Tomcat目录下的webapps目录下。如下图所示,myweb文件夹就是我的前端项目。
部署好后我们要修改Tomcat的conf目录下的sever文件,鼠标右键编辑用记事本打开server文件。如下
第一处修改:
找打文件中的端口修改为80端口
将 protocol属性值为HTTP/1.1的Connector元素的port属性值改为80,这样就可以免去访问的时候还要加端口号
1:HTTP/1.1 协议 ,用于监听浏览器发送的请求. 设置成80 后可以直接使用http://localhost 访问
:2:AJP/1.3 协议 , 用于监听其他服务器转发过来的请求.
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
修改完成后如下
<Connector port="80" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
第二处修改:
将 Engine元素的defaultHost值改为服务器域名或者公网IP
<Engine name="Catalina" defaultHost="www.XXXXX.cn">
<!--For clustering, please take a look at documentation at:
/docs/cluster-howto.html (simple how to)
/docs/config/cluster.html (reference documentation) -->
第三处修改:
在Host元素中将name属性值localhost改为服务器的公网IP或域名,并在元素中间插入一个元素Context,Context元素的docBase属性值可以是项目的绝对路径
<Host name="www.XXXXX.cn" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<Context path="/"
docBase="C:\Program Files\Tomcat9\webapps\myweb\"
reloadable="true"
crossContext="true" />
修改完后如下图所示
最后:运行tomcat的bin目录下的startup文件。使Tomcat开始运行
这处修改完成后就可以点击保存了。Tomcat部分已经修改完成。
然后打开服务器的防火墙就可以通过公网IP访问了。
二,服务器防火墙设置
因为 window server2012 自动屏蔽掉ping命令
所以需要我们自己手动修改防火墙开放80端口。你当然也可以开放其他端口。打开控制面板 控制面板\系统和安全\Windows 防火墙\高级设置\入站规则\新建规则
然后
一直点击下一步直到完成。
三,腾讯云服务器设置
第一步设置安全组
新建一个开放所有端口的安全组
设置好安全组,已经可以用公网IP访问你部署的web网页了。
第二步将域名和公网IP绑定
进入总览找到云解析。没有使用过云解析,界面使用中是没有这一项的,可以到右上角的全部中去找
云产品 > 全部 > 域名和网站 > 云解析
添加解析 > 添加域名
有一个小细节IVP4地址其实就是你的服务器公网IP
添加云解析后大概过10分钟就可以用域名访问啦
总结
后面一些步骤的细节没有仔细讲哦。可以百度补充,大致流程就是如此