учебник по nginx, написанный для внешнего интерфейса

внешний интерфейс

Учебник по nginx для новичков во фронтенде

предисловие

Я считаю, что большинство новичков во фронтенде не имеют доступа к работе, связанной с развертыванием.Как правило, они передают пакет кода на сервер или завершают обновление кода через CI или FTP.Что касается того, как развертывать код, как перейти от имени домена к пакету внешнего кода. , Многие игроки внешнего интерфейса на самом деле не использовали его, поэтому, естественно, они не знают об этом. Эта статья предназначена для того, чтобы помочь людям, которые не подвергались развертыванию, узнать развернуть фронтенд проект онлайн на сервере.В этой основной линейке я буду потихоньку знакомить всех с nginx

Помню на летних каникулах 2017 года, когда еще не начался второй год второкурсника, на тот момент я умел писать только немного простой код, а опыта работы с линуксом и эксплуатации и сопровождения у меня не было, я купил сервер на алибаба облаке импульсивно, плюс доменное имя, а доменное имя теперь было я больше не могу получить к нему доступ, я хотел создать сайт из чистого интереса в то время, но я не знал, как спросить за помощь из-за нехватки сил.После месяца метаний я наконец-то успешно развернул сервис wordpress на сервере, и последующая регистрация доменного имени тоже прошла успешно. ;

Я смутно помню, как летним вечером я сидел в гостиной, которая медленно темнела, с мелким потом, оставшимся на голове от нервозности, и сухими глазами от сосредоточенности. снова и снова; я, естественно, не хочу, чтобы все тратили на это время, что и является первоначальным намерением написать эту статью.

Предварительное знание

  • облачный сервер, Alibaba Cloud, Tencent Cloud и xx Cloud доступны, и есть большие скидки для первых покупок или сертификации студентов (в этой статье в качестве примера используется Alibaba Cloud)
  • Понимание основных команд Linux, то есть добавление, удаление и изменение различных файлов
  • Этот учебник основан на системе CentOS 7.5.Если это графический интерфейс или другие системы, команды могут быть не совсем такими же, но процесс такой же.Рекомендуется прочитать соответствующий учебник.
  • Связанные инструменты Загрузить файлыFTPИнструмент ssh поставляется с Alibaba Cloud

Важно: если базовая команда linux не будет. Не смотрите на следующее, идите и учитесь сейчас

среда сборки

Купите облачный сервер ECS, скидка некоторое время назад, менее 40 юаней в год за 1 ядро ​​2G~, у новичков есть долгосрочные скидки

подключиться к серверу

пройти черезУдаленные инструменты(CRT, Xshell) или встроенныйУдаленное подключениеВведите свой собственный сервер и выберите способ подключенияобщедоступный IP-адрес

image-20220113105611506

установить нгинкс

CentOS поставляется с командой yum, эта команда очень важна, поймите ее сами

Выполнение заказа

yum install nginx // 中途遇到需要确认的，直接确认即可

После завершения установки служба nginx доступна на хосте.Соответствующие команды приведены ниже.После завершения запуска

nginx

После завершения запуска браузер получает доступПубличный IP-адрес, вы можете получить доступ к домашней странице nginx по умолчанию

На данный момент, даже если развертывание nginx прошло успешно

путь к файлу, связанному с nginx

/etc/nginx/ // 配置文件
/usr/share/nginx/ // 默认前端代码存放处

Конфигурация по умолчанию/etc/nginx/nginx.conf, nginx слушает порт 80 в соответствии с конфигурацией по умолчанию, а порт 80 указывает папку /usr/share/nginx/html, поэтому вы получаете доступ к общедоступной сети ip -> общедоступной сети ip:80 -> /usr/share/nginx/ html, поэтому "Добро пожаловать вCentOS«Это перед тобой

​ Если вы хотите отображать не страницу по умолчанию, а отображать написанный вами проект, замените его напрямую/etc/nginx/nginx.confсерединаroot, поле - это путь вашего собственного пакета

Создайте сайт на порту 7777

​ Помимо развертывания нашего кода на порту 80 по умолчанию, его также можно развернуть на других портах, таких как 8888, 7777 и т. д.

Далее мы разворачиваем сайт на пользовательский порт

Здесь нужно обратить вниманиеnginx.confконфигурация одной линии в

Значение: все файлы конфигурации nginx в целевой папке вступят в силу автоматически.

По подсказке конфигурационного файла заходим в/etc/nginx/conf.d/Затем создайте test.conf и nginx.conf в соответствии с подстановочными знаками.conf.d/файл конфигурации под

Пишите контент через vi

server {
    listen       7777;
    server_name  _;

    root	/usr/share/nginx/test;
}

перейти в папку/usr/share/nginx/testСоздайте index.html под

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>我是7777端口</div>
</body>
</html>

Наконец, перезапустите nginx

Перезапуск nginx происходит мгновенно, об ошибках не сообщается, перезапуск выполнен успешно

nginx -s reload

Посетите наш развернутый проект ip:7777

Затем вы обнаружите, что не можете получить доступ, и время окончательного доступа истекло (==).Это связано с тем, что сервер ограничивает доступные порты.В это время вам нужно перейти в фоновое управление облаком, чтобы настроить группу безопасности

