关于前端:一篇从购买服务器到部署博客代码的详细教程

咱们在《一篇带你用 VuePress + Github Pages 搭建博客》实现了 VuePress 搭建集体博客，在《一篇教你代码同步 Github 和 Gitee》和《Gitee 如何主动部署 Pages？还是用 GitHub Actions!》实现了代码主动同步和部署 Github 和 Gitee，但我最终还是决定本人建站，说干就干，那咱们开始吧。

因为集体的工作经验，抉择了阿里云服务器，咱们间接买个云服务器 ECS，所谓 ECS 服务器，间接援用官网的介绍：

云服务器 ECS（Elastic Compute Service）是一种简略高效、解决能力可弹性伸缩的计算服务。帮忙您构建更稳固、平安的利用，晋升运维效率，升高 IT 老本，使您更专一于外围业务翻新。

为了简略起见，间接一键购买：

地区、镜像、网络类型等我间接抉择了默认。

思考到一开始也没有什么人拜访，网站齐全是动态的，即使买了，当前还能够升降配置，实例规格 我抉择了 1 vCPU 1 GiB。

在 公网带宽 这里，有两种付费形式，一种是按固定带宽，一种是按应用流量。

所谓按固定带宽，先付费后应用，如果用户抉择 10M 带宽，阿里云就会划分 10M 独享带宽给用户，官网倡议实用于业务场景对于网络带宽要求比较稳定的客户，也就是说你的页面流量比较稳定，抉择固定带宽会更适合一些。

而所谓按应用流量，先应用后付费，依据具体应用的流量计费，每小时扣费，官网倡议实用于业务场景对网络带宽需要变动较大的场景，如平时带宽应用较低但间歇性的呈现网络拜访顶峰的场景。

如果你应用固定带宽模式，那么抉择多少带宽是适合的呢，咱们无妨大抵的算一下：

所谓网络带宽是指在单位工夫（个别指的是 1 秒钟）内能传输的数据量。网络和高速公路相似，带宽越大，就相似高速公路的车道越多，其通行能力越强，简略的来说，带宽越大，网站的访问速度越快。

而 1M 带宽对应的下载峰值就是 128KB/S，这是因为云厂商提供的云服务器带宽的单位是 bit（比特），咱们通常说的 1M 残缺写法其实是 1Mb/s，留神这其中的 b 是小写的。而用户下载速度应用的单位是 Byte（字节），1Byte（字节）= 8bit（比特），所以 1Mb = 1/8MB = 0.125MB，咱们晓得 1MB = 1024KB，所以 1Mb = 0.125MB = 128KB，当然你也能够这样换算：

1Mbit/s = 1024kbit/s = 1024/8(KByte/s) = 128(KByte/s)

总之带宽是下载速度的 8 倍，1M 带宽对应下载速度是 128KB/s，2M 对应 256KB/s，4M 对应 512KB/s，依此类推。

那咱们的页面的资源大小是多少呢？咱们能够在浏览器的 NetWorks 选项中查看页面的总资源大小，这里以我搭建的 TypeScript 学习站点为例，关上开发工具查看：

咱们能够看到已传输的资源大小为 443kB，所选资源大小为 852kB，之所以会有差异，是因为服务器和浏览器传输的数据是能够被压缩的，就比方 gzip 压缩。

当客户端和服务端握手的时候，客户端会通知服务端是否反对压缩，如果服务端开启了压缩，且客户端反对压缩，便会将压缩后的数据传输过来，客户端再进行解压操作，咱们能够在 headers 的 content-encoding 中查看压缩形式：

那这里理论传输的大小，就是 443kB，如果咱们心愿用户可能在 1s 之内就关上咱们的网站，咱们至多须要 443 / 128 = 3.46 M 的带宽，当然这样算，十分的毛糙，用户的带宽、CDN 优化等等都没有思考进去，所以就是这么轻易一算，如果优化做的好，即使只有 1M 带宽，也能够带来不错的成果。

如果咱们 4M 的固定带宽买 1 个月，这里给的价格是 155.60 元。

但如果咱们应用按流量付费，如果 4M 每秒都跑满（每秒都有很多人拜访），总共的流量为：4 128KB/S 86400 = 11059200KB = 42.1875GB，依照￥0.800/GB 的价格算，每天是大略是 33 元，一个月大略是 1000 元左右，这也就是为什么，如果你的流量比较稳定，会倡议应用固定带宽。

那咱们再算一个例子，如果我的网站每天有 1000 PV，假如他们关上了首页就撤了，大略产生的流量为 1000 * 443KB = 0.42GB，每天的费用为 3 毛钱，一个月大略是 9 元。

