Серьезный процесс развертывания проекта по проекту (общение и совместное использование)

1. Пишите впереди

Развертывание проекта — неотъемлемая часть веб-разработки, и каждый квалифицированный фронтенд-разработчик должен что-то об этом знать, а не просто игнорировать. Нельзя отрицать, что в первом опыте всего процесса развертывания будет много поворотов, но эти редкие опыты неумолимы для нашего понимания всего процесса и даже деталей ввода URL-адреса в браузере, появления содержимого веб-странице и взаимодействию с ней недостаточная или даже незаменимая роль.В этом мире, где сильные поедают слабых, только оружие в ваших руках достаточно острое, чтобы стойко противостоять свирепым врагам..

Примерно в начале года я был новичком и завершил свой первый в прямом смысле веб-сайт. Оглядываясь назад, я смутно ощущаю те головные боли, которые сопровождали меня в то время — препятствия, с которыми я столкнулся от покупки сервера до возможности открыть веб-сайт через браузер. Если хорошенько подумать, может быть, именно эти препятствия заставляют меня продолжать двигаться вперед. Сегодня 2020 год подходит к концу, и хорошо виден мой прогресс. Особенно когда снова сталкиваюсь с багом, который сложно решить, я уже не плююсь горечью, а спокойно с ним справляюсь. Я лично считаю, что умение правильно справляться с ошибками — это тоже своего рода способность, которая имеет большое значение для улучшения опыта программирования и личного уровня программирования.

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

Советы:FreesismИспользуемый передний технологический стек — Vue, Nestjs на стороне сервера и база данных MySQL. В этой статье будет показано, как локально упаковать проект Vue, развернуть его на удаленном сервере и получить к нему доступ, введя IP-адрес (адрес доменного имени) в браузере, а также развернуть службу Nestjs для предоставления интерфейса данных. Из-за моего ограниченного уровня следующий контент передается только как личный опыт.Если есть какая-либо ошибка, пожалуйста, исправьте меня вовремя, спасибо!

Практика — единственный критерий проверки истины.

2. Подготовка

Требуются следующие условия:

Собственный сервер.
Выберите подходящий инструмент для подключения к удаленному серверу и работы с ним.
Стойкое сердце и трудолюбивые руки.

В этой статье не пойдет речь о том, как выбрать и купить сервер, производителей на рынке много, вы можете выбрать подходящего именно вам. В настоящее время я использую облегченный сервер Alibaba Cloud, который купил в школе, здесь только для справки. Кроме того, рекомендуется приобрести доменное имя, которое вы хотите, и выполнить регистрацию доменного имени и разрешение доменного имени в соответствии с вашими потребностями.

Что касается серверной системы, здесь я выбираюUbuntu 18.4, системы на рынке похожи, поэтому я не буду подробно обсуждать их здесь.Если вам интересно, проведите собственное исследование. Инструменты, обычно используемые отдельными людьми для подключения и управления удаленными серверами, в основном включают Xshell, Xftp, WinSCP, Remote-SSH (плагин vs-code), на рынке их гораздо больше, просто выберите тот, который вам нравится. Далее будет использоваться Xshell 6 для демонстрации операции.

Все готово, поехали!

3. Инициализация

Шаг 1: Подключитесь к удаленному серверу.

Перейдите в консоль сервера и скопируйте общедоступный IP-адрес (вы также можете использовать связанное доменное имя вместо IP).

Используйте Xshell 6 для установки соединения.

Нажмите «Подключиться» и введите имя пользователя в соответствии с подсказкой (начальное имя пользователя обычноroot) и пароль, появится следующий интерфейс, то есть подключение прошло успешно.

PS: Не рекомендуется использовать следующие операции на удаленном сервере.rootУчетная запись, здесь для удобства демонстрации, лучше всего создать нового субпользователя, пожалуйста, найдите конкретные операции, такие как создание субпользователя и авторизация. Если используется подпользователь, если последующие операции не авторизованы, может появиться сообщение о том, что разрешения недостаточно.В этом случае добавьте команду перед командой.sudo, чтобы повысить свои привилегии.

Шаг 2: Обновите и установите необходимые пакеты.

Введите последовательно следующие команды:

sudo apt-get update # 更新软件列表

sudo apt-get upgrade -y # 对比各软件版本并更新

sudo apt-get install nodejs -y # 安装 nodejs

sudo apt-get install npm -y # 安装 npm

sudo npm install n -g # 安装 nodejs 版本管理器

n latest # 更新 nodejs 至最新版本，可自行选择，更新完成记得重新连接服务器输入 node -v 检查是否更新成功

sudo npm install pm2 -g # 安装 pm2，node 进程管理工具，这里主要用于持久化运行和监控 Nestjs 服务器

Шаг 3: Установите Nginx.

sudo apt-get install nginx -y # 安装 Nginx 服务器

service nginx start # 启动 Nginx 服务器

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

Шаг 4: Установите MySQL.

