Еще в 90-е годы в Интернете почти все сайты были статичными. Но по мере роста количества пользователей Интернета мы хотим отображать богатое содержимое. Затем появляется новая архитектура - [Front - ›Server -› DB], такая как LAMP (Linux, Apache, MySQL, PHP). WordPress - один из самых известных. Но время летит, статичные сайты вернулись! Почему?
Почему статические сайты
1. Скорость. Несомненно, статические сайты работают очень быстро.
2. Безопасность. Отсутствие посредника означает низкую угрозу внедрения кода. Отсутствие плагинов означает, что вам не нужно беспокоиться о последней версии для защиты вашего динамического сайта.
3. Низкая цена. БЕСПЛАТНЫЕ услуги хостинга, такие как Github-Pages или Netlify, по сравнению с сервером $ xx / месяц только для веб-сайта блога или компании. Твой выбор.
4. Легко перенести. Мой сайт LAMP (не WordPress) подвергся DDoS-атаке, и этот VPS-сервер был остановлен автоматически до того, как я смог войти в систему. Я попросил поставщика разрешить мне войти в систему и сделать резервную копию последних данных из БД, но получил отказ. Они сказали: «У вас есть только два варианта: полностью переустановить сервер и сменить IP-адрес или уйти отсюда». Я переехал. Да, без последней БД. К тому же миграция стоила мне много времени. Но если бы это был статический сайт с лямбдой…
Нет необходимости в Circle-CI, достаточно Netlify
да. Ты прав. Вы можете записать свой веб-сайт в Netlify с одним или даже без netlify.toml.
Но тесты очень важны для меня, я хочу протестировать свой сайт перед их публикацией. Итак, необходим CI-инструмент.
Почему Circle-CI
Я не уверен, что Circle-CI лучший вариант. Но это Docker поддерживается так же, как Gitlab-CI. Так что мне легче понять, как работает Travis-CI. Также возможны частные репозитории CI Github.
Где строить
Есть два способа развернуть ваш сайт.
1. протестируйте в Circle-CI, используйте веб-перехватчик для запуска Netlify, сборки и развертывания Netlify
2. Тест - ›сборка в Circle-CI, отправка собранных файлов в Netlify с помощью netlify-cli.
Из-за функции кеширования в circle-ci тестирование и построение в circle-ci выполняется намного быстрее. Кроме того, если вы можете перейти на другой хостинг с изменением только последнего шага.
Поэтому выбираю способ №2.
Обсуждение дешево, покажи код.
Начнем
Среда
Поскольку я использую gatsbyjs, docz, storybook, next.js для создания своих веб-сайтов. Я хочу скомпилировать их на сервере узлов.
executors: node: docker: - image: circleci/node:8
Кеш
npm с package-lock.json работает быстро.
пряжа с yarn.lock быстрее.
пряжа с yarn.lock и кеш-камнями.
Поскольку package.json меняется нечасто, в этом случае отлично подходит кеш.
Определим несколько вариантов для кеширования.
aliases: restore_cache: &restore_cache restore_cache: name: Restore Npm Package Cache keys: - yarn-cache-netlify-{{ checksum "yarn.lock" }} install_node_modules: &install_node_modules run: name: Install dependencies command: yarn save_cache: &save_cache save_cache: name: Save NPM package cache key: yarn-cache-netlify-{{ checksum "yarn.lock" }} paths: - ./node_modules
Вакансии
Как я уже упоминал ранее, я хотел бы разделить этапы «тестирование -› сборка - ›развертывание» для обеспечения скорости и гибкости.
тест
test: executor: node steps: - checkout # Restore cache at second time - <<: *restore_cache # Install for first time - <<: *install_node_modules # Cache the ./node_modules before test. - <<: *save_cache - run: name: Test command: yarn test
Как вы уже заметили, мы используем Execter вместо docker: xxx.
строить
build: executor: node steps: - checkout - <<: *restore_cache - <<: *install_node_modules - run: name: Build command: yarn build - persist_to_workspace: root: ./ paths: - public
развернуть
Установите netlify-cli и файл deploy.
deploy: executor: node steps: - checkout # Attach the pesisted built files. - attach_workspace: at: ./ - <<: *restore_cache - <<: *install_node_modules - run: name: Install netlify-cli command: sudo npm install -g --silent netlify-cli - run: name: Deploy to Netlify command: netlify deploy --dir=./public -p
Как видите, я могу легко перейти на другой хост, просто заменив эту часть.
Объединяйте рабочие места
Используйте рабочий процесс, чтобы собрать их вместе.
workflows: version: 2 build_and_deploy: jobs: - test - build: requires: - test - deploy: requires: - build filters: branches: only: master
Это все о конфигурации yaml, не сложно, правда?
Вы можете найти весь файл config.yaml Circle-CI здесь
Https://github.com/thundermiracle/gatsby-simple-blog/blob/master/deploy/netlify/.circleci/config.yml.
Но настройки еще не закончены.
Мы почти там.
Что осталось?
развертывание netlify - dir =. / public -p
да. Мы не сказали netlify-cli, где развернуть.
Нам нужен NETLIFY_AUTH_TOKEN для таргетинга на нашу учетную запись и NETLIFY_SITE_ID для таргетинга на наш веб-сайт в этой учетной записи.
Netlify.com
Создать NETLIFY_AUTH_TOKEN
В ваших [Настройки пользователя] - ›[Приложения] -› [Персональные токены доступа].
(Https://app.netlify.com/user/applications#personal-access-tokens
)
Щелкните [Новый токен доступа].
Сохраните свой токен где-нибудь, потому что он показывался только один раз, и мы будем использовать его в кружке-ci.
Создать NETLIFY_SITE_ID
Это можно сделать двумя способами.
1. Установите netlify-cli на свой локальный компьютер. Запустите netlify init и следуйте инструкциям.
npm install -g netlify-cli cd your-project-folder netlify init
Наконец, cli сгенерирует для вас .netlify / config.json. Вы можете установить этот NETLIFY_SITE_ID в Circle-ci и удалить папку. Или просто оставьте это и пропустите настройку NETLIFY_SITE_ID.
2. В [Сайты] нажмите [Новый сайт из Git] (https://app.netlify.com/start
), Следуй инструкциям.
Затем вы можете найти свой идентификатор здесь: [Настройки сайта] - ›[Информация о сайте] API ID - это ваш NETLIFY_SITE_ID.
Круг-CI
Добавить проект
[Добавить проекты] - ›[Настроить проект] -› [Начать сборку]
PS: Нет необходимости копировать config.yml, мы только что создали его вручную.
Установить вирианты среды
[Настройки проекта] - ›[Переменные среды] -› [Добавить переменную]
Добавьте свои NETLIFY_AUTH_TOKEN и NETLIFY_SITE_ID.
Последний
Отправьте исходный код в Git и на Happy Static Site!