Добавьте правило группы безопасности в фоновом режиме сервера ESC.

Тогда вы можете получить к нему доступ в обычном режиме!

На этом развертывание первого проекта nginx завершено.

Развернуть проект vue

В приведенном выше примере мы уже можем завершить развертывание пользовательского сайта, как насчет реального проекта, например, развертывание проекта vue на порт 3006.

  1. Сначала напишите xxx.conf
server {
    listen       3006;
    server_name  _;
    
		 # 开启gzip相关配置
    gzip on;
    gzip_static on;
    gzip_min_length 2k;
    gzip_buffers 4 8k;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/x-icon application/javascript;
    gzip_comp_level 9;
    gzip_disable "MSIE [1-6]\.";

		# 站点代码路径
    root         /usr/share/nginx/client;
		# 单页应用必须设置（刷新404问题）
    location / {
    	try_files $uri $uri/ /index.html;
    }
}
  1. Загрузите упакованный код в целевую папку через FTP/usr/share/nginx/client(обратите внимание на название папки)
  2. перезапустить nginxnginx -s reload

На этом развертывание сайта завершено! Разве это не просто

Привязать доменное имя

взять это прямоip+портНехорошо давать доступ другим, каждый привязывает доменное имя с хорошей памятью к своему сайту, так как же nginx привязывает доменное имя?

  1. купить доменное имяwanwang.aliyun.com/domain/, домен регистрации…
  2. После завершения записи доменное имя можно использовать

Нам нужно изменить нашу конфигурацию nginx и изменить значение server_name на доменное имя, которое необходимо привязать;

server {
    listen       3006;
    server_name  xxx.com;
// ....

Добавить поддержку https

  1. подать заявку на https-сертификат,Управление цифровыми сертификатами, взяв в качестве примера Alibaba Cloud, отечественные производители облачных
  2. Поместите сертификат в папку на сервере, которую вы можете запомнить
  3. Изменить конфигурацию nginx
server { // # 将当前域名的http自动打到https
        listen  80;
        server_name     xxx.com;
        rewrite ^(.*)$  https://$host$1 permanent;
}

server {
    listen       443 ssl http2;
    server_name  xxx.com;
    ssl_certificate xxxx/yy.pem; # 证书
    ssl_certificate_key xxxx/yy.key; # 证书秘钥

    # ssl验证相关配置
    ssl_session_timeout  5m;    #缓存有效期
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;    #加密算法
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;    #安全链接可选的加密协议
    ssl_prefer_server_ciphers on;   #使用服务器端的首选算法
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    
		root   /usr/share/nginx/client;
    location / {   
    		try_files $uri $uri/ /index.html;
    }
}

Некоторые часто задаваемые вопросы

Примечание. Версия Linux, используемая в этой статье, — centos7.5, и конфигурация разных версий может не совпадать.

воплощать в жизньnginx -s reload, после команды перезапуска,нет реакции это нормально, nginx перезапускается за миллисекунды

ошибка перезапуска

Это сложнее, и слишком много возможностей сообщить об ошибках, поэтому невозможно привести эталонный случай.

Рекомендуется устранить проблему следующим образом.

  1. Переведите сообщение об ошибке. Если в нем указано, что определенная строка или столбец неверны, измените файл конфигурации напрямую.
  2. Не могу понять перевод, бери свою liunx версию и сообщай об ошибке в Baidu (гугл эффективнее)
  3. Не могу разобраться, а все остальное в норме.Учитывая возможность предыдущей неправильной работы, переделайте систему и перенастройте.

Ошибка доступа 404

Порт не настроен в nginx, проверьте, не настроено ли поле прослушивания в конфигурации nginx неправильно, и не забыли ли вы перезапустить

Ошибка доступа 502

После успешного запуска/перезапуска nginx при доступе к сайту появляется 502, проверьте, неверный ли адрес файла, на который указывает корневое поле в конфигурации nginx, и есть ли доступный файл

Доступ долгое время без ответа

Проверьте групповую политику безопасности облачного сервера, чтобы узнать, открыт ли порт, к которому вы в данный момент обращаетесь.

связанное предложение

Облегченная схема обновления внешнего интерфейса на основе sshСсылка на статью, это очень хорошо для личных проектов, очень удобно, одна строка команды для обновления кода

Фронтенд-решение для обновления на основе gitLab CI/CDСсылка на статью, проект компании рекомендует использовать это

Эпилог

​ Несмотря на то, что для развертывания сайта используется только nginx, все равно требуется много знаний, опытный разработчик может завершить развертывание сайта за полчаса, но для новичка сообщается об ошибке.

Если вы столкнулись с ошибкой, вы должны внимательно проверить сообщение об ошибке, Baidu и Baidu в основном могут получить ответ, если вы действительно не можете понять это, просто переделайте систему облачного сервера и начните все сначала;

Если вы столкнулись с проблемами, которые не могут быть решены в процессе обучения, перейдите в группу QQ 530496237, в группе есть ссылка на группу WeChat, и босс ответит на ваши сомнения~

Категории