从头开始购买云服务器，域名到搭建一个网站

  1. 本文采用腾讯云服务器和腾讯云平台购买的域名，因此请读者先在腾讯云官网进行购买，本文中，腾讯云服务器采用的是Ubuntu18.04的标准版本。
  2. 购买了云服务器之后，可以在本地联网的情况下，进行服务器连通性测试：
    cmd界面中使用ping命令：
    ![在这里插入图片描述](

如上图，这就是意味着当前的云服务器的公网ip已经成功申请，并且处在正常运行状态。

  2. 接下来需要把个人所申请的域名与服务器进行绑定，绑定域名之后，才能够用域名去访问所申请的服务器：在管理域名界面，悬浮DNSpod上面，即可出现管理解析：

    3. 云服务器连接家用linux电脑_node.js

  4. 点击“管理解析”之后，点击添加记录：

    5. 云服务器连接家用linux电脑_云服务器连接家用linux电脑_02

  6. 在添加记录中：

    7. 云服务器连接家用linux电脑_node.js_03

  8. 这次我们已经绑定好了域名了，就不用进行公网ip进行测试，只用使用域名测试连通性即可：
    如图，直接ping www.xxx.com即可

    9. 云服务器连接家用linux电脑_部署Vue到服务器_04

  9. 我们可以看到，能够成功ping通，因此我们 的域名就已经可以成功被解析和访问了。
    接下来我们把重点放在如何部署Vue前端网站：
  10. 首先我们安装nodejs环境：
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install nodejs

之后输入node -v，以及npm -v验证版本是否安装成功：

云服务器连接家用linux电脑_node.js_05


如图所示，即已经安装成功！

想要从 npm 编译本地扩展，你需要安装开发工具：

sudo apt install build-essential

  1. 这时候 首先使用xftp链接云服务器：
    腾讯云服务器要是选的是Ubuntu操作系统，则默认用户名是ubuntu，密码是你自己设置的。
    登录之后，就可以从Windows本地传输文件上去了。
    这时候就可以首先传输jdk上去安装了。
  3. 如果出现向你在xftp新建的文件夹上传文件“状态错误”的提示的话：
    很有可能是因为你创建的文件夹的权限问题：

    4. 云服务器连接家用linux电脑_vue.js_06

  4. 其他用户没有写入权限！！！
    则对当前文件夹在shell里面用sudo身份更新其权限信息即可：

    5. 云服务器连接家用linux电脑_部署Vue到服务器_07


    6. 云服务器连接家用linux电脑_服务器_08

  6. 现在便可以成功上传文件了！
    于是上传我们下载的jdk文件
  7. 上传成功之后，我们可以解压jdk文件：
    这里可以根据你的jdk版本去具体修改名称
sudo tar xf jdk-8u291-linux-x64.tar.gz

解压之后 可以cd进入下一级文件夹（解压后生成的）

  1. 这是我们输入pwd，查询当前的所在路径

    将pwd的路径记录下来，下一步要用
  2. 进入配置文件，我们要配置jdk 的路径：
    书写的位置为：

    进入书写模式的办法：
    输入i表示insert
    输入结束后，esc退出，并且shift+冒号，并且输入wq
sudo vi /etc/profile

export JAVA_HOME=/home/workspace/....(你自己刚才记录的)
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH
  1. 接下来我们测试java版本:
java -version

云服务器连接家用linux电脑_node.js_09


成功配置好了，接下来继续安装tomcat

14. 进入tomcat官网：https://tomcat.apache.org/download-90.cgi 选择对应版本的tomcat：

tomcat v7.0-------support-------->Java EE 6 and 6以上

tomcat v8.0-------support-------->Java EE 7 and 7以上

tomcat v9.0-------support-------->Java EE 8 and 8以上

下载这条内容，这个是给Linux用户的：

云服务器连接家用linux电脑_云服务器连接家用linux电脑_10


下载成功后，同样，将其放在xftp传输到新建的指定的文件夹中：

云服务器连接家用linux电脑_服务器_11

  1. 对其进行解压缩：

    输入：
sudo tar -xvf apache-tomcat-9.0.63.tar.gz

输入pwd同样 记录当前路径信息：

云服务器连接家用linux电脑_云服务器连接家用linux电脑_12

解压成功后配置：

vim /etc/profile

输入路径信息变量：

CATALINA_HOME=/home/workspace/tomcat9
CATALINA_BASE=/home/workspace/tomcat9
export CATALINA_HOME CATALINA_BASE

完成后，对文件进行更新：

source /etc/profile
  1. 启动tomcat：
    一定要先进入到tomcat的bin文件夹下面，再执行这句话：
./startup.sh

可能遇到报错说你没有找到logs文件，那么到指定的路径下面自己mkdir或者sudo mkdir logs即可

云服务器连接家用linux电脑_服务器_13


如图，已经成功启动！

但是测试：

ps -ef | grep tomcat

要是显示如下一长串红色的报错，就是有问题。没有问题则是如下：

云服务器连接家用linux电脑_部署Vue到服务器_14

  1. 但是目前还是 访问不了8080默认端口，查找原因：
    是不是防火墙没有开放8080端口?
    首先安装防火墙命令：
sudo apt install firewalld
输入下面命令：

firewall-cmd --state

云服务器连接家用linux电脑_vue.js_15


果然有问题：

首先要打开防火墙：

systemctl start firewalld

要输入ubuntu的密码：

云服务器连接家用linux电脑_云服务器连接家用linux电脑_16


输入结束后：

云服务器连接家用linux电脑_vue.js_17

爆出红色的错误的原因：要用sudo或者root用户操作：

云服务器连接家用linux电脑_vue.js_18


可以看到 当前状态是running

则开放8080端口

firewall-cmd --zone=public --add-port=8080/tcp --permanent

如图显示成功开启权限：

云服务器连接家用linux电脑_服务器_19


检查tomcat状态：

systemctl status tomcat.service

云服务器连接家用linux电脑_node.js_20


安装yum

sudo apt install yum

（若嫌每次都要sudo太过于麻烦，则可以直接输入：su或者sudo -i 进行root模式的切换）

如果一直出现这个错误:

云服务器连接家用linux电脑_服务器_21


则需要，在启动tomcat前，先执行：

unset CATALINA_HOME

之后再进行到bin的文件夹下，输入：

./startup.sh

出现以下界面，即为执行成功：

云服务器连接家用linux电脑_vue.js_22


配置默认tomcat端口号信息：

vi server.xml

cd ../bin

./shutdown.sh

./startup.sh

找到原因了，原来是tomcat路径配错了：

云服务器连接家用linux电脑_部署Vue到服务器_23


应该是下面的，原来的少了一级文件夹层级：

云服务器连接家用linux电脑_部署Vue到服务器_24


修改之后，重新更新

source /etc/profile

云服务器连接家用linux电脑_部署Vue到服务器_25


此时，startup和shutdown都没有问题了。这样才算正式启动成功了：

云服务器连接家用linux电脑_node.js_26


云服务器连接家用linux电脑_云服务器连接家用linux电脑_27

  1. 下面测试通过网址访问tomcat

无法访问

  1. 查找原因：
    首先排查你的防火墙是否关闭：
systemctl status firewalld.service

云服务器连接家用linux电脑_node.js_28


active 表示在正常启动状态

firewall-cmd --permanent --zone=public --add-port=8080/tcp
永久允许访问8080

firewall-cmd --reload
重新加载防火墙

firewall-cmd --zone=public --query-port=8080/tcp
尝试请求8080，查看能否请求成功
返回yes则可以

云服务器连接家用linux电脑_vue.js_29

  1. 在成功关闭防火墙之后，便可以访问tomcat服务器了：如下图

    并且之前配置过了域名解析，于是可以通过域名进行访问：

注意：在过程中可能出现无法通过xftp访问远程服务器文件等问题，可以通过对指定文件夹执行下列命令设置Linux权限：

例如webapps没有“其他用户组”的访问权限，则执行：
sudo chmod 777 webapps/

若要为其子目录也添加权限：
chmod 777 * -R webapps/

开始上传前端文件：

  1. 首先打包前端文件：
命令行执行：
npm run build

生成dist文件即为前端静态文件

  1. 这时候先移除原始的ROOT文件夹
rm -rf ROOT
  1. 接下来 首先把你的dist文件通过xftp上传到服务器ROOT的当前目录

之后移动dist并且创建新的ROOT，将dist文件放入ROOT目录中

mv dist ROOT

云服务器连接家用linux电脑_服务器_30


云服务器连接家用linux电脑_部署Vue到服务器_31


这就是我们所新建的前端静态文件

  1. 接下来在ROOT里面新建如下目录：
mkdir WEB_INF
cd WEB_INF
touch web.xml

结果如图：

云服务器连接家用linux电脑_vue.js_32

  1. 在WEB_INF文件夹中已经存在了一个名为web.xml的文件，对其内容进行编写：
    内容一致，可以直接复制使用
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
  <error-page>
      <error-code>404</error-code>
      <location>/index.html</location>
  </error-page>
</web-app>
  1. 再回到tomcat的bin文件目录，
    ./shutdown.sh ./startup.sh

之后重新访问指定端口号即可

踩坑记录：

如果你在xftp上传了新的代码之后，并且使用xshell重新启动了tomcat或者项目，发现网页资源没有改变：

  1. 使用shift+f5进行网页的内容刷新
  2. 若还是不行，并且排除了其他一切可能因素，那么就需要下一步操作：
  3. 使用xshell进行原始文件的删除，首先cd进入你需要清空的文件目录，输入 rm -rf * 清理一切文件夹中的内容
  4. 然后尝试重新上传文件，并且重新启动项目
    这个时候应该能够解决问题
    分析原因：应该是xftp出现了延迟等问题，大多是因为鼠标操作造成的！