sudo apt-get install mysql-server -y # 安装 Mysql 服务

sudo systemctl status mysql.service # 检查 Mysql 服务是否开启，出现 active (running) 代表已开启

Войдите под пользователем по умолчанию:

sudo cat /etc/mysql/debian.cnf # 查看默认配置，找到 user 和 password 两项

mysql -u user -p # 使用默认用户登陆，user 替换为默认配置中的 user，根据提示输入 password

sudo service mysql restart # 重启 Mysql

mysql -u root -p # 使用 root 登陆，成功登陆即密码修改成功

После успешного входа в систему введите следующее оператор MySQL для изменения пароля пользователя root:

update mysql.user set authentication_string=password('密码') where user='root' and Host ='localhost';
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '密码';
flush privileges;
quit;

Чтобы облегчить отладку и объединение локальной базы данных и базы данных удаленного сервера, вот как удаленно подключить службу Mysql через SQLyog. Сначала проверьте, открыт ли на сервере порт 3306:

netstat -an | grep 3306 # 检查是否开放 3306 端口

Откройте порт 3306:

cd /etc/mysql/mysql.conf.d # 进入 Mysql 配置目录

vim mysqld.cnf # 使用 vim 编辑

После редактирования нажмите клавишу Esc, затем одновременно нажмите shift + : введитеwq, нажмите Enter, чтобы сохранить и выйти. Пожалуйста, ознакомьтесь с подробным описанием работы редактора vim самостоятельно, и ниже не будет предложено.

После открытия порта снова войдите в Mysql и откройте все разрешения на удаленное подключение для пользователя root.

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'IDENTIFIED BY '密码' WITH GRANT OPTION;

FLUSH PRIVILEGES; # 刷新权限数据

exit;

sudo service mysql restart # 重启 Mysql 服务

Используйте SQLyog для установки удаленного соединения:

После успешного подключения вы можете напрямую управлять удаленной службой Mysql, используя инструмент визуализации локально. На этом работа по инициализации закончена.

4. Автоматическое развертывание

Раньше мы использовали инструмент передачи, такой как Xftp, для копирования упакованного файла ресурсов на удаленный сервер. Сейчас у нас достаточно решений для автоматизации, чтобы мы могли свободно выбирать Когда нам нужно часто обновлять ресурсы, автоматизация экономит нам много операций. Здесь я в основном представляю Git Hooks, которые обычно используются отдельными людьми, которые могут быть автоматически развернуты локально с помощью всего нескольких строк команд git. Конкретные этапы операции следующие:

Шаг 1: Установите Git.

sudo apt-get install git -y

Шаг 2: Инициализируйте репозиторий Git.

cd /opt # 进入 opt 目录

git init website.git --bare # 初始化仓库

Шаг 3: Добавьте хук post-receive.

cd website.git/hooks # 进入 hooks 文件夹

touch post-receive # 新建 post-receive 文件

vim post-receive # 通过 vim 编辑该文件

стучатьIkey для входа в режим редактирования, напишите следующий код:

#!/bin/bash 
# 定义该文件使用 bash 执行

echo 'remote server: receive code...'
# 上面的输出信息当我们在本地 push 代码后出现

cd /website 
# 切换至用于存放代码的目录，可自主选择

git --git-dir=/opt/website.git --work-tree=/website checkout master -f
# 指定 git 文件以及要 checkout 的分支和目录

# 进入前端项目，安装和打包
cd /website/web 
echo 'web running npm install...'
npm install \ 
&& npm run build \
&& echo 'web builded.'

# 进入服务端项目，构建并运行
cd /website/server 
echo 'server running npm install...'
npm install \
&& npm run build \
&& echo 'server builded.' \
&& npm run pm2 \ 
&& echo 'done.'

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

sudo chmod +x post-receive

Шаг 4: Добавьте удаленную запись в локальный проект.

git remote add prod ssh://root@[远程服务器公网IP或域名]/opt/website.git 

git remote -v # 检查是否添加了指向远程服务器的 origin

После успешной настройки нам нужно только пройтиgit push prodКоманда может отправить локальный код на удаленный сервер, и сервер выполнит ряд операций, таких как последующая упаковка и запуск, в соответствии с файлом конфигурации после получения.

PS:npm installИнструкции Если установка идет слишком медленно, вы можете настроить зеркало Taobao. Пожалуйста, обратитесь к инструкции по его настройке. Инструкции в файле после получения могут быть записаны в соответствии с реальной ситуацией в проекте, например, как указано выше.npm run pm2, который фактически выполняетpm2 startOrRestart pm2.json, используемый для запуска и мониторинга служб Nestjs. pm2.json — это файл конфигурации PM2, щелкните документацию по PM2 для конкретной конфигурации —Конфигурация JSON, вы также можете напрямую использовать команду PM2, которая не будет здесь повторяться, подробности см. в документации.

5. Изменить конфигурацию Nginx

