如何将前端项目部署到服务器,并通过域名访问(基于腾讯云)

前段时间我更新了有关于前端开发软件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文件夹就是我的前端项目。

前端开发环境放在docker里 前端程序放在服务器吗_前端开发环境放在docker里

部署好后我们要修改Tomcat的conf目录下的sever文件,鼠标右键编辑用记事本打开server文件。如下

前端开发环境放在docker里 前端程序放在服务器吗_前端开发环境放在docker里_02

第一处修改:

找打文件中的端口修改为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" />

修改完后如下图所示

前端开发环境放在docker里 前端程序放在服务器吗_tomcat_03

最后:运行tomcat的bin目录下的startup文件。使Tomcat开始运行

这处修改完成后就可以点击保存了。Tomcat部分已经修改完成。
然后打开服务器的防火墙就可以通过公网IP访问了。

二,服务器防火墙设置

因为 window server2012 自动屏蔽掉ping命令
所以需要我们自己手动修改防火墙开放80端口。你当然也可以开放其他端口。

打开控制面板  控制面板\系统和安全\Windows 防火墙\高级设置\入站规则\新建规则

前端开发环境放在docker里 前端程序放在服务器吗_前端_04

然后

前端开发环境放在docker里 前端程序放在服务器吗_tomcat_05

前端开发环境放在docker里 前端程序放在服务器吗_域名_06


一直点击下一步直到完成。

三,腾讯云服务器设置

第一步设置安全组

前端开发环境放在docker里 前端程序放在服务器吗_前端_07

新建一个开放所有端口的安全组

设置好安全组,已经可以用公网IP访问你部署的web网页了。

第二步将域名和公网IP绑定

进入总览找到云解析。没有使用过云解析,界面使用中是没有这一项的,可以到右上角的全部中去找
云产品 > 全部 > 域名和网站 > 云解析

前端开发环境放在docker里 前端程序放在服务器吗_前端_08

添加解析 > 添加域名

前端开发环境放在docker里 前端程序放在服务器吗_域名_09

前端开发环境放在docker里 前端程序放在服务器吗_前端_10

有一个小细节IVP4地址其实就是你的服务器公网IP

添加云解析后大概过10分钟就可以用域名访问啦

总结

后面一些步骤的细节没有仔细讲哦。可以百度补充,大致流程就是如此