思考刚开始也没有什么流量，这里我抉择了按应用流量计费，并设置了最大网络带宽为 25M，之所以设置最大网络带宽，是思考到忽然暴发的流量产生较高的费用，咱们指定答应的最大网络带宽进行一点限度。

如果是一键购买，咱们应该会看到这样一则提醒：

在购买后，咱们依据这个页面的 https://help.aliyun.com/document_detail/25439.html 的操作示例，重置一下明码，否则咱们无奈登陆服务器。

咱们晓得，当咱们应用 HTTP 协定拜访网站的时候，默认监听的是 80 端口，但阿里云服务器默认敞开 80 端口，为了能反对 HTTP 拜访，咱们登陆云服务器 ECS 治理后盾，抉择平安组，再点击第一个平安组：

点击 手动增加，增加 80 端口，增加完的成果如下：

# 语法：ssh root@< 实例的固定公网 IP 或 EIP>

# 示例：ssh root@47.99.XX.XX

# 输出实例登录明码
# 如果呈现 Welcome to Alibaba Cloud Elastic Compute Service ! 示意胜利连贯到实例。

登陆后如果咱们一段时间没有操作，再操作的时候就会须要从新登陆，又要输出一次明码，为了可能主动登陆，咱们须要：

# 在本地起一个终端，获取本地公钥
cat ~/.ssh/id_rsa.pub

# 登陆服务器，将获取的公钥写入服务器的 authorized_keys
echo "这里批改为你的公钥内容" >> ~/.ssh/authorized_keys

这样咱们再次登陆的时候就不须要输出明码了。留神，咱们写入的是 ~ 目录里，这就意味着如果咱们切换了用户，是须要再依照这个形式配置一遍的。

咱们登录 ECS 治理控制台，能够看到咱们的服务器实例，点击 近程连贯：

点击 立刻登陆，跳转到 https://ecs-workbench.aliyun.com/，输出明码，即可登陆进去。

当然登陆进去的形式还有很多，能够点击云服务器 ECS 文档查看更多形式。

Nginx 是一款轻量级的网页服务器、反向代理服务器。相较于 Apache、lighttpd 具备占有内存少，稳定性低等劣势。它最常的用处是提供反向代理服务。

# 装置
yum install -y nginx

# 启用 Nginx
systemctl start nginx

# 设置为在系统启动时主动启动
systemctl enable nginx

成果是：

此时咱们在浏览器中输出服务器的 IP，如果看到上面这样的页面提醒，阐明启用胜利：

咱们创立一个用于测试的 index.html 文件，放在 /home/www/website/ 目录下

# 创立目录
mkdir -p /home/www/website

# 进入目录
cd /home/www/website

# 创立文件
touch index.html

# 写入内容
echo '<!doctype html><html><head><meta charset="utf-8"><title>Hello World!</title></head><body>Hello World!</body></html>' > index.html

# 进入配置文件目录
cd /etc/nginx

# 批改配置文件内容
vim nginx.conf

在 location / {} 中增加内容，使得拜访首页的时候，会返回方才创立的文件：

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

            # 这里是增加的内容
        location / {
          root /home/www/website/;
          index index.html;
        }

        error_page 404 /404.html;
            location = /40x.html { }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {}}

保留退出批改后，从新加载配置文件：

# 从新加载配置文件
systemctl reload nginx

此时咱们关上浏览器输出服务器，IP，就能够看到配置失效了：

至此，咱们实现了 Nginx 的根本配置，接下来，咱们将博客仓库代码上传到服务器上，再批改 Nginx 配置指向仓库中的代码即可。

yum install git

这里咱们思考一个问题，察看 Github Clone 时的 SSH 地址，这里以我的博客仓库地址为例：

为什么这个 SSH 地址是以 git@github.com 结尾呢？

在《一份前端够用的 Linux 命令》中，咱们讲到了 ssh 的语法为：

ssh [USER@]HOSTNAME

咱们能够发现，其实这里是以 git 用户的身份登陆了 github.com。

咱们也效仿这种形式，创立一个 git 用户治理近程仓库。具体的操作在《一份前端够用的 Linux 命令》中也有讲过，这里简要写一下：

# 增加一个名为 git 的用户
adduser git
# 设置 git 用户的明码
passwd git
# 提权
sudo visudo
# 在文件里写入
git ALL=(ALL:ALL) ALL
# 保留提出，而后切换到 git 用户
su git

如果咱们当初应用 git 用户登陆服务器：

ssh -v git@8.141.xxx.xxx

咱们仍然须要输出明码，为了免登录，咱们须要再做一遍雷同的操作：

# 进入用户主目录
cd ~

# 创立 .ssh 目录
mkdir .ssh && cd .ssh

# 创立 authorized_keys 文件
touch authorized_keys