Сила Nginx неоспорима, и ее не следует преувеличивать. Как передний конец, который никогда не был в контакте с ним, он может показаться незнакомым или даже пугающим. Если говорить из личного опыта, то я был сбит с толку, когда впервые посмотрел на его конфигурационный файл, каждый раз, когда я его модифицировал, я был осторожен, опасаясь ошибиться и не иметь возможности вернуться назад. Однако, настроив его самостоятельно несколько раз, страх перед ним постепенно исчез, что также заставило меня понять истину - все сложно заранее и легко в будущем.

Нечего сказать, сразу переходим к шагам настройки.

Шаг 1: Создайте новый файл конфигурации в каталоге /etc/nginx/sites-enabled.

В каталоге с включенными сайтами хранится текущая включенная конфигурация сайта, и мы можем создать несколько виртуальных хостов по мере необходимости. Например, мое основное доменное имя -www.striveforus.com/указать на мойсайт блога.

cd /etc/nginx/sites-enabled 

touch striveforus.com.conf # 创建站点配置文件，名字自取，记得加上 conf 后缀

vim striveforus.com.conf # 编辑该文件

Нажмите клавишу I и напишите следующий код:

server {
    listen      80; # 监听 80 端口
    listen      [::]:80; # 同上，IPv 格式
    server_name www.striveforus.com; # 要匹配的域名，可以配置多个，也可以配置子域名。
    
    # 根资源地址，我将前端项目打包后的资源文件存放在 server 目录下，作为 Nginx 静态资源。
    # 这里可以按自己需求修改。
    root  /website/server/mobile/;
    index /index.html; # 根资源地址下的根文件
	
    # 前端数据接口反向代理配置，前端 axios 配置中的 baseURL 为 /web/api
    # 匹配以 /web/api/ 开头，反向代理到 Nestjs 服务器（确保运行端口与下面一致）处理
    location /web/api/ {
        proxy_pass http://127.0.0.1:3000/; 
    }

    # 通用匹配
    location / {
        # 解决 spa 跳转路由后刷新 404
        try_files $uri $uri/ /index.html;
    }
}

После сохранения и выхода перезапустите службу Nginx:

service nginx reload

Затем откройте браузер и введите URL:

Вышеупомянутая базовая конфигурация выполнима, но фактические потребности часто бывают больше.Например, вам нужно установить имена поддоменов, установить заголовки http, сделать переходы, перенаправления, включить сжатие gzip и т. д., вам нужно продолжать добавлять конфигурации. .

Шаг 2: При необходимости добавьте конфигурацию.

Например, сейчас у меня есть требование добавить фон управления на веб-сайт, но я не хочуwww.striveforus.com/xxxпод доступом, но через что-то вродеadmin.striveforus.comДоступ к таким поддоменам осуществляется, а интерфейсные упакованные ресурсы используются как статические ресурсы на сервере Nestjs. Мой обходной путь выглядит следующим образом:

Сначала добавьте запись под основным доменным именем.

Затем добавьте файл конфигурации виртуальной машины в каталог с поддержкой сайтов.

touch admin.striveforus.com.conf # 新增

vim admin.striveforus.com.conf # 编辑

Напишите следующий код:

server {
    listen      80; 
    listen      [::]:80;
    server_name admin.striveforus.com;

    location / {
        # 确保 Nestjs 服务在 3001 端口
        proxy_pass http://127.0.0.1:3001/;
    }
}

Перезапустите службу Nginx после сохранения и выхода:

service nginx reload

Тест в открытом браузере:

Конфигурация поддомена прошла успешно. Есть много других конфигураций, и я не буду показывать их здесь по отдельности, вы можете найти их с помощью небольшого поиска. Если вам лень настраивать его самостоятельно, здесь я рекомендую веб-сайт, который автоматически генерирует конфигурацию Nginx —NGINXConfig, вы можете создавать файлы конфигурации в соответствии с вашими потребностями, что очень удобно и быстро.

Шаг 3: Обновите https.

О том, почему я должен обновить https, а также о его преимуществах, чтобы не повторять их здесь, проконсультируйтесь сами. Ключ заключается в том, чтобы получить обновленный https-сертификат, как правило, за плату, но есть бесплатные, бесплатные для изучения Интернета. Я лично использую временныйLet's EncryptБесплатный сертификат, тоже рекомендую его всем, потому что он действительно удобен, просто выберите сервер и систему, выполните шаги установки ниже.

6. Резюме

В этой статье в основном представлен весь процесс развертывания личного фронтенд-проекта онлайн, включая следующие моменты:

Как подключиться к удаленному серверу, установить и обновить необходимые инструменты.
Как автоматизировать с помощью Git Hooks.
Измените конфигурацию Nginx в соответствии с вашими потребностями и обновите https.

Добро пожаловать в мой блог -Freesism, Общайтесь вместе.

Ну, это все для этой статьи.

Спасибо за чтение и добро пожаловать поделиться!