创建基于vue项目的静态网站

前端瓦达希

于 2024-09-09 20:03:50 发布

阅读量1k

点赞数 17

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/MWNGTAIQI/article/details/142067500

版权

准备工作

阿里云购买ECS服务器

直接去阿里云控制台找，然后按需求（规格等）购买服务器：

注意：购买服务器时有个登录名和密码的设置，这个一定要保存好，后续登录服务器要用到

进入到购买的服务器实例，然后进行安全组配置，为使用第三方工具如Xshell登录服务器创建一个入口

添加的端口范围如下，我们一般选择SSH（22），HTTP（80），MySQL（3306），Redis（6379），其它按项目需求来

添加完安全组后，最好重启一下服务器

购买域名、域名解析、备案

购买域名：

同样在控制台寻找域名，然后查看需要注册的域名是否已被注册，没有就可购买

以下是部分后缀名选择参考，具体按项目需求选择：

.com域名

认知度和普及度：.com作为最早和最广泛使用的顶级域名，在全球范围内具有极高的认知度和普及度。当提到域名时，大多数人会首先想到.com。
适用场景：.com域名适合商业用途的网站，尤其适合需要打造品牌、吸引大量流量或提升品牌形象的企业网站。
注意事项：由于.com域名的普及度高，好的域名可能已经被注册，因此在选择时需要做好充分的查询和准备。

.cn域名

国家属性：.cn是中国的国家顶级域名后缀，代表中国。
适用场景：.cn域名适合在中国市场开展业务的主体，有助于提升在中国市场的品牌知名度和认可度。
注册条件：注册者需要符合中国主体要求，即个人注册者必须是中国公民，组织或企业注册者必须是在中国设立的合法实体。
资源情况：.cn域名的资源相对丰富，可能还能注册到一些比较好的短域名。

.top域名

寓意和认知：.top域名寓意品牌标杆，符合中国人的思维习惯，且在国际上也是顶级域名之一。
适用场景：.top域名适合一些高端品牌网站和追求卓越的网站来注册，无论是作为网站还是作为投资都具有良好的价值。
资源情况：虽然.top域名资源已经有所减少，但仍有不少有意义的域名可供选择。

.net域名

普及度和用途：.net域名在普及度上不如.com，但也是国际顶级域名之一。它通常适用于网络相关的组织和企业，特别是科技、技术或互联网行业的企业。
适用场景：如果你的企业属于这些行业，选择.net也是一个不错的选择

我这里选择的.top

域名解析：

同样在控制台寻找“云解析DNS”，将你的域名解析为ip地址

以我这里的jingnanbieyuan.top为例

选择“添加记录”，然后按提示填写信息，注意：如果主机记录是“www”，记录值是购买的ECS服务器的公网ip

如果不确定是否配置正确，可以选择“添加记录”右边的“域名检测”，检测域名解析是否生效

域名备案：

进行域名备案是网站能在国内被访问的前提，这一步万万不能少

然后按照提示和要求进行备案即可

购买SSL证书（非必选）

如果不购买SSL证书，用浏览器访问网站时的协议是HTTP，而使用的SSL后协议是HTTPS，HTTPS的安全性比HTTP高，访问基于http协议的网站时会显示该网站不安全

不购买对网站浏览的影响也不大，这个看项目的具体需求，如果是商业项目，涉及支付、个人信息隐私等相关问题，最好还是购买SSL

购买流程：

仔细阅读购买明细，按需求购买

如果只是测试的时候用，并不发布到云端，可以选择阿里云提供的这个免费的测试版本，这个测试版本的对域名有要求，不支持部分特殊域名，具体还是查看上面的公告信息

购买完证书后去创建证书

然后选择该证书右边的“证书申请”，提交申请，等待签发再进行后面的SSL部署工作，我这里就没有继续介绍关于SSL部署工作了

ECS服务器部署

下载使用的工具

1.下载并按提示安装Xshell工具，XSHELL - NetSarang Website，用来连接登录服务器

2.下载并按提示安装Xftp，XFTP - NetSarang Website (nncywl.cn)，用来传输文件或下载项目需要的包到服务器

部署过程

1.连接服务器：

下载成功后打开Xshell，点击“新建”，输入要连接的服务器公网ip,然后连接即可，我这里有了一个会话是因为已经连接了服务器并且设置了自动连接，如果是第一次连接可能还需要输入服务器的用户名和密码

确保服务器是在运行中，才会出现下面连接成功的情况

2.安装反向代理nginx：

用于处理http请求，你可以理解成我们的代码变成一个网页是靠他来实现的，代码内容的变化也是经过了nginx的处理转变成了网页内容的变化

这里主要介绍使用命令行（购买服务器是选择的是系统是CentOS）的方式安装nginx：

先安装必要的依赖：yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
然后安装nginx：yum -y install nginx

安装成功的话根目录root下会出现：

注意：如果是在nginx官网下载的，安装的nginx还只是.tar.gz压缩包，需要执行命令“tar -zxvf nginx-1.14.0.tar.gz”解压缩

3.修改配置文件：

输入命令“vim /etc/nginx/nginx.conf”，按下enter，再输入”E”表示(E)dit anyway进入配置文件中，然后按下”I”修改配置信息，配置文件底部出现下面情况表示正处于编辑状态

需要修改或添加的信息如下：

user：一定要填你购买服务器时的用户登录名（一般是root），否在会没有权限访问网站，即访问网站时可能会报403

server-name：网站域名

root：vue项目主文件html文件所放位置，一般在root文件夹下

location：这个块定义了当Nginx接收到以/（即根URL）开头的请求时应该如何处理这些请求，这里只介绍try_files $uri $uri/ /index.html，因为它是Nginx用于处理请求的关键，其他的都是固定的，它会按顺序尝试以下文件路径，直到找到存在的文件为止：

$uri：这是请求的URI（统一资源标识符），例如/about。Nginx会先尝试找到这个文件或目录。
/index.html：如果以上两步都没有找到文件，Nginx会返回根目录下的index.html文件。这对于单页应用（SPA）特别有用，因为它们通常只有一个HTML入口点，而应用的状态和路由则通过JavaScript管理。
$uri/：如果$uri对应的不是一个文件而是一个目录，Nginx会尝试在这个目录下查找index文件（通常是index.html，但这取决于Nginx的index指令，这里被注释掉了）。