предисловие
мы в«Статья, которая поможет вам создать блог с помощью VuePress + Github Pages»Реализован VuePress для создания личного блога, в«Научит вас синхронизировать код с Github и Gitee»иКак Gitee автоматически развертывает страницы? Продолжайте использовать GitHub Actions!»Реализовал автоматическую синхронизацию кода и развёртывание Github и Gitee, но я всё-таки решил создать свой сайт, просто сделайте это, давайте приступим.
купить сервер
Из-за личного опыта работы мы выбрали облачный сервер Alibaba.Мы напрямую купили облачный сервер ECS, так называемый сервер ECS, прямо ссылаясь на официальное введение:
ECS (Elastic Compute Service) — это простая и эффективная вычислительная служба с масштабируемой вычислительной мощностью. Помочь вам создавать более стабильные и безопасные приложения, повысить эффективность эксплуатации и обслуживания, сократить расходы на ИТ и позволить вам больше сосредоточиться на основных бизнес-инновациях.
Для простоты,Прямая покупка в один клик:
Регион, зеркало, тип сети и т.д. Я прямо выбрал по умолчанию.
Учитывая, что в начале никто не заходил, сайт полностью статичен, даже если вы его купите, вы все равно сможете обновить и настроить его позже.Технические характеристики экземпляраЯ выбрал1 vCPU 1 GiB.
пропускная способность общедоступной сети
Способы оплаты
существуетпропускная способность общедоступной сетиЗдесь есть два способа оплаты: один основан на фиксированной пропускной способности, а другой — на трафике использования.
Так называемая фиксированная пропускная способность сначала оплачивается, а затем используется.Если пользователь выбирает пропускную способность 10 М, Alibaba Cloud выделяет пользователю эксклюзивную пропускную способность в 10 М. Официальная рекомендация подходит для клиентов со стабильными требованиями к пропускной способности сети в бизнес-сценариях, то есть трафик вашей страницы, он более стабилен, и правильнее выбрать фиксированную пропускную способность.
Так называемый трафик за использование, оплата по факту использования позже, выставление счетов в соответствии с конкретным потоком трафика, вычет в час, официальная рекомендация подходит для сценариев, в которых бизнес-сценарий имеет большое изменение требований к пропускной способности сети, таких как обычно низкое использование полосы пропускания, но прерывистые сценарии, когда возникают пики доступа к сети.
Выбор полосы пропускания
Если вы используете режим с фиксированной пропускной способностью, то какую пропускную способность следует выбрать, мы также можем сделать грубый расчет:
Так называемая пропускная способность сети относится к количеству данных, которые могут быть переданы в единицу времени (обычно 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 раз превышает скорость загрузки: пропускная способность 1 МБ соответствует 128 КБ/с, 2 МБ соответствует 256 КБ/с, 4 МБ соответствует 512 КБ/с и так далее.
Каков размер ресурса нашей страницы? Мы можем использовать браузерNetWorksПросмотр общего размера ресурсов страницы в параметрах, вот что я построилУчебный сайт TypeScriptНапример, откройте инструменты разработки для просмотра:
Мы видим, что размер переданного ресурса443kB, выбранный размер ресурса852kB, разница в том, что данные, передаваемые сервером и браузером, могут быть сжаты, например, сжатием gzip.
Когда клиент и сервер обмениваются рукопожатием, клиент сообщает серверу, поддерживается ли сжатие. Если сервер включает сжатие, а клиент поддерживает сжатие, сжатые данные будут переданы, а клиент распаковает их.headersизcontent-encodingПроверьте метод сжатия в:
Тогда фактический размер передачи здесь443kB, если мы хотим, чтобы пользователи могли открывать наш веб-сайт в течение 1 с, нам нужно как минимум443 / 128 = 3.46Пропускная способность M, конечно, очень грубая.Пропускная способность пользователя, оптимизация CDN и т. д. не учитываются, так что это просто случайный расчет.Если оптимизация сделана хорошо, даже если пропускная способность только 1M, это может принести хорошие результаты.
Если мы купим фиксированную полосу пропускания 4M на 1 месяц, указанная здесь цена составит 155,60 юаней.
Но если мы используем оплату за трафик, если 4М выполняется полностью в секунду (много людей посещают каждую секунду), общий трафик составляет: 4 * 128 КБ/с * 86400 = 11059200 КБ = 42,1875 ГБ, по цене 0,800 иен/ GB Прикинь, это около 33 юаней в день, и около 1000 юаней в месяц, поэтому, если у тебя относительно стабильный трафик, рекомендуется использовать фиксированную полосу пропускания.
Тогда давайте возьмем другой пример: если мой веб-сайт имеет 1000 PV каждый день, при условии, что они открывают домашнюю страницу, а затем забирают ее, генерируемый трафик, вероятно,1000 * 443KB = 0.42GB, ежедневная стоимость составляет 3 цента, около 9 юаней в месяц.
Учитывая, что в начале трафика не было, здесь я выбрал взимание платы за использование и установил максимальную пропускную способность сети на 25 Мб. пропускная способность сети немного ограничена.
1. Сбросьте пароль для входа в экземпляр
Если это покупка в один клик, мы должны увидеть такое приглашение:
После покупки мыhelp.aliyun.com/document_…Например сбросить пароль, иначе мы не сможем зайти на сервер.
2. Настройте группы безопасности
Мы знаем, что когда мы используем протокол HTTP для доступа к веб-сайту, порт мониторинга по умолчанию — 80, но облачный сервер Alibaba по умолчанию закрывает порт 80. Чтобы поддерживать доступ по HTTP, мы входим в фон управления ECS облачного сервера, выберите группу безопасности, а затем щелкните группу безопасности A:
нажмите手动添加, добавляем порт 80, эффект после добавления следующий:
3. Экземпляр входа
1. вход по ssh
# 语法：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
Таким образом, нам не нужно вводить пароль при повторном входе в систему. Обратите внимание, что мы написали~каталог, а это значит, что если мы поменяем пользователей, нам нужно настроить его снова таким образом.
2. Вход в консоль
мы входимКонсоль управления ECS, вы можете увидеть экземпляр нашего сервера, нажмите远程连接:
нажмите立即登陆, перенаправить наecs-workbench.aliyun.com/, введите пароль для входа.
Конечно, есть много способов войти, вы можете нажатьДокументация по ECS для облачных серверовСмотрите больше способов.
4. Установите Nginx
Введение в Nginx
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, чтобы она указывала на код в хранилище.
5. Установите Гит
Установить
yum install git
Создать пользователя git
Здесь мы думаем о проблеме, наблюдаем за SSH-адресом Github Clone, вот адрес склада моего блога в качестве примера:
Почему этот SSH-адресgit@github.comКогда начать?
существует«Достаточная интерфейсная команда Linux»В разделе мы упоминали, что синтаксис ssh:
ssh [USER@]HOSTNAME
Мы можем обнаружить, что на самом деле мы вошли на github.com как пользователь git.
Мы также придерживаемся этого подхода и создаем пользователя git для управления удаленным репозиторием. Конкретная операция находится в«Достаточная интерфейсная команда Linux»Это также было сказано в , вот краткая запись:
# 添加一个名为 git 的用户
adduser git
# 设置 git 用户的密码
passwd git
# 提权
sudo visudo
# 在文件里写入
git ALL=(ALL:ALL) ALL
# 保存提出，然后切换到 git 用户
su git
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, и не содержит исходных файлов проекта, поэтому нам нужно использовать хук для отправки кода в хранилище. . , перенесите отправленный код в другие каталоги, вот мы и в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:
6. Изменить конфигурацию Nginx
Теперь, когда код загружен, нам нужно изменить конфигурацию 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
В этот момент мы снова обновляем страницу, и стиль может вернуться к нормальному состоянию.
На данный момент мы завершили построение блога, и окончательный адрес доступа:www.ts.yayujs.com, который станет одним из лучших вводных руководств по TypeScript в Китае.
серия статей
Серия по созданию блога — это единственная серия практических руководств, которые я написал до сих пор, объясняя, как использовать VuePress для создания блога и развертывания его на GitHub, Gitee, персональных серверах и других платформах.
- Статья, которая поможет вам создать блог с помощью VuePress + GitHub Pages
- Учебник, который научит вас синхронизировать код GitHub и Gitee.
- Еще не используете GitHub Actions? проверить это
- Как Gitee автоматически развертывает страницы? Все еще используйте GitHub Actions!
- Интерфейсная команда Linux
- Достаточно простое объяснение конфигурации Nginx Location
WeChat: «mqyqingfeng», добавьте меня в единственную читательскую аудиторию Xianyu.
Если есть какие-либо ошибки или неточности, пожалуйста, поправьте меня, большое спасибо. Если вам это нравится или у вас есть вдохновение, вы можете стать звездой, что также является поощрением для автора.