本文将手摸手带你摸清楚一个网站从0到1的全过程

本文将手摸手带你摸透楚一个网站从0到1的全过程

从以下几个步骤展开：

服务器网站内容

翻译过来就是你把你的东西放到那里？他人通过哪些方法可以找到

域名

就是网路地址，一般我们简称“网址”

这个网路地址就叫网站域名。譬如说当我们输入腾讯的网站域名是，才能正确访问到腾讯QQ的网站了。域名是解析到IP上来访问，有了域名如何搭建web服务器，我们就不用输入IP来访问某个网站，这样便捷记忆。

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

链接地址：

域名的注册遵照先申请先注册为原则，当你要注册的域名，必须得先查询一下是否被注册，注册过的，就不容许再度注册了。这个申请域名的比较简单，自己去操作一下，才会了

备案

国家要求国外任何一个网站必须进行住建部ICP备案，假如没有备案，你的网站链接是难以访问的。

网站备案的目的就是为了避免在网上从事非法的网站经营活动，严打不良互联网信息的传播，倘若网站不备案的话，很有可能被查处之后取缔。

当前阿里云是可以直接通过手机顾客端直接去申请备案的，但是速率会比网站备案快好多，建议直接用手机顾客端去备案。

服务器

服务器这儿我们推荐华为云，由于可以薅羊绒

华为云开年采购季刚才上线

薅羊绒坐姿

第一步：扫描二维码注册华为云帐号（一定要扫码注册，否则难以获得无门槛代金券）

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

域名解析

到这儿我们早已得到了网站域名和服务器，而且她们都是分别独立的，我们须要将域名和网站主机关联上去

添加一条记录，将我们的华为云的网段IP填到记录值的位置

Web容器

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

假定你的服务器为centos系统

sudoyuminstallnginx

使用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项目build后的dist文件夹

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

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

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

注意这儿我们是上传的zip文件如何搭建web服务器，到了服务器你须要将目标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中文社区
编程技巧 · 行业秘闻 · 技术动向