Процесс разработки и развертывания full-stack проекта с разделением front-end и back-end

полный стек

В этой статье описан процесс разработки и развертывания full-stack проекта с разделением front-end и back-end, я продемонстрирую его шаг за шагом в виде демо. В этой статье я подытоживаю и делюсь своей радостью после того, как я, наконец, прогнал весь процесс через различные подводные камни (сам думаю об этом, и не знаю, правильно ли это).

Стек демонстрационных технологийreact + koa + Mongodbи сопутствующие технологии.

среда установки центос

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

yum update

установить ноды

Используйте yum для установки указанной версии узла

curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -

yum install -y nodejs

Вы можете проверить его после завершения установки.

node -v

npm -v

После установки NODE вы можете использовать npm для установки NVM и PM2.

npm i nvm pm2 -g

nvm используется для управления версиями узлов, а pm2 — для запуска служб узлов и демонов процессов.

Установить MongoDB

  1. Создайте исходный файл yum

    vim /etc/yum.repos.d/mongodb-org-4.0.repo

    Добавьте следующее

    [mongodb-org]
name=MongoDB Repository
baseurl=http://mirrors.aliyun.com/mongodb/yum/redhat/7Server/mongodb-org/4.0/x86_64/
gpgcheck=0
enabled=1

    Сохранить и выйти

  2. Установить MongoDB

    yum -y install mongodb-org

    После завершения установки настройте Mongodb. Просмотр и изменение файлов конфигурации

    vim /etc/mongod.conf

    bindIp изменен на 0.0.0.0 для поддержки удаленного доступа. В то же время установите dbPath и каталог необязательно. fork: true означает запуск mongod в фоновом режиме, чтобы вам не приходилось каждый раз перезапускать службу (обратите внимание, что при настройке dbPath вам необходимо сначала подтвердить существование каталога, если это папка, которая не существовала раньше вам нужно создать его вручную.).

    image-20200229164401471

  3. Запустить MongoDB

    Запустите Mongodb как файл конфигурации

    mongod --config /etc/mongod.conf

    После запуска служба работает в фоновом режиме, проверьте это

    mongo

    WX20200229-165420@2x

