域名解析服务器地址_手把手教你搭建个人网站（服务器篇）

本文将带您了解一个网站从0到1的整个流程。

从以下步骤开始：

服务器

网站内容

翻译过来就是你把你的东西放在哪里？别人怎么能找到呢？

域名

它就是网络地址，通常我们称之为“网站地址”。

这个网络地址称为网站域名。例如，当我们输入腾讯网站的域名时，我们可以正确访问腾讯QQ网站。域名解析为IP进行访问。有了域名，我们访问网站就不需要输入IP了，这样更容易记住。

如何申请网站域名？我以阿里云万网为例：

链接地址：

域名注册遵循先申请、先注册的原则。当您想要注册域名时，首先要检查该域名是否已被注册。如果已经注册过，则不允许再次注册。申请域名相对简单。只要你自己做就可以了。

归档

国家要求国内任何网站都必须在工信部备案。如果没有注册，您的网站链接将无法访问。

网站注册的目的是为了防止互联网上的非法网站经营活动，打击互联网不良信息的传播。如果网站未注册，则可能会受到调查并被关闭。

目前阿里云可以通过手机客户端直接申请注册，速度比网站注册快很多。建议直接使用手机客户端注册。

服务器

服务器的话，推荐华为云，可以薅羊毛。

华为云一年一度的采购季刚刚启动

放羊羊毛姿势

第一步：扫描二维码注册华为云账号（必须扫描二维码注册，否则无法获得免门槛优惠券）

云服务器低至88元/年，是正经的云服务器

域名解析

至此我们已经获得了网站域名和服务器，但是它们都是独立的。我们需要将域名与网站主机关联起来。

添加一条记录，将我们华为云的公网IP填写到记录值中。

网络容器

这里我们以Nginx为例。 Nginx 是一个免费、开源、高性能的 HTTP 和反向代理服务。

假设你的服务器是系统

须藤 yum nginx

使用yum安装Nginx时，Nginx配置文件在/etc/nginx目录下

sudo systemctl enable nginx # 设置开机启动 
nginx start # 启动 nginx 服务
nginx stop # 停止 nginx 服务
nginx restart # 重启 nginx 服务
nginx reload # 重新加载配置，一般是在修改过 nginx 配置文件时使用。

验证 Nginx 是否启动成功。您可以在浏览器中打开它。您将看到默认的 Nginx 欢迎页面，类似于下图。

网站内容

这一步我们已经有了域名、服务器、web容器，只需要往容器里塞东西就可以了。以Vue为例，我们首先需要获取Vue项目构建后的dist文件夹。

npm run build //将会产出dist文件

用最原始的方式将dist上传到服务包

scp dist.zip 用户名@服务器公网ip:/home/vueTest

请注意，我们在此处上传 zip 文件。当你到达服务器时，你需要解压目标zip文件。

// 通过ssh登录
ssh 用户名@服务器公网ip

// 进入目标文件解压刚刚上传的zip包
cd /home/vueTest
unzip dist.zip

最后我们配置nginx

// 进入编辑nginx conf
vi /etc/nginx/conf.d/vueTest

server
{
    listen 80;
    server_name 你的域名;
    index index.php index.html index.htm default.php default.htm default.html;
    // 指向你的静态资源
    root /home/vueTest/dist;
}

配置完成后，重启nginx

nginx -t // 检查nginx配置是否正常
nginx reload // 重启nginx

毫不奇怪，此时在浏览器中输入您的域名应该能够看到您的应用程序。

推荐阅读：
收藏 | 移动端H5开发常用技巧总结
Vue3.0 所采用的 Composition Api 与 Vue2.x ...
浅谈大型项目前端架构设计
深入浅出 Vue Mixin
JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

VUE中文社区
编程技巧 · 行业秘闻 · 技术动向