# 在本地起一个终端，获取本地公钥
cat ~/.ssh/id_rsa.pub

# 登陆服务器，将获取的公钥写入服务器的 authorized_keys
echo "这里批改为你的公钥内容" >> ~/.ssh/authorized_keys

# 给相干文件增加执行权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

此时，咱们再以 git 用户登入服务器，就能够间接登陆。

# 进入代码仓库目录
cd /home/www/website

# 赋予 git 用户权限
sudo chown git:git /home/www/website

# 创立代码目录
mkdir ts.git

# 进入代码目录
cd ts.git

# 初始化
git init --bare .

至此，咱们生成了一个近程仓库地址，它的 SSH 地址是：

git@8.141.152.253:/home/www/website/ts.git

这里咱们应用 git init --bare 初始化仓库，它与咱们常应用的 git init 初始化的仓库不一样，你能够了解为它专门用来创立近程仓库，这种仓库只包含 git 版本控制相干的文件，不含我的项目源文件，所以咱们须要借助一个 hooks，在有代码提交到该仓库的时候，将提交的代码迁徙到其余目录，这里咱们在 ts.git 同级目录下创立了一个 ts 文件夹，用于寄存提交的源代码文件：

# 进入 hooks 目录
cd hooks

# 创立并编辑 post-receive 文件
vim post-receive

# 这里是 post-receive 写入的内容

#!/bin/bash
git --work-tree=/home/www/website/ts checkout -f

# 赋予执行权限
chmod +x post-receive

# 退出目录到 ts.git 同级目录并创立文件
cd ../../ && mkdir ts

在《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们为了不便提交代码，写了一个 deploy.sh 的脚本，当初批改脚本文件：

git push -f git@8.141.152.253:/home/www/website/ts.git master

执行脚本

sh deploy.sh

执行结束后，咱们能够在 ts 文件夹里查看到提交的代码：

当初代码曾经上传上去了，咱们须要批改 Nginx 的配置，让用户拜访首页的时候能指向到 index.html 文件。

# 批改配置文件
cd /etc/nginx

# 拿到权限
sudo chown git:git nginx.conf

# 编辑配置文件
vim nginx.conf

# 这里是批改的内容
location / {
    alias /home/www/website/ts/;
    index index.html;
}

# 从新加载 nginx 配置文件
sudo systemctl reload nginx

此时，咱们在浏览器中输出服务器的 IP 地址，发现曾经能够拜访到咱们的页面，但就是款式错乱了，咱们查看一下申请，会发现申请的地址都是 learn-typescript 结尾：

learn-typescript 是咱们设置的 baseurl，咱们能够批改 baseurl，或者咱们间接再加一个 nginx 配置：

location ^~ /learn-typescript/ {alias /home/www/website/ts/;}

批改完不要遗记执行这句，配置才会失效：

sudo systemctl reload nginx

此时咱们再刷新下页面，就能够款式恢复正常了。

至此，咱们实现了博客的搭建，最终的拜访地址是：http://www.ts.yayujs.com，这将会是中国最好的 TypeScript 入门教程之一。

博客搭建系列是我至今写的惟一一个偏实战的系列教程，解说如何应用 VuePress 搭建博客，并部署到 GitHub、Gitee、集体服务器等平台。

一篇带你用 VuePress + GitHub Pages 搭建博客
一篇教你代码同步 GitHub 和 Gitee
还不会用 GitHub Actions？看看这篇
Gitee 如何主动部署 Pages？还是用 GitHub Actions!
一份前端够用的 Linux 命令
一份简略够用的 Nginx Location 配置解说

微信：「mqyqingfeng」，加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。

关于前端:一篇从购买服务器到部署博客代码的详细教程

前言

买服务器

公网带宽

付费形式

带宽抉择

1. 重置实例登陆密码

2. 配置平安组

3. 登陆实例

1. ssh 登陆

2. 控制台进入

4. 装置 Nginx

Nginx 介绍

装置和启用

创立测试文件

批改配置文件

5. 装置 Git

装置

创立 git 用户

git 用户免登

创立近程仓库

push 代码到服务器

6. 批改 Nginx 配置

系列文章

Just My Socks（注册教程内含优惠码）

关于前端:一篇从购买服务器到部署博客代码的详细教程

前言

买服务器

公网带宽

付费形式

带宽抉择

1. 重置实例登陆密码

2. 配置平安组

3. 登陆实例

1. ssh 登陆

2. 控制台进入

4. 装置 Nginx

Nginx 介绍

装置和启用

创立测试文件

批改配置文件

5. 装置 Git

装置

创立 git 用户

git 用户免登

创立近程仓库

push 代码到服务器

6. 批改 Nginx 配置

系列文章

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）