Установите Nginx

  1. Создайте исходный файл yum

    vim /etc/yum.repos.d/nginx.repo

    Добавьте следующее

    [nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key

    Сохранить и выйти

  2. Установите Nginx

    yum -y install nginx

  3. Запустить Nginx

    nginx

установка локальной среды

Эта машина не имеет ограничений пропускной способности на сервере и напрямую обращается к докеру.

Конкретные шаги установки docker см.woooooooooooooooooooooooooooooo.com/docker/mac О ...

Также используйте Docker для установки Mongo, Mongo-ExpressУуууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу.com/docker/dock…

После завершения установки проверьте mongo-express и откройте его.http://localhost:8081/

image-20200229180554241

Разработка бэкенд-проекта

построить базу данных

Сначала создайте базу данных, используйте команду

mongo

image-20200229184034640

Создайте новую демонстрационную базу данных, создайте новую коллекцию пользователей и вставьте часть данных {userName: 'tom', age: 18}.

Вы также можете использовать mongo-express для визуального управления базой данных, открытьhttp://localhost:8081/

image-20200229184253682

Вы можете увидеть только что созданную демонстрационную базу данных. Здесь вы также можете использовать форму в правом верхнем углу, ввести имя базы данных и нажать кнопку «Создать базу данных», чтобы создать новую базу данных.

Нажмите «Просмотр», чтобы просмотреть базу данных.

image-20200229184533849

Вы можете просмотреть созданную коллекцию пользователей, а затем нажать «Просмотр», чтобы просмотреть коллекцию.

image-20200229184615879

Вы можете увидеть только что вставленные данные. Вы также можете добавить данные визуально, нажав кнопку «Новый документ».

image-20200229184752654

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

Инициализация проекта

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

npm install -g koa-generator

Инициализировать проект

koa2 -e koa-demo

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

npm i

Стартовый проект

npm run dev

браузер открытhttp://localhost:3000/

image-20200229172147220

Измените проект, здесь я непосредственно перечислю измененный код.

image-20200229172951188

image-20200229173201562

В настоящее времяhttp://localhost:3000/вернуть привет напрямую

image-20200229173301772

ссылка на базу данных

Я использую mongoose для работы с mongodb и установки зависимостей

npm i mongoose

image-20200229181032693

Создайте новый /config/mongo.js и настройте ссылку. app.js вводит конфигурацию и инициализирует ссылки

image-20200229183156408

Новая модель данных

image-20200229183023869

добавить слой модели

image-20200229183044790

написать интерфейс

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

code

Все готово, тестируйте, заходитеhttp://localhost:3000/users/list

image-20200229185942392

Попробуйте добавить параметр

image-20200229190055076

На данный момент служба узла написана

Разверните программу узла на сервере

загрузить файлы

Существует множество способов загрузки файлов на сервер, таких как scp, ftp и т. д. Здесь я использую git. Сначала загрузите проект на github, затем войдите на сервер и используйте git для загрузки файлов удаленного хранилища. Не забудьте сгенерировать ключ SSH в Linux и добавить его на github.

(Здесь я использую метод ручного подтягивания кода. На самом деле есть более удобное решение для автоматического развертывания, которое будет продемонстрировано в развертывании фронтенд-проекта ниже)

GitHub.com/Тихая вода течет глубоко GI…

image-20200229192742313

Здесь я создал новую служебную папку в корневом каталоге, а затем клонировал проект. На данный момент путь к проекту — /root/service/koa-demo.

запустить службу

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

image-20200229191906727

Установить зависимости

npm i

Затем запустите проект с pm2 (скрипты в проекте package.json, сгенерированные скаффолдингом, имеют инструкции prd, начните с pm2)

npm run prd

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

  • Откройте порт 27017 для удаленного доступа к mongodb
  • Откройте порт 8081 для удаленного доступа к mongo-express.
  • Открытый порт 80, HTTP-сервер доступа

image-20200229193448686

После того, как добавление завершено, вы можете получить к нему доступ.Адрес — это IP-адрес внешней сети вашего сервера плюс номер порта.

Из соображений безопасности я в коде

image-20200229195823955

Попробуйте снова получить доступ к интерфейсу

image-20200229200054304

Только что добавленные данные были запрошены.

Настроить Nginx

Когда мы обращаемся к интерфейсу, мы определенно не будем напрямую использовать метод ip+port, обычно это метод доменного имени, поэтому нам нужно настроить Nginx для пересылки запроса. Мое доменное имя jsliushen.com, здесь я добавляю поддомен server.jsliushen.com для доступа к сервису. При этом сервис различается по пути.При обращении к server.jsliushen.com/demo/xxx пробрасывать на порт и добавлять ip

Сначала добавьте разрешение доменного имени в Alibaba Cloud

image-20200229200435996

Затем отредактируйте конфигурацию nginx

vim /etc/nginx/nginx.conf

image-20200229200652660

Мой файл проекта находится в корневом каталоге, и по умолчанию нет доступа к нему, мне нужно установить пользователя root. В конфигурации по умолчанию есть предложениеinclude /etc/nginx/conf.d/*.conf, то есть все файлы с суффиксом conf в папке conf.d вступят в силу. Создайте новый файл конфигурации server.conf непосредственно в conf.d.

vim /etc/nginx/conf.d/server.conf

image-20200229201347325

После сохранения перезапустите nginx, чтобы изменения вступили в силу.

nginx -s reload

проверить, посетитьserver.stillwaterflowdeep.com/demo/users/…

image-20200229201715982

Теперь у нас есть интерфейс, работающий онлайн. На данный момент внедрена разработка и развертывание серверной службы узла.

Разрабатывать front-end проекты

Инициализируйте проект с помощью react-create-app

yarn create react-app demo-client
cd demo-client

Изменить app.js

image-20200229221944140

Запустите проект локально

yarn start

image-20200229222454941

Разработка внешнего интерфейса завершена, интерфейс возвращается в нормальное состояние, осталось развернуть проект на сервере.

Разверните интерфейсный проект на сервере

Развертывание статических ресурсов переднего плана. Я использую метод автоматического развертывания webHooks.

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

Инициализируйте git в папке, куда вы хотите развернуть проект, здесь я помещаю /root/website/demo-client

git init
git remote add origin git@github.com:jsliushenGit/demo-client.git

На данный момент папка проекта все еще пуста.

интерфейс управления пакетами пряжи, используемый проектом, файл блокировки — yarn.lock, он также является глобальным, установленным на сервере пряжи

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo


yum install -y yarn

написать интерфейс

Интерфейс получает запросы от github, а затем подтягивает код из удаленного репозитория. Помещаем интерфейс в папку /root/service/webhook

image-20200301010500047

// index.js
const http = require('http');
const exec = require('child_process').exec;

http.createServer(function (request, response) {
  response.writeHead(200, {
    'Content-Type': 'application/json'
  });
  response.end();
	// 判断接口是否来自github，触发的行为是否是push
  if (request.headers['x-github-event'] && request.headers['x-github-event'] === 'push') {
    // 部署方法
    runCommand();
  }

}).listen(7777);

function runCommand() {
  exec("/root/service/webhook/deploy.sh", function (err, stdout, stderr) {
    if (err) {
      console.log('error:' + stderr);
    } else {
      console.log("stdout:" + stdout);
    }
  });
}

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

#! /bin/bash

WEB_PATH='/root/website/demo-client'

echo "start deployment"
# 进入要部署的项目文件夹
cd $WEB_PATH

echo "fetching from remote..."
# 拉取代码
git fetch --all

git reset --hard origin/master

echo "remove build"
# 删除之前构建的文件夹（最新的create-react-app中构建默认目录为build）
rm -rf /build

echo "install dependencies"
# 安装依赖
yarn

echo "start build"
# 开始打包
yarn build

echo "done"

Запустите службу с pm2

pm2 start /root/service/webhook/index.js --name webhooks

Работа на стороне сервера в основном завершена, не забываем про контролируемый службой порт 7777. Также нужно открыть порт 7777 в правилах группы безопасности Alibaba Cloud.

github настроить вебхуки

В настройках репозитория GitHUB добавьте веб -ook к веб-кавкам и заполните адрес запроса на URL-адрес полезной нагрузки, который является адресом интерфейса, написанного выше, Public Network IP + Port, а Nginx также можно настроить Чтобы стать доменным именем. Раздел Развертывание программы узла на сервер. Секрет - это ключ, установленный самостоятельно для проверки.

image-20200301011151157

После заполнения сохраните дополнение и попробуйте.

Веб-перехватчики аутентификации

Отправьте код локального проекта на удаленный склад и одновременно просмотрите журнал pm2.

pm2 logs webhooks

image-20200301022518582

Просмотрите папку проекта /website/demo-client/ после завершения развертывания.

image-20200301022635224

Файл успешно извлечен и успешно упакован.

Настройка внешнего интерфейса Nginx

Если вы хотите получить доступ к статическим файлам внешнего интерфейса, вам также необходимо настроить Nginx.Как и в предыдущей конфигурации внутреннего сервиса Nginx, создайте новый файл конфигурации в каталоге /etc/nginx/conf.d.

vim /etc/nginx/conf.d/demo_client.conf

image-20200301023226562

Установите доменное имя второго уровня demo-client.jsliushen.com и разрешите доменное имя второго уровня в Alibaba Cloud DNS.

image-20200301023645511

Теплый запуск nginx, конфигурация вступает в силу

nginx -s reload

Доступ к внешним проектам

Открытьdemo-client.jsliushen.com/

image-20200301023749049

На данный момент внедрена разработка и развертывание фронтенд-проекта.

иллюстрировать

Внешний и внутренний код демо в этой статье всегда будет храниться на github.Временно созданные доменные имена и сервисы второго уровня, а также некоторые открытые порты будут удалены через неделю после выпуска этой статья (2020.3.8). Пожалуйста, поймите, из соображений безопасности.

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

Категории